:root {
  color: #f4f1e8;
  background: #0c0d0f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #f4f1e8;
  --muted: #969996;
  --line: #2c2f31;
  --panel: #151719;
  --lime: #d8ff45;
  --orange: #ff7548;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 72% -20%, #243022 0, #0c0d0f 34rem); }
button, input { font: inherit; }
button { cursor: pointer; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 760; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 36px; aspect-ratio: 1; color: #0c0d0f; background: var(--lime); border-radius: 8px; font-size: 13px; }
.health { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.health-dot { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.health.offline .health-dot { background: var(--orange); box-shadow: none; }
.shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 292px 1fr; }
.rail { padding: 28px 20px; border-right: 1px solid var(--line); background: rgb(10 11 13 / .72); }
.rail-heading, .dialog-head, .job-header, .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(38px, 5vw, 72px); line-height: .95; letter-spacing: -.065em; max-width: 850px; }
h2 { font-size: 18px; margin-bottom: 0; letter-spacing: -.025em; }
h3 { letter-spacing: -.025em; }
.eyebrow { color: var(--lime); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.icon-button { width: 34px; height: 34px; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 22px; }
.icon-button:hover { border-color: var(--lime); }
.workspace { padding: clamp(28px, 5vw, 72px); min-width: 0; }
.onboarding { max-width: 980px; }
.lede { max-width: 760px; color: #c4c6c2; font-size: 18px; line-height: 1.6; }
.input-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 36px 0; }
.input-map article { background: var(--panel); padding: 24px; min-height: 168px; }
.input-map span { color: var(--muted); font: 12px ui-monospace, monospace; }
.input-map h3 { margin: 30px 0 6px; }
.input-map p, .guardrail, .form-hint { color: var(--muted); font-size: 13px; line-height: 1.5; }
.primary, .secondary { border: 0; border-radius: 7px; padding: 13px 18px; font-weight: 760; }
.primary { color: #0c0d0f; background: var(--lime); }
.secondary { color: var(--ink); background: #242729; border: 1px solid #393d3f; }
.secondary:disabled { opacity: .45; cursor: not-allowed; }
.guardrail { margin-top: 14px; }
.job-list { display: grid; gap: 8px; margin-top: 24px; }
.job-card { width: 100%; color: var(--ink); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 13px; }
.job-card:hover, .job-card.active { background: var(--panel); border-color: var(--line); }
.job-card strong, .job-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card small { color: var(--muted); margin-top: 5px; }
.job-select { width: 100%; padding: 0; color: inherit; text-align: left; background: none; border: 0; }
.media-link, .media-actions a, .line-item a { color: var(--lime); font-size: 12px; }
.job-card .media-link { display: block; margin-top: 9px; }
.job-header { align-items: end; margin-bottom: 28px; }
.job-header h1 { font-size: clamp(34px, 4vw, 58px); margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.view-switcher {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  background: #151719;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.view-switcher button {
  min-width: 94px;
  padding: 9px 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 760;
}
.view-switcher button[aria-pressed="true"] { color: #101214; background: var(--lime); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.metric-grid article { background: var(--panel); padding: 18px; }
.metric-grid p, .metric-grid small { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.metric-grid strong { display: block; font-size: 23px; letter-spacing: -.04em; margin-bottom: 7px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.panel { min-height: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 20px; }
.panel-wide { grid-column: 1 / -1; }
.panel-title { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.empty-row { color: var(--muted); padding: 32px 0; text-align: center; font-size: 13px; }
.timeline-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 0; }
.sequence { color: var(--lime); font: 12px ui-monospace, monospace; }
.timeline-item p { margin-bottom: 3px; }
.timeline-item small, .line-item small { color: var(--muted); }
.line-item { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.line-item:last-child { border-bottom: 0; }
.media-preview { margin: 12px 0 20px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #0f1012; }
.media-preview video { display: block; width: 100%; max-height: 420px; background: #000; }
.media-actions { display: flex; gap: 16px; margin-top: 9px; }
.qa-group + .qa-group { margin-top: 22px; }
.qa-group h3 { margin: 16px 0 8px; color: var(--lime); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.qa-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(180px, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.qa-row small { color: var(--muted); overflow-wrap: anywhere; }
.notice { padding: 13px 16px; margin-bottom: 16px; color: #1a1104; background: #ffbc4b; border-radius: 7px; }
.live-smoke-panel { margin-top: 16px; padding: 18px; border: 1px solid #5a4a20; border-radius: 9px; background: #211c10; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.live-smoke-panel[hidden] { display: none; }
.live-smoke-panel p { max-width: 760px; margin: 8px 0; color: #d1c8aa; line-height: 1.5; }
.live-smoke-panel small { color: #aaa184; }
.live-smoke-confirm { display: grid; gap: 10px; min-width: min(100%, 290px); }
.live-smoke-confirm label { display: flex; align-items: start; gap: 8px; color: #ddd5bd; font-size: 13px; line-height: 1.35; }
.live-smoke-confirm input { margin-top: 2px; }
dialog { color: var(--ink); background: #17191b; border: 1px solid #363a3c; border-radius: 12px; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; }
dialog::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); }
dialog form { padding: 24px; }
dialog label { display: grid; gap: 9px; margin: 14px 0 10px; color: #c8cac6; font-size: 13px; }
dialog input, dialog textarea { width: 100%; color: var(--ink); background: #0f1012; border: 1px solid #3b3e40; border-radius: 7px; padding: 13px; outline: none; }
dialog input:focus { border-color: var(--lime); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 18px 0; padding: 12px 16px; }
legend { color: var(--lime); font-size: 12px; font-weight: 800; padding: 0 7px; text-transform: uppercase; letter-spacing: .08em; }
.form-error { min-height: 22px; color: #ff9370; font-size: 13px; }

.factory-room {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111315;
}
.factory-room-head,
.section-heading,
.media-card-head,
.inspector-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.factory-room-head { margin-bottom: 16px; }
.factory-room-head h2,
.section-heading h3,
.inspector-title h3 { margin: 0; }
.factory-room-head p,
.section-heading span,
.inspector-title small { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.sync-state {
  padding: 7px 10px;
  color: #b8e9c8;
  background: #14271b;
  border: 1px solid #285e39;
  border-radius: 7px;
  font-size: 12px;
  white-space: nowrap;
}
.sync-state.state-active,
.sync-state.state-ready { color: #b8e9c8; background: #14271b; border-color: #285e39; }
.sync-state.state-review { color: #e8dc9d; background: #282414; border-color: #645928; }
.sync-state.state-stale { color: #efc77d; background: #2a2111; border-color: #5d4822; }
.sync-state.state-blocked { color: #ffc1ad; background: #2d1712; border-color: #71372a; }
.factory-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.input-card {
  min-width: 0;
  padding: 14px;
  color: var(--ink);
  text-align: left;
  background: #171a1c;
  border: 1px solid #303437;
  border-radius: 9px;
}
.input-card:hover,
.input-card:focus-visible { border-color: #73885a; outline: 0; }
.input-card small,
.input-card strong,
.input-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input-card small { color: var(--muted); font-size: 11px; }
.input-card strong { margin-top: 6px; font-size: 14px; }
.input-card span { margin-top: 5px; color: #afb2ae; font-size: 11px; }
.input-card.ready { box-shadow: inset 3px 0 0 #58aa75; }
.input-card.missing { box-shadow: inset 3px 0 0 #b36f3e; }
.factory-stages {
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  gap: 1px;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--line);
}
.stage-card {
  min-height: 66px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: #17191b;
  border: 0;
}
.stage-card strong,
.stage-card span { display: block; }
.stage-card strong { font-size: 12px; }
.stage-card span { margin-top: 8px; color: var(--muted); font-size: 10px; }
.stage-card[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--lime); background: #20231f; }
.stage-card.state-done span { color: #78c993; }
.stage-card.state-needs-review span { color: #ffb05f; }
.stage-card.state-running span { color: var(--lime); }
.stage-card.state-draft span { color: #e8cd82; }
.factory-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}
.media-wall,
.stage-inspector {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #151719;
}
.stage-inspector { position: sticky; top: 16px; }
.factory-media {
  display: block;
  margin-top: 12px;
}
.media-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.media-slot,
.segment-section { min-width: 0; }
.media-slot > h4,
.segment-section > h4 {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.segment-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.segment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.round-history {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.round-history button {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: var(--muted);
  background: #101214;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 750;
}
.round-history button[aria-pressed="true"] { color: #101214; background: var(--lime); border-color: var(--lime); }
.comparison-run {
  margin-top: 12px;
  padding: 14px;
  background: #111315;
  border: 1px solid #303437;
  border-radius: 10px;
}
.comparison-heading,
.comparison-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.comparison-heading strong,
.comparison-heading small { display: block; }
.comparison-heading strong { font-size: 13px; }
.comparison-heading small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.comparison-status { padding: 5px 8px; color: #e8cd82; background: #282414; border: 1px solid #645928; border-radius: 6px; font-size: 10px; white-space: nowrap; }
.comparison-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.comparison-panes section { min-width: 0; }
.comparison-panes h5 { margin: 0 0 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.comparison-frame {
  width: min(100%, var(--comparison-max-width, 292.5px));
  aspect-ratio: var(--comparison-aspect, 9 / 16);
  margin-inline: auto;
  overflow: hidden;
  background: #090a0b;
  border: 1px solid #242729;
  border-radius: 7px;
}
.comparison-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #090a0b; }
.comparison-controls { justify-content: start; margin-top: 10px; }
.comparison-controls input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--lime); }
.comparison-controls span { min-width: 74px; color: #cdd0cb; font: 11px ui-monospace, monospace; }
.comparison-controls small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.comparison-play { width: 34px; height: 30px; color: #101214; background: var(--lime); border: 0; border-radius: 6px; font-weight: 800; }
.comparison-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.comparison-meta > div { min-width: 0; padding: 10px; background: #17191b; }
.comparison-meta dt { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.comparison-meta dd { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
.comparison-review { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, .7fr) auto; gap: 8px; align-items: center; margin-top: 10px; }
.comparison-review > input { width: 100%; padding: 9px 10px; color: var(--ink); background: #0c0d0f; border: 1px solid #393d3f; border-radius: 7px; font-size: 11px; }
.media-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid #303437;
  border-radius: 9px;
  background: #111315;
}
.media-card-head { align-items: start; }
.media-card-head strong,
.media-card-head small { display: block; }
.media-card-head strong { font-size: 12px; }
.media-card-head small { margin-top: 4px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.media-state {
  color: #d8d8d2;
  font-size: 10px;
  white-space: nowrap;
}
.media-card .media-preview {
  position: relative;
  margin: 9px 0 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: var(--media-aspect, 9 / 16);
  max-height: 520px;
}
.media-card .media-preview video {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #090a0b;
}
.draft-watermark {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  padding: 5px 7px;
  color: #f4f1e8;
  background: rgb(16 18 20 / .86);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  pointer-events: none;
}
.media-card .media-actions { padding: 0 8px 8px; }
.segment-review { display: grid; gap: 8px; margin-top: 10px; }
.segment-review input {
  width: 100%;
  padding: 9px 10px;
  color: var(--ink);
  background: #0c0d0f;
  border: 1px solid #393d3f;
  border-radius: 7px;
  font-size: 11px;
}
.segment-review input:focus { outline: 2px solid rgb(216 255 69 / .25); border-color: var(--lime); }
.segment-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.segment-review-actions button {
  padding: 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 750;
}
.review-approve { color: #102117; background: #9ce3b1; border: 1px solid #9ce3b1; }
.review-reject { color: #f4d6c9; background: #291a16; border: 1px solid #714333; }
.review-feedback { color: var(--muted); font-size: 10px; }
.inspector-title { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inspector-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #292c2e; }
.inspector-row:last-child { border-bottom: 0; }
.inspector-row strong { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.inspector-row span,
.inspector-row small { display: block; overflow-wrap: anywhere; }
.inspector-row span { font-size: 12px; }
.inspector-row small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.passport-detail { margin-top: 12px; padding: 12px; color: #cdd0cb; background: #101214; border-radius: 7px; font-size: 11px; line-height: 1.55; }
.inspector-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.inspector-section h4 { margin: 0 0 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.inspector-event { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid #292c2e; font-size: 11px; line-height: 1.4; }
.inspector-event:last-child { border-bottom: 0; }
.inspector-event small { color: var(--muted); font-size: 10px; }
.inspector-event a { color: var(--lime); }
.technical-details { margin-top: 16px; }
.technical-details > summary {
  padding: 14px 16px;
  color: #c7cac5;
  background: #111315;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.technical-details[open] > summary { border-radius: 9px 9px 0 0; }
.technical-details .dashboard-grid { margin-top: 10px; }
.live-view {
  padding: 20px;
  background: #111315;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.live-view[hidden] { display: none; }
.live-streams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.live-stream-card {
  min-width: 0;
  padding: 14px;
  background: #17191b;
  border: 1px solid #303437;
  border-radius: 9px;
  box-shadow: inset 3px 0 0 #606563;
}
.live-stream-card.state-active,
.live-stream-card.state-ready { box-shadow: inset 3px 0 0 #58aa75; }
.live-stream-card.state-review { box-shadow: inset 3px 0 0 #d2b34d; }
.live-stream-card.state-blocked { box-shadow: inset 3px 0 0 #c45b42; }
.live-stream-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.live-stream-head h3 { margin: 0; font-size: 14px; }
.live-stream-head span { color: var(--muted); font-size: 10px; }
.live-fact { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid #292c2e; }
.live-fact small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.live-fact span { overflow-wrap: anywhere; font-size: 11px; line-height: 1.45; }
.live-preview { margin-top: 12px; }
.live-preview > .media-preview { max-width: 720px; }
.qa-blocker-live { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-bottom: 12px; padding: 12px; color: #b8e9c8; background: #14271b; border: 1px solid #285e39; border-radius: 8px; font-size: 12px; }
.qa-blocker-live.blocked { color: #ffc1ad; background: #2d1712; border-color: #71372a; }
.live-job-mismatch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px; background: #17191b; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .input-map, .metric-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .panel-wide { grid-column: auto; }
  .job-header { align-items: start; flex-direction: column; }
  .qa-row { grid-template-columns: 1fr; gap: 4px; }
  .live-smoke-panel { align-items: stretch; flex-direction: column; }
  .factory-room-head,
  .section-heading { align-items: start; flex-direction: column; }
  .sync-state { white-space: normal; }
  .factory-inputs,
  .factory-body,
  .media-comparison,
  .segment-grid,
  .live-streams { grid-template-columns: 1fr; }
  .comparison-meta { grid-template-columns: 1fr 1fr; }
  .comparison-review { grid-template-columns: 1fr; }
  .factory-stages { grid-template-columns: repeat(7, 138px); }
  .stage-inspector { position: static; }
  .media-card .media-preview { max-height: min(68vh, 560px); }
  .media-card .media-preview video { max-height: min(68vh, 560px); }
}

@media (max-width: 620px) {
  .comparison-panes { grid-template-columns: 1fr; }
  .comparison-frame { width: min(100%, var(--comparison-max-width, 292.5px)); }
  .comparison-meta { grid-template-columns: 1fr; }
  .comparison-controls { flex-wrap: wrap; }
  .comparison-controls input[type="range"] { order: 4; flex-basis: 100%; }
}