:root {
  --bg: #151922;
  --panel: #202633;
  --panel-2: #2b3342;
  --line: #465064;
  --text: #f2f4f8;
  --muted: #c1cad7;
  --soft: #98a5b7;
  --accent: #c83f32;
  --accent-2: #e9b15a;
  --ok: #54b77d;
  --warn: #d6a84f;
  --danger: #d95f5f;
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: grid;
  grid-template-columns: 248px 1fr;
}
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.hidden { display: none !important; }
.sidebar {
  border-right: 1px solid var(--line);
  background: #181e29;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 8px 8px 24px; }
.mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--accent); color: white; font-weight: 800; border-radius: 8px;
}
.brand strong, .brand span { display: block; }
.brand span { color: var(--muted); font-size: 12px; margin-top: 3px; }
nav { display: grid; gap: 8px; }
.nav-item {
  color: var(--muted); background: transparent; text-align: left;
  padding: 12px 14px; border-radius: 8px;
}
.nav-item.active, .nav-item:hover { color: var(--text); background: var(--panel-2); }
.app { padding: 26px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.topbar h1, h2, h3, p { margin: 0; }
.topbar h1 { font-size: 28px; letter-spacing: 0; }
.eyebrow { color: var(--accent-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0; margin-bottom: 6px; }
.top-actions, .button-row, .segmented, .field-row { display: flex; gap: 10px; align-items: center; }
.field-row > label { flex: 1; }
.primary, .ghost, .danger, .select {
  min-height: 38px; padding: 0 14px; border-radius: 8px; color: var(--text);
}
.select { background: var(--panel-2); border: 1px solid var(--line); }
.primary { background: var(--accent); }
.ghost { background: var(--panel-2); border: 1px solid var(--line); }
.danger { background: rgba(217, 95, 95, .16); color: #ffb9b9; border: 1px solid rgba(217, 95, 95, .36); }
.panel-section { display: none; }
.panel-section.active { display: block; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric, .work-card, .asset-card, .shot-card, .review-card, .export-panel, .estimate-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
.metric { padding: 16px; }
.metric span, .metric small { display: block; color: var(--muted); }
.metric strong { display: block; font-size: 24px; margin: 8px 0 4px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 18px; }
.work-card { padding: 18px; }
.wide { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head p, .work-card p, .note { color: var(--muted); }
.pipeline, .workflow { display: grid; gap: 10px; padding-left: 0; list-style: none; }
.pipeline-step {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #141820;
}
.step-no {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; background: var(--panel-2); color: var(--accent-2); font-weight: 700;
}
.badge { border-radius: 999px; padding: 5px 10px; font-size: 12px; background: rgba(84, 183, 125, .13); color: #9be3b7; }
.rules, .workflow { padding-left: 18px; color: var(--muted); line-height: 1.8; }
.estimate-box, .cost-box {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; margin-bottom: 12px;
}
.estimate-box span, .cost-box span { color: var(--muted); display: block; font-size: 12px; }
.estimate-box strong, .cost-box strong { display: block; margin-top: 6px; font-size: 22px; }
.cost-box { background: #141820; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.cost-breakdown {
  display: grid;
  gap: 10px;
}
.cost-line {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 1.3fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #141820;
}
.cost-line strong { font-size: 14px; }
.cost-line span, .cost-line small { color: var(--muted); }
.cost-line b { color: var(--accent); font-size: 14px; text-align: right; }
.cost-line small {
  grid-column: 1 / -1;
  display: block;
  line-height: 1.55;
}
.charge-table {
  display: grid;
  gap: 10px;
}
.charge-row {
  display: grid;
  grid-template-columns: minmax(72px, .9fr) minmax(120px, 1.2fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(110px, 1.1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #141820;
}
.charge-row.head {
  background: rgba(77, 232, 255, .06);
  color: var(--muted);
  font-size: 12px;
}
.charge-row strong { font-size: 14px; }
.charge-row span { color: var(--muted); }
.charge-row b { color: var(--creative); text-align: right; }
.episode-preview {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 12px 0;
  background: #141820; color: var(--muted);
}
.episode-preview div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.episode-preview b, .episode-preview em {
  min-width: 42px; min-height: 28px; display: grid; place-items: center;
  border-radius: 6px; background: var(--panel-2); color: var(--text); font-style: normal;
}
.asset-grid {
  display: block;
  min-width: 0;
}
.asset-library {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.asset-library-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.asset-library-head h3 { font-size: 18px; }
.asset-library-head h3 span { color: var(--accent-2); font-size: 14px; margin-left: 6px; }
.asset-library-head .note {
  margin-top: 6px;
  max-width: 920px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-library.collapsed .asset-library-body { display: none; }
.asset-library-body {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 14px;
  max-height: 560px;
  overflow-y: auto;
}
.asset-category-row {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.asset-category-row header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.asset-category-row header strong { color: var(--text); font-size: 14px; }
.asset-category-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compact-action {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 12px;
}
.asset-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
}
.asset-scroll::-webkit-scrollbar, .asset-library-body::-webkit-scrollbar { height: 9px; width: 9px; }
.asset-scroll::-webkit-scrollbar-thumb, .asset-library-body::-webkit-scrollbar-thumb {
  background: #3a414d;
  border-radius: 999px;
}
.asset-card {
  overflow: hidden;
  width: 188px;
  flex: 0 0 188px;
  scroll-snap-align: start;
}
.asset-thumb {
  aspect-ratio: 9 / 12; background: linear-gradient(135deg, #27303a, #11151b);
  display: grid; place-items: center; color: var(--soft); font-size: 42px; font-weight: 800;
}
.asset-img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  display: block;
  background: #080a0e;
}
.asset-video {
  width: 100%;
  height: 210px;
  object-fit: contain;
  display: block;
  background: #080a0e;
}
.asset-body { padding: 12px; min-width: 0; }
.asset-body h3 {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-body p, .shot-card p, .review-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.shot-asset-package { margin: 16px 0; }
.shot-asset-package .compact-head { margin-top: 0; }
.shot-asset-needs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.shot-asset-needs div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151b;
  padding: 10px;
  min-width: 0;
}
.shot-asset-needs strong, .shot-asset-needs span { display: block; }
.shot-asset-needs strong { margin-bottom: 6px; }
.shot-asset-needs span { color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.compact-head { margin-top: 22px; }
.task-grid { display: block; min-width: 0; }
.task-library {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.task-library-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.task-library-head h3 { font-size: 18px; }
.task-library-head h3 span { color: var(--accent-2); font-size: 14px; margin-left: 6px; }
.task-library-head .note {
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-library.collapsed .task-library-body { display: none; }
.task-library-body {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 14px;
  max-height: 620px;
  overflow-y: auto;
}
.task-category-row {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.task-category-row header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.task-category-row header strong { color: var(--text); font-size: 14px; }
.task-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
}
.task-scroll::-webkit-scrollbar, .task-library-body::-webkit-scrollbar { height: 9px; width: 9px; }
.task-scroll::-webkit-scrollbar-thumb, .task-library-body::-webkit-scrollbar-thumb {
  background: #3a414d;
  border-radius: 999px;
}
.task-card { padding: 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 10px; }
.compact-task-card {
  width: 286px;
  flex: 0 0 286px;
  scroll-snap-align: start;
}
.task-card header { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.task-card h3 {
  font-size: 15px;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-card textarea {
  min-height: 96px;
  max-height: 120px;
  font-size: 12px;
  resize: vertical;
}
.compact-task-card .button-row { flex-wrap: wrap; align-items: stretch; }
.compact-task-card .button-row button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
  flex: 1 1 88px;
}
.compact-task-card .task-image-link {
  max-height: 210px;
}
.compact-task-card .task-image-preview {
  height: 210px;
}
.task-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  max-height: 118px;
  overflow-y: auto;
  padding-right: 4px;
}
.score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.score-grid span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #11151b;
  font-size: 12px;
}
.score-grid b { color: var(--text); }
.score-grid .ok { border-color: rgba(84, 183, 125, .42); }
.score-grid .warn { border-color: rgba(214, 168, 79, .55); }
.score-grid .bad { border-color: rgba(217, 95, 95, .55); }
.attempt-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.attempt-list span {
  border: 1px solid var(--line);
  background: #11151b;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
}
.task-image-link {
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 280px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07090d;
  padding: 0;
  cursor: zoom-in;
}
.task-image-preview {
  width: 100%;
  height: 280px;
  object-fit: contain;
  display: block;
}
.prompt-overview-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.image-model-console {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.image-model-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, .42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 14, 20, .78);
}
.image-model-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.model-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(from 30deg, #4de8ff, #9b7cff, #ff5ca8, #4de8ff);
  box-shadow: 0 0 18px rgba(77, 232, 255, .35);
  flex: 0 0 auto;
}
.image-model-pill b,
.image-model-pill small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-model-pill label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}
.image-model-pill select {
  min-width: min(420px, 58vw);
  min-height: 34px;
}
.image-model-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: min(360px, 58vw);
}
.image-model-switch button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
}
.image-model-switch button.active {
  color: var(--text);
  border-color: rgba(77, 232, 255, .9);
  background: rgba(77, 232, 255, .14);
}
.image-model-pill small {
  color: var(--muted);
  margin-top: 2px;
}
.image-top-params {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.image-param-block {
  display: grid;
  gap: 6px;
}
.image-param-block b {
  color: var(--muted);
  font-size: 12px;
}
.prompt-list {
  display: grid;
  gap: 10px;
  align-content: start;
}
.prompt-list-item {
  text-align: left;
  padding: 13px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}
.prompt-list-item.active { border-color: var(--accent); }
.prompt-list-item header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 6px;
}
.prompt-list-item strong {
  font-size: 14px;
  line-height: 1.35;
}
.prompt-list-item p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.prompt-detail {
  display: grid;
  gap: 12px;
}
.prompt-detail .compact-head { margin-top: 0; }
.prompt-detail textarea {
  min-height: 280px;
  font-size: 13px;
  line-height: 1.6;
}
.image-composer-panel {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 12, 18, .82);
}
.image-upload-tile {
  min-height: 92px;
  border: 1px dashed rgba(134, 154, 166, .55);
  border-radius: 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
}
.image-upload-tile span {
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
}
.image-composer-panel textarea {
  min-height: 112px;
  border: 0;
  padding: 4px;
  background: transparent;
  resize: vertical;
}
.image-param-group {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
}
.image-ratio-group {
  flex-wrap: wrap;
}
.image-param-group button {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 5px;
  border: 0;
  color: var(--muted);
  background: transparent;
}
.image-param-group button.active {
  color: var(--text);
  background: rgba(77, 232, 255, .16);
  box-shadow: 0 0 0 1px rgba(77, 232, 255, .35) inset;
}
#imageCountSelect {
  min-height: 36px;
  width: 82px;
}
.image-candidate-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.image-candidate-strip button {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: var(--muted);
}
.image-candidate-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: #05090d;
}
.prompt-preview {
  display: grid;
  gap: 10px;
}
.prompt-preview-image {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 360px;
  max-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07090d;
  padding: 0;
  cursor: zoom-in;
}
.prompt-preview-image img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  display: block;
}
.empty-preview {
  min-height: 260px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #10141b;
  color: var(--muted);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}
.asset-img, .supervisor-media { cursor: zoom-in; }
.image-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .86);
  padding: 56px 24px 24px;
}
.image-modal img {
  max-width: min(96vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  background: #050609;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.image-modal-close {
  position: fixed;
  right: 24px;
  top: 18px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.segmented { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.segmented button { color: var(--muted); background: transparent; border-radius: 6px; min-height: 30px; padding: 0 10px; }
.segmented button.active { color: var(--text); background: var(--panel-2); }
.field-group { display: grid; gap: 8px; margin-bottom: 14px; }
.shot-layout, .flow-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: 680px; }
.supervisor-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.supervisor-steps { display: grid; gap: 10px; margin-top: 14px; }
.supervisor-step {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #141820;
}
.supervisor-step span {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 7px; background: var(--panel-2); color: var(--accent-2); font-weight: 700;
}
.supervisor-step em { color: var(--muted); font-style: normal; font-size: 12px; }
.supervisor-step.done { border-color: rgba(84, 183, 125, .5); }
.supervisor-step.done em { color: #9be3b7; }
.supervisor-step.active { border-color: var(--accent); }
.supervisor-focus { display: grid; gap: 12px; }
.supervisor-focus textarea { min-height: 260px; }
.supervisor-media {
  width: min(100%, 360px);
  max-height: 420px;
  object-fit: contain;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07090d;
}
.agent-box {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}
.agent-log {
  min-height: 92px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151b;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.agent-log p { color: var(--text); font-size: 13px; line-height: 1.5; }
.agent-log .note { color: var(--muted); }
#agentInput { min-height: 86px; }
.shot-list, .flow-list { display: grid; gap: 10px; align-content: start; }
.shot-card { padding: 13px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.shot-card.active { border-color: var(--accent); }
.shot-card header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.shot-detail { min-width: 0; }
.video-frame {
  background: #06070a; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; min-height: 420px;
}
.video-frame video { width: min(100%, 420px); max-height: 72vh; background: #000; }
.video-frame.final video { width: min(100%, 460px); }
.detail-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
label { display: grid; gap: 8px; color: var(--muted); }
textarea, input, select {
  width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 12px;
}
textarea { min-height: 230px; resize: vertical; }
.compact-textarea { min-height: 96px; }
.status-box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.status-box h3 { margin-bottom: 8px; }
.checks { display: grid; gap: 10px; margin: 18px 0; }
.checks label { display: flex; align-items: center; gap: 8px; }
.checks input[type="file"] { min-width: 0; max-width: 100%; }
.inline-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.review-card { padding: 14px; }
.review-card video {
  width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; margin-bottom: 10px;
}
.export-panel { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(320px, 1fr); gap: 18px; padding: 18px; }
.export-info { align-self: center; }
.post-panel {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.post-panel h3 { margin: 0 0 2px; }
.post-panel label { display: flex; align-items: center; gap: 8px; }
.post-panel input[type="checkbox"] { width: auto; }
dl { display: grid; gap: 10px; margin: 22px 0; }
dl div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
dt { color: var(--muted); }
dd { margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 16px; }
.upload-bar {
  display: grid; grid-template-columns: 160px minmax(220px, 1fr) auto minmax(160px, .8fr);
  gap: 10px; align-items: center; margin-bottom: 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 12px;
}
.upload-bar input[type="file"] { min-height: 38px; padding: 7px 10px; }
code { color: #f0d18f; }
@media (max-width: 980px) {
  body { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  nav { grid-template-columns: repeat(3, 1fr); }
  .metrics, .workspace-grid, .shot-layout, .flow-layout, .prompt-overview-layout, .detail-grid, .export-panel, .settings-grid, .upload-bar, .estimate-box, .cost-box, .field-row {
    grid-template-columns: 1fr;
  }
  .topbar, .upload-bar { align-items: stretch; }
}

/* 2026 creative production-console visual refresh. Layout hooks and behavior stay unchanged. */
:root {
  --bg: #0b0f12;
  --panel: #151a1f;
  --panel-2: #1d242a;
  --line: #2b353d;
  --text: #f6f7f5;
  --muted: #a8b3bb;
  --soft: #73818b;
  --accent: #ff5c4d;
  --accent-2: #ffc857;
  --creative: #38d2c2;
  --ok: #46c987;
  --warn: #ffc857;
  --danger: #ff6b6b;
  --shadow: 0 12px 32px rgba(0, 0, 0, .22);
  color-scheme: dark;
}

html { background: var(--bg); }

body {
  grid-template-columns: 224px minmax(0, 1fr);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
}

::selection { background: rgba(56, 210, 194, .28); color: #fff; }

button,
input,
textarea,
select { letter-spacing: 0; }

button,
.select,
input,
textarea {
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--creative);
  outline-offset: 2px;
}

.sidebar {
  width: 224px;
  padding: 18px 12px;
  background: #0f1418;
  border-right: 1px solid #263038;
  box-shadow: 10px 0 30px rgba(0, 0, 0, .14);
  z-index: 30;
}

.brand {
  gap: 11px;
  min-height: 68px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent);
  box-shadow: 0 7px 18px rgba(255, 92, 77, .24);
  font-size: 17px;
}

.brand strong {
  font-size: 15px;
  line-height: 1.25;
}

.brand span {
  max-width: 140px;
  color: #82909a;
  font-size: 11px;
  line-height: 1.35;
}

nav {
  counter-reset: production-nav;
  display: grid;
  gap: 3px;
}

.nav-item {
  counter-increment: production-nav;
  position: relative;
  min-height: 42px;
  padding: 0 10px 0 43px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #97a4ad;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item::before {
  content: counter(production-nav, decimal-leading-zero);
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #56636c;
  font-family: Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

.nav-item:hover {
  color: #fff;
  background: #171d22;
  border-color: #273139;
}

.nav-item.active {
  color: #fff;
  background: #1c2329;
  border-color: #303c45;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}

.nav-item.active::before { color: var(--creative); }
.nav-item.active::after { background: var(--accent); }

.app {
  min-width: 0;
  padding: 0 24px 48px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  min-height: 92px;
  margin-bottom: 20px;
  padding: 17px 0 14px;
  background: rgba(11, 15, 18, .94);
  border-bottom: 1px solid rgba(43, 53, 61, .8);
  backdrop-filter: blur(16px);
}

.topbar h1 {
  max-width: 720px;
  font-size: 26px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.eyebrow {
  color: var(--accent-2);
  font-weight: 800;
  font-size: 10px;
  line-height: 1.2;
  margin-bottom: 7px;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.top-actions .select { width: auto; min-width: 96px; }
#roleSelect { min-width: 126px; }
#episodeSelect { min-width: 88px; }
#refreshProject,
#goShots { width: auto; min-width: max-content; white-space: nowrap; }

.primary,
.ghost,
.danger,
.select {
  min-height: 40px;
  border-radius: 7px;
  padding: 0 14px;
  white-space: nowrap;
}

.primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid #ff7468;
  box-shadow: 0 6px 16px rgba(255, 92, 77, .16);
  font-weight: 700;
}

.primary:hover:not(:disabled) {
  background: #ff6b5e;
  border-color: #ff887e;
  transform: translateY(-1px);
}

.ghost {
  background: #1a2026;
  border: 1px solid #303a43;
  color: #dfe5e8;
}

.ghost:hover:not(:disabled) {
  color: #fff;
  background: #222a31;
  border-color: #43505a;
}

.danger {
  background: rgba(255, 107, 107, .1);
  color: #ffaaaa;
  border: 1px solid rgba(255, 107, 107, .34);
}

.danger:hover:not(:disabled) { background: rgba(255, 107, 107, .17); }

.select,
input,
textarea,
select {
  background: #11171b;
  border-color: #303b43;
  color: var(--text);
}

input:hover,
textarea:hover,
select:hover { border-color: #43515b; }

input:focus,
textarea:focus,
select:focus {
  border-color: var(--creative);
  box-shadow: 0 0 0 3px rgba(56, 210, 194, .1);
}

input[type="checkbox"] { accent-color: var(--creative); }

input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 0 11px;
  border: 1px solid #37434c;
  border-radius: 6px;
  color: #e9edef;
  background: #20272d;
  cursor: pointer;
}

.metrics {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  position: relative;
  min-height: 124px;
  padding: 17px 17px 15px;
  overflow: hidden;
  background: #141a1e;
  border-color: #2a343c;
  box-shadow: none;
}

.metric::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--accent);
}

.metric:nth-child(2)::before { background: var(--creative); }
.metric:nth-child(3)::before { background: var(--accent-2); }
.metric:nth-child(4)::before { background: var(--ok); }

.metric span {
  color: #c2cbd0;
  font-size: 12px;
  font-weight: 700;
}

.metric strong {
  margin: 10px 0 5px;
  font-size: 26px;
  line-height: 1.1;
}

.metric small { color: #75838d; font-size: 11px; }

.metric,
.work-card,
.asset-card,
.shot-card,
.review-card,
.export-panel,
.estimate-box,
.task-card,
.asset-library,
.task-library {
  border-radius: 8px;
}

.work-card,
.asset-library,
.task-library,
.export-panel {
  background: #14191e;
  border-color: #2b353d;
  box-shadow: var(--shadow);
}

.work-card { padding: 18px; }

.workspace-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr);
  gap: 16px;
}

.section-head { margin-bottom: 14px; }
.section-head h2,
.work-card h2 { font-size: 20px; line-height: 1.25; }
.section-head p { margin-top: 5px; font-size: 12px; }

.pipeline { gap: 8px; }

.pipeline-step {
  min-height: 66px;
  padding: 11px 12px;
  border-color: #29333b;
  background: #10161a;
}

.pipeline-step:hover { border-color: #3c4a54; background: #151c21; }

.pipeline-step strong { font-size: 14px; }
.pipeline-step p { margin-top: 3px; font-size: 12px; }

.step-no {
  background: rgba(56, 210, 194, .1);
  border: 1px solid rgba(56, 210, 194, .25);
  color: var(--creative);
}

.badge {
  border: 1px solid rgba(70, 201, 135, .24);
  border-radius: 6px;
  padding: 4px 8px;
  background: rgba(70, 201, 135, .09);
  color: #8be2b1;
  font-weight: 700;
}

.rules { margin: 10px 0 0; padding-left: 20px; }
.rules li { margin-bottom: 7px; }
.rules li::marker { color: var(--creative); }

.estimate-box,
.cost-box,
.episode-preview,
.shot-asset-needs div,
.score-grid span,
.agent-log,
.post-panel,
.status-box {
  background: #10161a;
  border-color: #2c3740;
}

.estimate-box strong,
.cost-box strong { color: #fff; }

.episode-preview b,
.episode-preview em {
  border: 1px solid #303c45;
  background: #1b2228;
}

.segmented {
  background: #10161a;
  border-color: #303b43;
  border-radius: 8px;
}

.segmented button { border-radius: 6px; }
.segmented button.active { background: var(--creative); color: #071311; font-weight: 800; }

.shot-layout,
.flow-layout { grid-template-columns: 292px minmax(0, 1fr); gap: 14px; }

.supervisor-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 14px; }

.flow-list,
.shot-list,
.prompt-list,
.supervisor-steps { gap: 8px; }

.shot-card,
.prompt-list-item,
.supervisor-step {
  background: #13191d;
  border-color: #2c363e;
  box-shadow: none;
}

.shot-card:hover,
.prompt-list-item:hover,
.supervisor-step:hover { border-color: #44515a; background: #182026; }

.shot-card.active,
.prompt-list-item.active,
.supervisor-step.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.supervisor-step.done { border-color: rgba(70, 201, 135, .42); }
.supervisor-step span { background: rgba(255, 200, 87, .09); color: var(--accent-2); }

.button-row { flex-wrap: wrap; }
.button-row button { flex: 0 0 auto; }

.task-card,
.asset-card,
.review-card {
  background: #151b20;
  border-color: #2d3840;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

.task-card:hover,
.asset-card:hover,
.review-card:hover {
  border-color: #44515a;
  transform: translateY(-1px);
}

.asset-library-head,
.task-library-head { min-height: 62px; background: #161c21; }

.asset-library-body,
.task-library-body { background: #101519; }

.asset-category-row header,
.task-category-row header {
  min-height: 30px;
  padding: 0 2px;
  border-bottom: 1px solid #273139;
}

.asset-scroll,
.task-scroll { padding: 2px 2px 10px; }

.asset-scroll::-webkit-scrollbar-thumb,
.asset-library-body::-webkit-scrollbar-thumb,
.task-scroll::-webkit-scrollbar-thumb,
.task-library-body::-webkit-scrollbar-thumb {
  background: #43505a;
  border: 2px solid #141a1f;
}

.asset-thumb { background: #10161a; color: #596872; }
.asset-img,
.asset-video,
.task-image-link,
.prompt-preview-image,
.supervisor-media { background: #070a0c; border-color: #2d3840; }

.score-grid .ok { border-color: rgba(70, 201, 135, .5); background: rgba(70, 201, 135, .05); }
.score-grid .warn { border-color: rgba(255, 200, 87, .52); background: rgba(255, 200, 87, .05); }
.score-grid .bad { border-color: rgba(255, 107, 107, .52); background: rgba(255, 107, 107, .05); }

.attempt-list span {
  border-radius: 6px;
  background: #10161a;
}

.video-frame {
  min-height: 420px;
  background: #050709;
  border-color: #313c44;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}

.detail-grid { gap: 12px; }

.review-grid { gap: 12px; }
.review-card video { border: 1px solid #303b43; }

.export-panel {
  grid-template-columns: minmax(350px, .92fr) minmax(380px, 1fr);
  gap: 20px;
  padding: 18px;
  border-top: 3px solid var(--creative);
}

.export-info { padding: 4px 0; }
.export-info h2 { font-size: 24px; }

dl { margin: 18px 0; }
dl div { min-height: 38px; align-items: center; }
dd { color: #fff; font-weight: 800; }

.post-panel { padding: 15px; }
.post-panel h3 { color: var(--accent-2); }
.post-panel label { color: #b9c2c7; }

.upload-bar {
  background: #141a1f;
  border-color: #2d3840;
  box-shadow: var(--shadow);
}

.prompt-overview-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 14px; }
.prompt-detail textarea { background: #0e1418; }

.empty-preview {
  background: #0f1519;
  border-color: #39464f;
  color: #81909a;
}

.image-modal { background: rgba(4, 7, 9, .92); }

.account-chip {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 6px 5px 12px;
  border: 1px solid rgba(77, 232, 255, .22);
  border-radius: 8px;
  background: rgba(7, 17, 24, .78);
}

.account-chip span {
  color: var(--text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip strong {
  color: #8ff5cf;
  font-size: 13px;
  white-space: nowrap;
}

.account-chip .ghost {
  min-height: 30px;
  padding: 0 10px;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 7, 9, .76);
  backdrop-filter: blur(10px);
}

.auth-card {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(77, 232, 255, .28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15, 24, 32, .98), rgba(13, 16, 25, .98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.auth-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
}

.auth-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(10, 17, 25, .86);
}

.auth-tabs {
  width: 100%;
}

.auth-tabs button {
  flex: 1;
}

.auth-hint {
  margin: -4px 0 0;
  color: #9ad9e6;
  font-size: 12px;
  line-height: 1.6;
}

.admin-user-list {
  display: grid;
  gap: 12px;
}

.admin-user-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #141820;
}

.admin-user-card strong,
.admin-user-card span,
.admin-user-card small {
  display: block;
}

.admin-user-card span,
.admin-user-card small {
  color: var(--muted);
  margin-top: 4px;
}

.admin-user-card b {
  color: #8ff5cf;
  white-space: nowrap;
}

.admin-user-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(140px, 1fr) auto minmax(130px, .9fr) minmax(84px, .6fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-user-actions input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(10, 17, 25, .86);
}

.note,
.work-card p,
.section-head p { color: var(--muted); }

code { color: var(--accent-2); }

@media (max-width: 1180px) {
  body { grid-template-columns: 204px minmax(0, 1fr); }
  .sidebar { width: 204px; }
  .app { padding-left: 18px; padding-right: 18px; }
  .topbar { align-items: flex-start; }
  .metrics { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .workspace-grid { grid-template-columns: 1fr; }
  .export-panel { grid-template-columns: minmax(310px, .8fr) minmax(340px, 1fr); }
}

@media (max-width: 980px) {
  body { display: block; }

  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  }

  .brand { display: none; }

  nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
  }

  .nav-item::before,
  .nav-item::after { display: none; }

  .app { padding: 0 14px 36px; }
  .topbar { top: 59px; min-height: auto; padding: 13px 0; }

  .workspace-grid,
  .shot-layout,
  .flow-layout,
  .supervisor-layout,
  .prompt-overview-layout,
  .detail-grid,
  .export-panel,
  .settings-grid,
  .upload-bar,
  .estimate-box,
  .cost-box,
  .cost-line,
  .charge-row,
  .field-row {
    grid-template-columns: 1fr;
  }

  .shot-layout,
  .flow-layout { min-height: auto; }
  .video-frame { min-height: 360px; }
}

@media (max-width: 680px) {
  .topbar { display: grid; gap: 12px; }
  .topbar h1 { font-size: 22px; }
  .top-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .top-actions .select,
  #refreshProject,
  #goShots { width: 100%; min-width: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 108px; padding: 14px; }
  .metric strong { font-size: 22px; }
  .section-head { align-items: flex-start; }
  .section-head,
  .asset-library-head,
  .task-library-head { flex-wrap: wrap; }
  .shot-asset-needs,
  .score-grid { grid-template-columns: 1fr; }
  .compact-task-card { width: 252px; flex-basis: 252px; }
  .asset-card { width: 172px; flex-basis: 172px; }
  .export-panel { padding: 12px; }
  .video-frame.final video { width: min(100%, 360px); }
}

@media (max-width: 430px) {
  .metrics { grid-template-columns: 1fr; }
  .top-actions { grid-template-columns: 1fr; }
  .button-row { display: grid; grid-template-columns: 1fr; width: 100%; }
  .button-row button { width: 100%; }
}

/* AI造梦网: intelligent creative-studio theme. */
:root {
  --bg: #070a0f;
  --panel: #0e141b;
  --panel-2: #141d26;
  --line: #23313c;
  --text: #f4f9fb;
  --muted: #9aabb7;
  --soft: #617684;
  --accent: #4de8ff;
  --accent-2: #ff5ca8;
  --creative: #b9ff68;
  --ok: #5ee6a5;
  --warn: #ffc85c;
  --danger: #ff6f83;
  --shadow: 0 16px 44px rgba(0, 0, 0, .3);
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(77, 232, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 232, 255, .028) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
}

::selection { background: rgba(255, 92, 168, .32); color: #fff; }

.sidebar {
  background: rgba(7, 12, 18, .96);
  border-right-color: rgba(77, 232, 255, .17);
  box-shadow: 12px 0 40px rgba(0, 0, 0, .28);
}

.brand {
  border-bottom-color: rgba(77, 232, 255, .13);
}

.mark {
  width: 42px;
  height: 42px;
  background: #0a1820;
  color: var(--accent);
  border: 1px solid rgba(77, 232, 255, .72);
  box-shadow: 0 0 0 4px rgba(77, 232, 255, .05), 0 0 24px rgba(77, 232, 255, .24);
  font-family: Consolas, "Segoe UI", sans-serif;
  font-size: 14px;
}

.brand strong {
  color: #fff;
  font-size: 17px;
  font-family: "FZKai-Z03", "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  -webkit-text-stroke: .25px rgba(255, 255, 255, .35);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, .8),
    -1px 0 10px rgba(77, 232, 255, .24),
    1px 0 10px rgba(255, 92, 168, .14);
}

.brand span { color: #6f8795; }

.nav-item { color: #8397a4; }
.nav-item::before { color: #3b5361; }

.nav-item:hover {
  background: rgba(77, 232, 255, .045);
  border-color: rgba(77, 232, 255, .14);
}

.nav-item.active {
  background: rgba(77, 232, 255, .075);
  border-color: rgba(77, 232, 255, .28);
  box-shadow: inset 0 0 22px rgba(77, 232, 255, .035), 0 0 18px rgba(77, 232, 255, .035);
}

.nav-item.active::before { color: var(--accent); }
.nav-item.active::after { background: var(--accent); box-shadow: 0 0 12px rgba(77, 232, 255, .75); }

.topbar {
  background: rgba(7, 10, 15, .92);
  border-bottom-color: rgba(77, 232, 255, .14);
}

.topbar::after {
  content: "AI DREAM STUDIO / ONLINE";
  position: absolute;
  right: 0;
  bottom: -1px;
  padding: 2px 7px;
  background: #07151a;
  border: 1px solid rgba(77, 232, 255, .22);
  color: rgba(77, 232, 255, .72);
  font-family: Consolas, monospace;
  font-size: 9px;
}

.eyebrow {
  color: var(--accent);
  font-family: Consolas, "Segoe UI", sans-serif;
}

.primary {
  background: var(--accent);
  color: #031014;
  border-color: #82efff;
  box-shadow: 0 0 0 1px rgba(77, 232, 255, .05), 0 7px 22px rgba(77, 232, 255, .17);
}

.primary:hover:not(:disabled) {
  background: #83f0ff;
  color: #020b0e;
  border-color: #b5f7ff;
  box-shadow: 0 0 24px rgba(77, 232, 255, .28);
}

.ghost {
  background: #111923;
  border-color: #293946;
  color: #d8e4e9;
}

.ghost:hover:not(:disabled) {
  background: rgba(77, 232, 255, .07);
  border-color: rgba(77, 232, 255, .36);
  color: #fff;
}

.danger {
  background: rgba(255, 111, 131, .09);
  color: #ff9cac;
  border-color: rgba(255, 111, 131, .34);
}

.select,
input,
textarea,
select {
  background: #0a1118;
  border-color: #283945;
}

input:hover,
textarea:hover,
select:hover { border-color: rgba(77, 232, 255, .36); }

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 232, 255, .09), 0 0 18px rgba(77, 232, 255, .06);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline-color: var(--accent); }

input[type="checkbox"] { accent-color: var(--accent); }

.metric,
.work-card,
.asset-library,
.task-library,
.export-panel,
.task-card,
.asset-card,
.review-card,
.shot-card,
.prompt-list-item,
.supervisor-step {
  background: rgba(12, 19, 26, .94);
  border-color: #22323d;
}

.metric,
.work-card,
.asset-library,
.task-library,
.export-panel {
  position: relative;
  overflow: hidden;
}

.metric::after,
.work-card::after,
.asset-library::after,
.task-library::after,
.export-panel::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(77, 232, 255, .45);
  border-right: 1px solid rgba(77, 232, 255, .45);
  pointer-events: none;
}

.metric { background: rgba(13, 21, 28, .96); }
.metric::before { background: var(--accent); box-shadow: 0 0 16px rgba(77, 232, 255, .42); }
.metric:nth-child(2)::before { background: var(--accent-2); box-shadow: 0 0 16px rgba(255, 92, 168, .35); }
.metric:nth-child(3)::before { background: var(--warn); box-shadow: 0 0 16px rgba(255, 200, 92, .32); }
.metric:nth-child(4)::before { background: var(--creative); box-shadow: 0 0 16px rgba(185, 255, 104, .3); }

.metric strong { text-shadow: 0 0 18px rgba(255, 255, 255, .06); }

.pipeline-step,
.estimate-box,
.cost-box,
.episode-preview,
.shot-asset-needs div,
.score-grid span,
.agent-log,
.post-panel,
.status-box {
  background: rgba(7, 14, 20, .9);
  border-color: #22333e;
}

.pipeline-step:hover,
.shot-card:hover,
.prompt-list-item:hover,
.supervisor-step:hover {
  background: rgba(77, 232, 255, .04);
  border-color: rgba(77, 232, 255, .32);
}

.step-no {
  background: rgba(77, 232, 255, .08);
  border-color: rgba(77, 232, 255, .28);
  color: var(--accent);
  box-shadow: inset 0 0 14px rgba(77, 232, 255, .05);
}

.badge {
  background: rgba(94, 230, 165, .08);
  border-color: rgba(94, 230, 165, .26);
  color: #82f1bd;
  box-shadow: 0 0 14px rgba(94, 230, 165, .04);
}

.segmented { background: #081017; border-color: #263946; }
.segmented button.active {
  background: var(--accent);
  color: #021014;
  box-shadow: 0 0 18px rgba(77, 232, 255, .22);
}

.shot-card.active,
.prompt-list-item.active,
.supervisor-step.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 18px rgba(77, 232, 255, .06);
}

.supervisor-step.done { border-color: rgba(94, 230, 165, .4); }
.supervisor-step span { background: rgba(255, 92, 168, .08); color: var(--accent-2); }

.asset-library-head,
.task-library-head { background: rgba(15, 23, 31, .96); }
.asset-library-body,
.task-library-body { background: rgba(6, 12, 17, .78); }

.asset-category-row header,
.task-category-row header { border-bottom-color: rgba(77, 232, 255, .1); }

.asset-img,
.asset-video,
.task-image-link,
.prompt-preview-image,
.supervisor-media,
.video-frame {
  border-color: rgba(77, 232, 255, .2);
  box-shadow: inset 0 0 24px rgba(77, 232, 255, .025);
}

.score-grid .ok { border-color: rgba(94, 230, 165, .48); background: rgba(94, 230, 165, .045); }
.score-grid .warn { border-color: rgba(255, 200, 92, .52); background: rgba(255, 200, 92, .045); }
.score-grid .bad { border-color: rgba(255, 111, 131, .52); background: rgba(255, 111, 131, .045); }

.export-panel { border-top-color: var(--accent); box-shadow: var(--shadow), 0 0 28px rgba(77, 232, 255, .045); }
.post-panel h3 { color: var(--accent-2); }

dd { color: var(--accent); text-shadow: 0 0 16px rgba(77, 232, 255, .18); }

.empty-preview {
  background: rgba(7, 14, 20, .82);
  border-color: rgba(77, 232, 255, .22);
}

.attempt-list span { background: #081017; border-color: #243744; }

code { color: var(--creative); }

@media (max-width: 980px) {
  .sidebar {
    background: rgba(7, 12, 18, .98);
    border-bottom-color: rgba(77, 232, 255, .18);
  }
  .brand {
    display: flex;
    min-height: 42px;
    margin: 0 0 7px;
    padding: 0 4px 7px;
  }
  .brand .mark { width: 34px; height: 34px; font-size: 11px; }
  .brand strong { font-size: 15px; }
  .brand span { display: none; }
  .topbar { top: 99px; }
  .topbar::after { display: none; }
}

/* Cinematic official-site masthead and futuristic signal boards. */
.cinema-masthead {
  display: none;
  position: relative;
  min-height: 258px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid rgba(77, 232, 255, .25);
  border-radius: 8px;
  background-color: #071016;
  background-image: url("./assets/ai-cinema-command-center.png");
  background-position: center 48%;
  background-size: cover;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .025);
}

body:has(#overview.active) .cinema-masthead { display: block; }

.cinema-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 11, .6);
  pointer-events: none;
}

.cinema-masthead::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(77, 232, 255, .16);
  clip-path: polygon(0 0, 84px 0, 84px 1px, calc(100% - 84px) 1px, calc(100% - 84px) 0, 100% 0, 100% 42px, calc(100% - 1px) 42px, calc(100% - 1px) calc(100% - 42px), 100% calc(100% - 42px), 100% 100%, calc(100% - 84px) 100%, calc(100% - 84px) calc(100% - 1px), 84px calc(100% - 1px), 84px 100%, 0 100%, 0 calc(100% - 42px), 1px calc(100% - 42px), 1px 42px, 0 42px);
  pointer-events: none;
}

.masthead-content {
  position: relative;
  z-index: 2;
  width: min(700px, 62%);
  padding: 34px 36px 62px;
}

.masthead-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 0 16px rgba(77, 232, 255, .52);
}

.masthead-content h2 {
  margin: 0;
  color: #fff;
  font-size: 44px;
  line-height: 1.08;
  font-family: "FZKai-Z03", "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  -webkit-text-stroke: .55px rgba(255, 255, 255, .5);
  text-shadow:
    0 4px 28px rgba(0, 0, 0, .82),
    -2px 0 20px rgba(77, 232, 255, .3),
    2px 0 20px rgba(255, 92, 168, .2);
}

.masthead-slogan {
  margin: 12px 0 20px;
  color: #f2fbff;
  font-family: "FZKai-Z03", "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: 23px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-text-stroke: .35px rgba(255, 255, 255, .45);
  text-shadow:
    0 3px 18px rgba(0, 0, 0, .9),
    -1px 0 12px rgba(77, 232, 255, .34),
    1px 0 14px rgba(255, 92, 168, .18);
}

.masthead-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(94, 230, 165, .34);
  background: rgba(3, 18, 18, .7);
  color: #8af1bd;
  font-family: Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.masthead-live span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 12px rgba(94, 230, 165, .9);
  animation: signal-pulse 1.8s ease-in-out infinite;
}

.masthead-boards {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 34px;
  width: 260px;
  display: grid;
  gap: 10px;
}

.signal-board {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(77, 232, 255, .42);
  background: rgba(4, 13, 19, .78);
  color: #c8d7dd;
  backdrop-filter: blur(10px);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset 0 0 20px rgba(77, 232, 255, .035), 0 10px 28px rgba(0, 0, 0, .28);
}

.signal-board span { font-size: 12px; font-weight: 700; }
.signal-board strong { color: var(--accent); font-family: Consolas, monospace; font-size: 11px; }
.board-lock { margin-left: 28px; border-color: rgba(255, 92, 168, .42); }
.board-lock strong { color: #ff83bd; }
.board-render { margin-left: 10px; border-color: rgba(255, 200, 92, .42); }
.board-render strong { color: var(--warn); }

.masthead-rail {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: rgba(2, 8, 12, .82);
  border-top: 1px solid rgba(77, 232, 255, .2);
  backdrop-filter: blur(10px);
}

.masthead-rail span {
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid rgba(77, 232, 255, .12);
  color: #718b99;
  font-family: Consolas, monospace;
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead-rail span:last-child { border-right: 0; }

@keyframes signal-pulse {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .masthead-live span { animation: none; }
}

@media (max-width: 980px) {
  .cinema-masthead { min-height: 220px; background-position: 48% center; }
  .masthead-content { width: 68%; padding: 28px 26px 56px; }
  .masthead-content h2 { font-size: 36px; }
  .masthead-slogan { font-size: 20px; }
  .masthead-boards { right: 20px; width: 220px; }
}

@media (max-width: 680px) {
  .cinema-masthead { min-height: 205px; }
  .cinema-masthead::before { background: rgba(2, 7, 11, .7); }
  .masthead-content { width: 100%; padding: 25px 20px 52px; }
  .masthead-content h2 { font-size: 32px; }
  .masthead-slogan { max-width: 280px; font-size: 18px; }
  .masthead-boards { display: none; }
  .masthead-rail { grid-template-columns: repeat(2, 1fr); }
  .masthead-rail span:nth-child(3),
  .masthead-rail span:nth-child(4) { display: none; }
}

/* Seedance-style shot workbench. */
#shots .seedance-workbench {
  display: block;
  min-width: 0;
}

#shots .seedance-main {
  display: grid;
  grid-template-columns: minmax(430px, .95fr) minmax(460px, 1.05fr);
  gap: 16px;
  align-items: start;
}

#shots .seedance-result,
#shots .seedance-composer {
  min-width: 0;
  border: 1px solid rgba(77, 232, 255, .18);
  border-radius: 8px;
  background: rgba(10, 16, 23, .94);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .26);
}

#shots .seedance-result {
  padding: 14px;
}

#shots .seedance-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

#shots .seedance-result-head h3 {
  margin: 2px 0 0;
  font-size: 19px;
}

#shots .seedance-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#shots .seedance-tags span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(77, 232, 255, .22);
  border-radius: 5px;
  background: rgba(77, 232, 255, .07);
  color: #cfeef5;
  font-size: 12px;
  white-space: nowrap;
}

#shots .seedance-preview {
  min-height: 420px;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #05080c;
}

#shots .seedance-preview video {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

#shots .seedance-status {
  min-height: 56px;
  margin: 12px 0;
  color: var(--muted);
  line-height: 1.6;
}

#shots .seedance-result-actions {
  justify-content: flex-start;
}

#shots .seedance-composer {
  padding: 14px;
}

#shots .seedance-prompt-label {
  display: grid;
  gap: 8px;
  color: #d8e7ec;
  font-weight: 700;
}

#shots #promptBox {
  min-height: 220px;
  font-size: 13px;
  line-height: 1.65;
}

#shots .seedance-library-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 14px 0 8px;
}

#shots .seedance-library-tabs span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(77, 232, 255, .18);
  border-radius: 6px;
  background: rgba(7, 14, 20, .8);
  color: #9fb0bb;
  font-size: 12px;
}

#shots .seedance-library-tabs span.active {
  color: #071014;
  background: var(--accent);
  border-color: var(--accent);
}

#shots .seedance-library-tabs button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(77, 232, 255, .18);
  border-radius: 6px;
  background: rgba(7, 14, 20, .8);
  color: #9fb0bb;
  font-size: 12px;
  cursor: pointer;
}

#shots .seedance-library-tabs button.active {
  color: #071014;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(77, 232, 255, .22);
}

#shots .seedance-reference-box {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 116px;
  padding: 12px;
  border: 1px solid rgba(77, 232, 255, .16);
  border-radius: 8px;
  background: rgba(6, 12, 18, .82);
}

#shots .seedance-upload-tile {
  position: relative;
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 82px;
  border: 1px dashed rgba(156, 176, 190, .45);
  border-radius: 7px;
  color: #aab8c3;
  text-align: center;
}

#shots .seedance-upload-tile input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#shots .seedance-upload-tile span {
  font-size: 22px;
  line-height: 1;
}

#shots .seedance-upload-tile small {
  font-size: 12px;
}

#shots .seedance-reference-box p {
  margin: 0;
  color: #96a8b5;
  line-height: 1.6;
}

#shots .seedance-reference-box .inline-upload-row {
  grid-column: 1 / -1;
}

#shots .seedance-asset-strip {
  display: flex;
  gap: 8px;
  min-height: 72px;
  margin-top: 10px;
  overflow-x: auto;
  padding: 2px 0 6px;
}

#shots .seedance-asset-strip > .note {
  margin: 0;
  align-self: center;
}

#shots .seedance-asset-pill {
  position: relative;
  flex: 0 0 132px;
  min-width: 132px;
  padding: 7px;
  border: 1px solid rgba(77, 232, 255, .15);
  border-radius: 7px;
  background: rgba(7, 14, 20, .72);
}

.asset-card {
  position: relative;
}

.asset-delete {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 6;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(255, 111, 131, .38);
  border-radius: 5px;
  background: rgba(20, 6, 11, .78);
  color: #ff9cac;
  font-size: 11px;
  cursor: pointer;
  opacity: .92;
}

.asset-delete:hover {
  background: rgba(255, 111, 131, .16);
  color: #ffd4da;
}

.compact-delete {
  min-height: 22px;
  padding: 0 6px;
  font-size: 10px;
}

#shots .seedance-asset-pill img,
#shots .seedance-asset-pill video,
#shots .seedance-asset-icon {
  width: 100%;
  height: 54px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 5px;
  background: rgba(77, 232, 255, .06);
  color: var(--accent);
  font-weight: 800;
}

#shots .seedance-asset-pill strong,
#shots .seedance-asset-pill span {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#shots .seedance-asset-pill strong {
  margin-top: 6px;
  color: #d8e7ec;
  font-size: 12px;
}

#shots .seedance-asset-pill span {
  margin-top: 2px;
  color: #7f95a3;
  font-size: 11px;
}

#shots .seedance-control-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  margin-top: 12px;
}

#shots .seedance-control-bar label {
  display: grid;
  gap: 6px;
  color: #9fb0bb;
  font-size: 12px;
}

#shots .seedance-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#shots .seedance-switches label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(77, 232, 255, .15);
  border-radius: 6px;
  background: rgba(7, 14, 20, .72);
  color: #becbd3;
  font-size: 12px;
}

#shots .seedance-submit-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(77, 232, 255, .13);
}

#shots .shot-production-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(77, 232, 255, .16);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(11, 22, 30, .9), rgba(9, 12, 20, .92)) padding-box,
    linear-gradient(135deg, rgba(77, 232, 255, .2), rgba(255, 92, 168, .12)) border-box;
}

#shots .shot-production-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#shots .shot-production-head h3 {
  margin: 0;
  font-size: 15px;
}

#shots .shot-production-head > span {
  color: #7f95a3;
  font-size: 12px;
}

#shots .shot-option-group {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

#shots .shot-option-group > strong {
  color: #d8e7ec;
  font-size: 12px;
}

#shots .shot-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#shots .shot-chip-row button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(77, 232, 255, .16);
  border-radius: 7px;
  background: rgba(7, 14, 20, .72);
  color: #aebdc7;
  font-size: 12px;
  cursor: pointer;
}

#shots .shot-chip-row button.active {
  border-color: var(--accent);
  background: rgba(77, 232, 255, .18);
  color: #ecfbff;
  box-shadow: inset 0 0 16px rgba(77, 232, 255, .06), 0 0 14px rgba(77, 232, 255, .12);
}

#shots .shot-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

#shots .shot-option-grid label {
  display: grid;
  gap: 6px;
  color: #9fb0bb;
  font-size: 12px;
}

@media (max-width: 760px) {
  #shots .shot-option-grid {
    grid-template-columns: 1fr 1fr;
  }
}

#shots .seedance-submit-row span {
  color: #9fb0bb;
  font-size: 13px;
}

@media (max-width: 1280px) {
  #shots .seedance-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #shots .seedance-reference-box,
  #shots .seedance-control-bar {
    grid-template-columns: 1fr;
  }

  #shots .seedance-result-head {
    display: grid;
  }

  #shots .seedance-tags {
    justify-content: flex-start;
  }
}

/* Creative gradient window system: presentation only, workflow remains unchanged. */
:root {
  --window-cyan: #4de8ff;
  --window-pink: #ff5ca8;
  --window-gold: #ffc85c;
  --window-green: #86f7b5;
}

body {
  background-image:
    linear-gradient(118deg, rgba(77, 232, 255, .035), transparent 24%),
    linear-gradient(302deg, rgba(255, 92, 168, .028), transparent 28%),
    linear-gradient(rgba(77, 232, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 232, 255, .025) 1px, transparent 1px);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(13, 25, 34, .98), rgba(5, 10, 16, .99) 48%, rgba(12, 8, 20, .98));
}

.brand {
  position: relative;
}

.brand::after {
  content: "CREATIVE OS";
  position: absolute;
  right: 7px;
  bottom: 5px;
  color: rgba(255, 92, 168, .55);
  font-family: Consolas, monospace;
  font-size: 8px;
}

.nav-item {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .008));
}

.nav-item:hover {
  background: linear-gradient(90deg, rgba(77, 232, 255, .085), rgba(255, 92, 168, .025));
}

.nav-item.active {
  background:
    linear-gradient(90deg, rgba(77, 232, 255, .15), rgba(255, 92, 168, .055) 72%, transparent);
  border-color: rgba(77, 232, 255, .38);
}

.topbar {
  background:
    linear-gradient(90deg, rgba(9, 18, 25, .96), rgba(11, 14, 24, .94) 58%, rgba(18, 10, 24, .93));
  border-bottom-color: transparent;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.topbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--window-cyan), rgba(77, 232, 255, .1) 45%, rgba(255, 92, 168, .5), transparent);
  pointer-events: none;
}

.primary {
  background: linear-gradient(135deg, #54eaff, #67f3d1);
  border-color: rgba(183, 251, 255, .85);
  box-shadow: 0 8px 24px rgba(77, 232, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #8ff2ff, #8bffd8);
}

.ghost {
  background:
    linear-gradient(135deg, rgba(25, 39, 50, .95), rgba(16, 21, 31, .96));
  border-color: rgba(90, 125, 146, .35);
}

.danger {
  background: linear-gradient(135deg, rgba(255, 111, 131, .14), rgba(255, 92, 168, .07));
}

.select,
input,
textarea,
select {
  background:
    linear-gradient(145deg, rgba(13, 25, 34, .98), rgba(8, 13, 21, .98)) padding-box,
    linear-gradient(120deg, rgba(77, 232, 255, .28), rgba(255, 92, 168, .12)) border-box;
  border: 1px solid transparent;
}

.metric,
.work-card,
.asset-library,
.task-library,
.export-panel {
  background:
    linear-gradient(145deg, rgba(16, 28, 37, .97), rgba(8, 13, 21, .98) 72%) padding-box,
    linear-gradient(125deg, rgba(77, 232, 255, .52), rgba(77, 232, 255, .08) 42%, rgba(255, 92, 168, .3)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.work-card::before,
.asset-library::before,
.task-library::before,
.export-panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 18px;
  width: min(180px, 42%);
  height: 2px;
  background: linear-gradient(90deg, var(--window-cyan), var(--window-pink), transparent);
  box-shadow: 0 0 16px rgba(77, 232, 255, .35);
  pointer-events: none;
}

.metric {
  --metric-color: var(--window-cyan);
  background:
    linear-gradient(145deg, rgba(14, 30, 39, .98), rgba(8, 14, 21, .99) 74%) padding-box,
    linear-gradient(125deg, var(--metric-color), rgba(255, 255, 255, .035) 43%, rgba(255, 255, 255, .12)) border-box;
}

.metric:nth-child(2) { --metric-color: var(--window-pink); }
.metric:nth-child(3) { --metric-color: var(--window-gold); }
.metric:nth-child(4) { --metric-color: var(--window-green); }

.metric::before {
  height: 3px;
  background: linear-gradient(90deg, var(--metric-color), transparent 78%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--metric-color) 46%, transparent);
}

.workspace-grid > .work-card:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(25, 18, 32, .96), rgba(9, 14, 22, .99) 74%) padding-box,
    linear-gradient(125deg, rgba(255, 92, 168, .55), rgba(255, 200, 92, .12) 44%, rgba(77, 232, 255, .24)) border-box;
}

.section-head h2,
.work-card > h2,
.work-card > h3 {
  position: relative;
  color: #f5fbff;
}

.section-head h2::before,
.work-card > h2::before,
.work-card > h3::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: .9em;
  margin-right: 9px;
  background: linear-gradient(180deg, var(--window-cyan), var(--window-pink));
  box-shadow: 0 0 10px rgba(77, 232, 255, .42);
  vertical-align: -.04em;
}

.pipeline-step,
.shot-asset-needs div,
.estimate-box,
.cost-box,
.episode-preview,
.agent-log,
.post-panel,
.status-box {
  background:
    linear-gradient(120deg, rgba(12, 25, 33, .94), rgba(9, 14, 22, .96) 62%, rgba(27, 13, 31, .86));
  border-color: rgba(71, 105, 124, .34);
}

.pipeline-step:hover,
.shot-card:hover,
.prompt-list-item:hover,
.supervisor-step:hover {
  background: linear-gradient(90deg, rgba(77, 232, 255, .085), rgba(255, 92, 168, .035));
  border-color: rgba(77, 232, 255, .45);
  transform: translateY(-1px);
}

.step-no {
  background: linear-gradient(145deg, rgba(77, 232, 255, .15), rgba(255, 92, 168, .07));
}

.asset-library-head,
.task-library-head {
  background: linear-gradient(90deg, rgba(19, 36, 46, .96), rgba(18, 18, 31, .97), rgba(35, 15, 32, .9));
}

.asset-card,
.task-card,
.shot-card,
.review-card,
.prompt-list-item,
.supervisor-step {
  background:
    linear-gradient(145deg, rgba(16, 25, 33, .98), rgba(9, 14, 21, .98)) padding-box,
    linear-gradient(135deg, rgba(77, 232, 255, .28), rgba(255, 92, 168, .14)) border-box;
  border: 1px solid transparent;
}

.prompt-list-item.active,
.shot-card.active,
.supervisor-step.active {
  background:
    linear-gradient(110deg, rgba(14, 34, 43, .98), rgba(24, 16, 32, .98)) padding-box,
    linear-gradient(135deg, var(--window-cyan), var(--window-pink)) border-box;
}

.badge,
.masthead-live,
.signal-board,
.status-box {
  backdrop-filter: blur(12px);
}

.asset-scroll::-webkit-scrollbar-thumb,
.asset-library-body::-webkit-scrollbar-thumb,
.task-scroll::-webkit-scrollbar-thumb,
.task-library-body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(77, 232, 255, .78), rgba(255, 92, 168, .62));
  border: 2px solid #0b1219;
}

@media (max-width: 980px) {
  .brand::after { display: none; }
  .topbar { background: rgba(7, 12, 18, .98); }
}

@media (max-width: 680px) {
  .metric,
  .work-card,
  .asset-library,
  .task-library,
  .export-panel { box-shadow: 0 12px 30px rgba(0, 0, 0, .24); }
}

/* Top production rail: move the complete workflow navigation above the studio. */
body {
  display: block;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  height: auto;
  min-height: 72px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 9px 18px;
  border-right: 0;
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(100deg, rgba(8, 19, 27, .98), rgba(10, 14, 23, .98) 58%, rgba(23, 10, 26, .97)) padding-box,
    linear-gradient(90deg, rgba(77, 232, 255, .66), rgba(77, 232, 255, .08) 42%, rgba(255, 92, 168, .55)) border-box;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .32);
  backdrop-filter: blur(18px);
}

.sidebar::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--window-cyan), transparent 38%, var(--window-pink), transparent 78%);
  box-shadow: 0 0 14px rgba(77, 232, 255, .32);
  pointer-events: none;
}

.brand {
  display: flex;
  min-height: 52px;
  margin: 0;
  padding: 0 15px 0 0;
  border-right: 1px solid rgba(77, 232, 255, .14);
  border-bottom: 0;
}

.brand::after {
  right: 15px;
  bottom: 1px;
}

.brand span {
  max-width: 150px;
}

.sidebar nav {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(92px, 1fr));
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 1px 0 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 232, 255, .48) transparent;
}

.sidebar nav::-webkit-scrollbar { height: 5px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(77, 232, 255, .72), rgba(255, 92, 168, .62));
  border-radius: 5px;
}

.sidebar .nav-item {
  min-width: 92px;
  min-height: 52px;
  padding: 21px 8px 6px;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(255, 255, 255, 0));
}

.sidebar .nav-item::before {
  left: 10px;
  top: 6px;
  transform: none;
  font-size: 9px;
}

.sidebar .nav-item::after {
  left: 10px;
  right: 10px;
  top: auto;
  bottom: 0;
  width: auto;
  height: 2px;
  border-radius: 2px 2px 0 0;
}

.sidebar .nav-item:hover {
  background: linear-gradient(180deg, rgba(77, 232, 255, .075), rgba(255, 92, 168, .025));
  transform: translateY(-1px);
}

.sidebar .nav-item.active {
  background:
    linear-gradient(145deg, rgba(77, 232, 255, .14), rgba(255, 92, 168, .075));
  border-color: rgba(77, 232, 255, .42);
  box-shadow: inset 0 0 22px rgba(77, 232, 255, .045), 0 8px 20px rgba(0, 0, 0, .2);
}

.sidebar .nav-item.active::after {
  background: linear-gradient(90deg, var(--window-cyan), var(--window-pink));
  box-shadow: 0 0 12px rgba(77, 232, 255, .65);
}

.app {
  width: 100%;
  padding: 0 26px 48px;
}

.topbar {
  top: 72px;
}

@media (max-width: 1180px) {
  .sidebar {
    grid-template-columns: 190px minmax(0, 1fr);
    padding-left: 14px;
    padding-right: 14px;
  }
  .sidebar nav { grid-template-columns: repeat(10, minmax(98px, 1fr)); }
  .app { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 980px) {
  .sidebar {
    position: sticky;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px 12px 9px;
  }

  .brand {
    display: flex;
    min-height: 40px;
    padding: 0 0 7px;
    border-right: 0;
    border-bottom: 1px solid rgba(77, 232, 255, .12);
  }

  .brand::after { display: block; right: 3px; bottom: 9px; }
  .brand .mark { width: 34px; height: 34px; }
  .brand span { display: block; }

  .sidebar nav {
    display: flex;
    gap: 6px;
    padding-bottom: 3px;
  }

  .sidebar .nav-item {
    flex: 0 0 104px;
    min-width: 104px;
    min-height: 44px;
    padding: 17px 8px 5px;
  }

  .sidebar .nav-item::before,
  .sidebar .nav-item::after { display: block; }

  .topbar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 680px) {
  .sidebar { padding-left: 10px; padding-right: 10px; }
  .brand span { font-size: 10px; }
  .sidebar .nav-item { flex-basis: 96px; min-width: 96px; font-size: 12px; }
  .app { padding-left: 14px; padding-right: 14px; }
}

/* Shot studio: keep preview, prompt and primary actions visible together. */
#shots .section-head {
  margin-bottom: 12px;
}

#shots .shot-layout {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  align-items: start;
}

#shots .shot-list {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 232, 255, .5) transparent;
}

#shots .shot-list::-webkit-scrollbar,
#shots .detail-grid::-webkit-scrollbar { width: 6px; height: 6px; }

#shots .shot-list::-webkit-scrollbar-thumb,
#shots .detail-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(77, 232, 255, .78), rgba(255, 92, 168, .62));
  border-radius: 6px;
}

#shots .shot-candidate-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 10px;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 232, 255, .5) transparent;
}

#shots .shot-candidate-strip::-webkit-scrollbar { height: 6px; }
#shots .shot-candidate-strip::-webkit-scrollbar-thumb {
  background: rgba(77, 232, 255, .58);
  border-radius: 6px;
}

#shots .shot-candidate {
  display: grid;
  grid-template-rows: 52px 18px;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(134, 154, 166, .35);
  border-radius: 7px;
  background: rgba(6, 13, 18, .68);
  color: #d7e6ec;
}

#shots .shot-candidate.selected {
  border-color: rgba(77, 232, 255, .95);
  box-shadow: 0 0 0 1px rgba(77, 232, 255, .3);
}

#shots .shot-candidate video {
  width: 100%;
  height: 52px;
  object-fit: cover;
  border-radius: 5px;
  background: #05090d;
}

#shots .shot-candidate b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

#shots .shot-detail {
  display: grid;
  grid-template-columns: minmax(500px, 1.3fr) minmax(380px, .7fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

#shots .video-frame {
  position: relative;
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 520px;
  max-height: 780px;
  background:
    linear-gradient(145deg, rgba(5, 12, 17, .98), rgba(3, 5, 9, .99)) padding-box,
    linear-gradient(135deg, rgba(77, 232, 255, .34), rgba(255, 92, 168, .18)) border-box;
  border: 1px solid transparent;
}

#shots .video-frame video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

#shots .detail-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: 1px 6px 12px 1px;
  align-content: start;
}

#shots .detail-grid > label {
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(15, 28, 37, .98), rgba(10, 14, 22, .98)) padding-box,
    linear-gradient(135deg, rgba(77, 232, 255, .4), rgba(255, 92, 168, .2)) border-box;
  color: #d7e6ec;
  font-size: 12px;
  font-weight: 700;
}

#shots #promptBox {
  min-height: 170px;
  max-height: 230px;
  resize: vertical;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
}

#shots .status-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(16, 27, 35, .98), rgba(14, 12, 22, .98)) padding-box,
    linear-gradient(135deg, rgba(77, 232, 255, .38), rgba(255, 92, 168, .32)) border-box;
  border: 1px solid transparent;
}

#shots .status-box h3 {
  order: 0;
  margin: 0;
}

#shots .status-box > p {
  order: 1;
  max-height: 104px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.55;
}

#shots .status-box > .button-row {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid rgba(77, 232, 255, .12);
  border-bottom: 1px solid rgba(255, 92, 168, .12);
}

#shots .status-box > .button-row button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
}

#shots .checks {
  order: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

#shots .checks > label,
#shots .checks > .inline-upload-row {
  min-width: 0;
}

#shots .checks > label:nth-child(-n + 4),
#shots .checks > .inline-upload-row {
  grid-column: 1 / -1;
}

#shots .checks > label:has(input[type="checkbox"]) {
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid rgba(77, 232, 255, .1);
  border-radius: 6px;
  background: rgba(7, 14, 20, .58);
  color: #9fb0ba;
  font-size: 11px;
}

#shots .checks select,
#shots .checks input[type="file"] {
  min-height: 36px;
  padding: 7px 9px;
  font-size: 12px;
}

@media (max-width: 1380px) {
  #shots .shot-layout { grid-template-columns: 210px minmax(0, 1fr); }
  #shots .shot-detail { grid-template-columns: minmax(460px, 1.15fr) minmax(350px, .85fr); }
}

@media (max-width: 1180px) {
  #shots .shot-detail { grid-template-columns: 1fr; }
  #shots .video-frame {
    height: min(62vh, 640px);
    min-height: 430px;
  }
  #shots .detail-grid {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 980px) {
  #shots .shot-layout { grid-template-columns: 1fr; }
  #shots .shot-list {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 7px;
  }
  #shots .shot-card {
    flex: 0 0 158px;
    min-width: 158px;
  }
  #shots .video-frame {
    height: min(58vh, 600px);
    min-height: 390px;
  }
}

@media (max-width: 680px) {
  #shots .section-head { display: grid; grid-template-columns: 1fr 1fr; }
  #shots .section-head > div { grid-column: 1 / -1; }
  #shots .section-head .primary { grid-column: 1 / -1; }
  #shots .video-frame { height: 480px; min-height: 0; }
  #shots .checks { grid-template-columns: 1fr; }
  #shots .checks > label,
  #shots .checks > .inline-upload-row { grid-column: 1; }
  #shots .status-box > .button-row { grid-template-columns: 1fr; }
}

/* Motion showcase: animated brand masthead and lightweight overview reels. */
.masthead-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: brightness(.95) contrast(1.04) saturate(1.1);
  pointer-events: none;
}

.cinema-masthead::before {
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 7, 11, .58), rgba(2, 7, 11, .22) 46%, rgba(2, 7, 11, .36));
}
.cinema-masthead::after { z-index: 4; }
.masthead-content,
.masthead-boards,
.masthead-rail { z-index: 3; }

.motion-showcase {
  margin: 0 0 18px;
}

.motion-showcase-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.motion-showcase-head h2 {
  margin: 0;
  font-size: 20px;
}

.motion-showcase-head h2::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: .9em;
  margin-right: 9px;
  background: linear-gradient(180deg, var(--window-cyan), var(--window-pink));
  box-shadow: 0 0 10px rgba(77, 232, 255, .42);
  vertical-align: -.04em;
}

.motion-showcase-head > span {
  color: rgba(77, 232, 255, .58);
  font-family: Consolas, monospace;
  font-size: 9px;
}

.motion-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.motion-showcase-card {
  --motion-poster: url("./assets/showcase-xianxia.jpg");
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(rgba(5, 11, 17, .18), rgba(5, 8, 13, .4)) padding-box,
    linear-gradient(125deg, rgba(77, 232, 255, .52), rgba(255, 92, 168, .3)) border-box;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
  isolation: isolate;
}

.motion-showcase-card.live-motion {
  --motion-poster: url("./assets/showcase-live-action.jpg");
  background:
    linear-gradient(rgba(5, 11, 17, .18), rgba(5, 8, 13, .4)) padding-box,
    linear-gradient(125deg, rgba(255, 92, 168, .48), rgba(255, 200, 92, .3)) border-box;
}

.motion-showcase-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px;
  background-image: linear-gradient(rgba(4, 9, 14, .24), rgba(4, 7, 11, .54)), var(--motion-poster);
  background-position: center;
  background-size: cover;
  filter: blur(18px) saturate(1.18);
  transform: scale(1.08);
}

.motion-showcase-card video {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: contain;
  object-position: center;
  background: rgba(2, 5, 8, .25);
}

.motion-showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 8, 13, .72), transparent 44%, rgba(3, 7, 12, .12));
  pointer-events: none;
}

.motion-showcase-label {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 17px;
  display: grid;
  gap: 3px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .9);
}

.motion-showcase-label span {
  color: var(--window-cyan);
  font-family: Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
}

.live-motion .motion-showcase-label span { color: #ff8fc3; }

.motion-showcase-label strong {
  color: #fff;
  font-size: 18px;
}

.motion-showcase-label small {
  color: rgba(226, 240, 246, .62);
  font-family: Consolas, monospace;
  font-size: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .masthead-video,
  .motion-showcase-card video { display: none; }
}

@media (max-width: 980px) {
  .motion-showcase-card { min-height: 240px; }
  .motion-showcase-card video { height: 240px; }
}

@media (max-width: 680px) {
  .motion-showcase-head { align-items: start; }
  .motion-showcase-head > span { display: none; }
  .motion-showcase-grid { grid-template-columns: 1fr; }
  .motion-showcase-card { min-height: 230px; }
  .motion-showcase-card video { height: 230px; }
}

/* Compact motion strip: retain movement without consuming the work surface. */
.cinema-masthead {
  min-height: 218px;
}

.motion-showcase {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px;
}

.motion-showcase-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(15, 27, 36, .98), rgba(11, 13, 21, .98)) padding-box,
    linear-gradient(135deg, rgba(77, 232, 255, .42), rgba(255, 92, 168, .22)) border-box;
}

.motion-showcase-head h2 {
  font-size: 17px;
  line-height: 1.2;
}

.motion-showcase-head > span {
  display: none;
}

.motion-showcase-grid {
  gap: 10px;
}

.motion-showcase-card,
.motion-showcase-card.live-motion {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
}

.motion-showcase-card video {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.motion-showcase-card.live-motion video {
  object-position: center;
}

.motion-showcase-label {
  left: 14px;
  bottom: 12px;
}

.motion-showcase-label strong {
  font-size: 15px;
}

.motion-showcase-label small {
  display: none;
}

@media (max-width: 980px) {
  .cinema-masthead { min-height: 205px; }
  .motion-showcase { grid-template-columns: 150px minmax(0, 1fr); }
  .motion-showcase-card,
  .motion-showcase-card.live-motion,
  .motion-showcase-card video { min-height: 0; height: auto; }
}

@media (max-width: 680px) {
  .motion-showcase {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .motion-showcase-head {
    min-height: 54px;
    padding: 9px 12px;
  }
  .motion-showcase-head .eyebrow { margin-bottom: 4px; }
  .motion-showcase-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .motion-showcase-card,
  .motion-showcase-card.live-motion {
    flex: 0 0 280px;
    min-height: 0;
    height: auto;
  }
  .motion-showcase-card video {
    min-height: 0;
    height: 100%;
  }
}

/* Final override: Seedance workbench replaces the older split shot studio. */
#shots .shot-detail.seedance-workbench {
  display: block;
  grid-template-columns: none;
}

#shots .seedance-workbench .seedance-main {
  display: grid;
  grid-template-columns: minmax(430px, .95fr) minmax(460px, 1.05fr);
  gap: 16px;
  align-items: start;
}

#shots .seedance-workbench .seedance-preview {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
}

#shots .seedance-workbench .seedance-preview video {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

#shots .seedance-workbench #promptBox {
  min-height: 220px;
  max-height: none;
}

@media (max-width: 1280px) {
  #shots .seedance-workbench .seedance-main {
    grid-template-columns: 1fr;
  }
}

/* Final brightness pass: keep the dark studio identity, but lift the whole UI. */
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(77, 232, 255, .08), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(255, 92, 168, .07), transparent 24%),
    #151922;
}

.sidebar,
.topbar,
.asset-library,
.task-library,
.work-card,
.metric,
.asset-card,
.shot-card,
.review-card,
.export-panel,
.estimate-box,
.upload-bar,
.prompt-list-item,
.image-model-toolbar,
.image-composer-panel,
#shots .seedance-result,
#shots .seedance-composer,
#shots .shot-production-panel {
  background-color: rgba(31, 38, 51, .94);
  border-color: rgba(93, 107, 131, .72);
}

input,
textarea,
select,
.select,
.ghost,
.segmented,
.image-param-group,
.image-model-switch button,
#shots .seedance-reference-box {
  background-color: rgba(43, 51, 66, .96);
  border-color: rgba(93, 107, 131, .72);
}

.note,
.section-head p,
.work-card p,
.prompt-list-item p,
.asset-body p,
.shot-card p,
.review-card p,
.image-model-pill small {
  color: #c6d0dd;
}

.cinema-masthead::before {
  background: linear-gradient(90deg, rgba(10, 17, 28, .42), rgba(10, 17, 28, .12) 46%, rgba(10, 17, 28, .24));
}

.masthead-video {
  filter: brightness(1.12) contrast(1.02) saturate(1.08);
}

/* Dynamic gallery cards use compact strip source videos. */
.motion-showcase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.motion-showcase-card,
.motion-showcase-card.live-motion {
  aspect-ratio: auto;
  height: 126px;
  min-height: 126px;
}

.motion-showcase-card video,
.motion-showcase-card.live-motion video {
  width: 100%;
  height: 126px;
  object-fit: cover;
  object-position: center;
}

.motion-showcase-card.xianxia-motion {
  height: auto;
  min-height: 0;
  aspect-ratio: 21 / 9;
  background:
    radial-gradient(circle at 52% 42%, rgba(122, 156, 255, .2), transparent 42%),
    #070b12;
}

.motion-showcase-card.xianxia-motion video {
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: brightness(1.18) contrast(1.12) saturate(1.12);
}

@media (max-width: 680px) {
  .motion-showcase-card.xianxia-motion,
  .motion-showcase-card.xianxia-motion video {
    height: auto;
    min-height: 0;
  }
}

/* Cinematic hero refresh: make the masthead a real first-screen brand signal. */
body:has(#overview.active) .cinema-masthead {
  display: grid;
}

.cinema-masthead {
  min-height: clamp(300px, 25vw, 360px);
  margin-bottom: 20px;
  border-color: rgba(111, 205, 226, .34);
  border-radius: 8px;
  background-color: #0b1018;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .34);
}

.masthead-video {
  object-position: center 46%;
  filter: brightness(1.08) contrast(1.06) saturate(1.08);
}

.cinema-masthead::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 12, 18, .82) 0%, rgba(8, 12, 18, .58) 28%, rgba(8, 12, 18, .16) 58%, rgba(8, 12, 18, .38) 100%),
    linear-gradient(180deg, rgba(5, 8, 12, .12), rgba(5, 8, 12, .5));
}

.cinema-masthead::after {
  inset: 12px;
  border-color: rgba(111, 205, 226, .16);
  opacity: .72;
}

.masthead-content {
  width: min(720px, 56%);
  padding: clamp(42px, 5vw, 62px) 42px 42px;
  align-self: center;
}

.masthead-kicker {
  margin-bottom: 10px;
  color: #80e3f2;
  font-size: 11px;
  text-shadow: 0 0 14px rgba(128, 227, 242, .36);
}

.masthead-content h2 {
  font-size: clamp(46px, 5vw, 68px);
  line-height: 1;
  text-shadow:
    0 5px 26px rgba(0, 0, 0, .74),
    0 0 20px rgba(128, 227, 242, .22);
}

.masthead-slogan {
  max-width: 520px;
  margin: 15px 0 22px;
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: 1.28;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .82);
}

.masthead-live {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: rgba(13, 31, 31, .74);
  font-size: 12px;
  color: #a9f4ce;
}

.masthead-boards {
  top: 28px;
  right: 30px;
  width: 230px;
  gap: 8px;
}

.signal-board,
.board-lock,
.board-render {
  margin-left: 0;
}

.signal-board {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 7px;
  clip-path: none;
  background: rgba(14, 22, 32, .58);
  border-color: rgba(135, 198, 218, .28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.signal-board span {
  font-size: 12px;
}

.masthead-rail {
  display: none;
}

@media (max-width: 980px) {
  .cinema-masthead {
    min-height: 280px;
  }

  .masthead-content {
    width: min(620px, 68%);
    padding: 36px 28px;
  }

  .masthead-boards {
    right: 22px;
    width: 205px;
  }
}

@media (max-width: 680px) {
  .cinema-masthead {
    min-height: 260px;
  }

  .cinema-masthead::before {
    background: linear-gradient(90deg, rgba(8, 12, 18, .84), rgba(8, 12, 18, .46));
  }

  .masthead-content {
    width: 100%;
    padding: 32px 20px;
  }

  .masthead-content h2 {
    font-size: 42px;
  }

  .masthead-slogan {
    max-width: 330px;
    font-size: 21px;
  }

  .masthead-boards {
    display: none;
  }
}

/* Static compact masthead: keep the banner still and return to the earlier height. */
body:has(#overview.active) .cinema-masthead {
  display: block;
}

.cinema-masthead {
  min-height: 218px;
  margin-bottom: 16px;
  background-image: url("./assets/ai-cinema-command-center.png");
  background-position: center 48%;
  background-size: cover;
}

.masthead-video {
  display: none;
}

.masthead-content {
  width: min(700px, 62%);
  padding: 34px 36px 62px;
}

.masthead-content h2 {
  font-size: 44px;
}

.masthead-slogan {
  margin: 12px 0 20px;
  font-size: 23px;
}

.masthead-boards {
  top: 30px;
  right: 34px;
  width: 260px;
}

.signal-board {
  min-height: 48px;
}

@media (max-width: 980px) {
  .cinema-masthead {
    min-height: 220px;
  }

  .masthead-content {
    width: 68%;
    padding: 28px 26px 56px;
  }

  .masthead-content h2 {
    font-size: 36px;
  }

  .masthead-slogan {
    font-size: 20px;
  }

  .masthead-boards {
    right: 20px;
    width: 220px;
  }
}

@media (max-width: 680px) {
  .cinema-masthead {
    min-height: 205px;
  }

  .masthead-content {
    width: 100%;
    padding: 25px 20px 52px;
  }

  .masthead-content h2 {
    font-size: 32px;
  }

  .masthead-slogan {
    max-width: 280px;
    font-size: 18px;
  }
}

/* Square hero video preview. Disabled after restoring the top masthead. */
.cinema-masthead {
  width: min(800px, 100%);
  min-height: 0;
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px;
  background-image: url("./assets/showcase-xianxia.jpg");
}

.masthead-video {
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.08) contrast(1.06) saturate(1.08);
}

.cinema-masthead::before {
  background: linear-gradient(90deg, rgba(8, 12, 18, .76), rgba(8, 12, 18, .18) 52%, rgba(8, 12, 18, .34));
}

@media (max-width: 680px) {
  .cinema-masthead {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

/* Restore static compact top masthead, and preview the 800x800 video in the motion card. */
body:has(#overview.active) .cinema-masthead {
  display: block;
}

.cinema-masthead {
  width: auto;
  min-height: 218px;
  aspect-ratio: auto;
  margin: 0 0 16px;
  background-image: url("./assets/ai-cinema-command-center.png");
  background-position: center 48%;
  background-size: cover;
}

.cinema-masthead .masthead-video {
  display: none;
}

.motion-showcase {
  grid-template-columns: 150px minmax(0, 1fr);
}

.motion-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 260px));
  align-items: start;
  justify-content: start;
  gap: 14px;
}

.motion-showcase-card.xianxia-motion,
.motion-showcase-card.live-motion {
  aspect-ratio: 9 / 16;
  width: min(100%, 260px);
  height: auto;
  min-height: 0;
}

.motion-showcase-card.xianxia-motion video,
.motion-showcase-card.live-motion video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 680px) {
  .motion-showcase-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .motion-showcase-card.xianxia-motion,
  .motion-showcase-card.live-motion {
    width: 100%;
  }
}