.pipeline-card { overflow: hidden; }
.pipeline-intro, .pipeline-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.pipeline-intro p { max-width: 800px; margin-bottom: 0; }
.pipeline-badge { border: 1px solid rgba(74,255,156,.34); border-radius: 999px; color: #79ffb5; background: rgba(45,255,139,.08); padding: 8px 11px; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .13em; white-space: nowrap; }
.pipeline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 22px; }
.pipeline-grid label { min-width: 0; }
.pipeline-grid input, .pipeline-grid select { width: 100%; }
.toggle-field { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(142,255,191,.18); border-radius: 12px; padding: 11px 13px; background: rgba(41,255,132,.04); }
.toggle-field input { width: 18px; height: 18px; accent-color: #39f890; }
.toggle-field span { display: grid; gap: 3px; }
.toggle-field small { color: var(--muted); line-height: 1.3; }
.localization-language-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.localization-language { padding: 10px; }
.localization-language input:disabled + span { opacity: .48; }
.pipeline-footer { margin-top: 18px; padding-top: 17px; border-top: 1px solid rgba(126,255,186,.12); }
.pipeline-footer p { margin: 0; max-width: 670px; }
.pipeline-launch { white-space: nowrap; }
.production-planning-card { overflow: hidden; border-color: rgba(92,255,121,.25); background: linear-gradient(135deg, rgba(25,78,43,.13), rgba(8,14,10,.94) 48%); }
.sample-launch-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 16px; margin-top: 18px; padding: 14px; border: 1px solid rgba(92,255,121,.14); border-radius: 13px; background: rgba(5,12,8,.48); }
.sample-launch-row label { max-width: 520px; }
.sample-launch-row select { width: 100%; }
.sample-launch-row button { min-height: 42px; white-space: nowrap; }
.budget-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.budget-metrics > div { display: grid; gap: 6px; padding: 13px; border: 1px solid rgba(126,255,186,.12); border-radius: 11px; background: rgba(255,255,255,.018); }
.budget-metrics small { color: #708079; font: 700 8px/1.2 ui-monospace,monospace; letter-spacing: .08em; }
.budget-metrics strong { color: #edf7f0; font-size: 17px; }
.budget-metrics strong.accent { color: #65ff98; }
.budget-breakdown { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.budget-breakdown span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: #88968d; border: 1px solid rgba(126,255,186,.1); border-radius: 999px; background: rgba(3,9,5,.48); font-size: 10px; }
.budget-breakdown b { color: #c9ffda; }
.budget-rates { margin-top: 13px; border-top: 1px solid rgba(126,255,186,.11); padding-top: 12px; }
.budget-rates summary { color: #a7dcb8; cursor: pointer; font-size: 11px; font-weight: 700; }
.budget-rates > p { margin: 8px 0 11px; }
.budget-rate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.budget-rate-grid input { width: 100%; }
.budget-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 11px 13px; border-radius: 10px; background: rgba(92,255,121,.06); }
.budget-total span { color: #9cac9f; font-size: 11px; }
.budget-total strong { color: #6dff9d; font-size: 20px; }
@media (max-width: 900px) { .pipeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .localization-language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .budget-rate-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .pipeline-intro, .pipeline-footer { align-items: flex-start; flex-direction: column; } .pipeline-grid, .localization-language-grid, .budget-metrics, .budget-rate-grid, .sample-launch-row { grid-template-columns: 1fr; } .sample-launch-row button { width: 100%; } }
.log-button { white-space: nowrap; }
.job-log-modal { width: min(760px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 34px)); max-height: min(720px, calc(100dvh - 34px)); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.job-log-modal > .muted { margin-top: 5px; }
.job-log-list { margin-top: 17px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border: 1px solid rgba(142,255,191,.16); border-radius: 13px; background: rgba(1, 11, 6, .76); padding: 6px; scrollbar-gutter: stable; }
.job-log-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 9px; border-bottom: 1px solid rgba(142,255,191,.09); font-size: 13px; line-height: 1.38; }
.job-log-row:last-child { border-bottom: 0; }
.job-log-row time { color: #78a18a; font: 700 10px/1.5 ui-monospace, monospace; padding-top: 2px; }
.job-log-row.success span { color: #b0ffd1; }
.job-log-row.error { background: rgba(255, 85, 101, .08); }
.job-log-row.error span { color: #ffabb3; }
.fastgen-operation-item { display: block; width: 100%; text-align: left; color: inherit; cursor: pointer; }
.continue-button { color: #b8ffd5; border-color: rgba(90, 255, 164, .35); }
.edit-controls { position: relative; }
.edit-grid { margin-bottom: 18px; }
.camera-speed-field { position: relative; }
.camera-speed-field output { float: right; color: #a6ffd0; font: 700 11px ui-monospace, monospace; }
.camera-speed-field input[type="range"] { min-height: 38px; padding: 0; accent-color: #54f69a; }
.camera-speed-field small { clear: both; }
.effects-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(142,255,191,.12); }
.effects-header > div { display: grid; gap: 4px; }
.effects-header small { color: var(--muted); }
.effects-header > span { color: #8dffbc; font: 700 11px ui-monospace, monospace; }
.effect-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.effect-tile { display: flex; align-items: stretch; min-height: 72px; border: 1px solid rgba(150, 184, 163, .18); border-radius: 12px; overflow: hidden; cursor: pointer; background: rgba(8, 18, 12, .52); transition: .18s ease; }
.effect-tile:hover { border-color: rgba(119, 255, 177, .46); transform: translateY(-1px); }
.effect-tile.selected { border-color: rgba(102,255,163,.72); background: linear-gradient(135deg, rgba(38, 225, 105, .17), rgba(13, 33, 20, .88)); box-shadow: inset 3px 0 #57ff9b; }
.effect-tile input { position: absolute; opacity: 0; pointer-events: none; }
.effect-tile span { display: grid; align-content: center; gap: 4px; padding: 11px 12px; }
.effect-tile b { font-size: 12px; }
.effect-tile small { color: var(--muted); font-size: 10px; line-height: 1.2; }
.delete-job-button { width: 42px; min-width: 42px; padding: 0; color: #ffb1bb; border-color: rgba(255, 116, 136, .3); font-size: 16px; }
.delete-job-button:hover { background: rgba(255, 93, 113, .12); border-color: rgba(255, 116, 136, .65); }
.project-audio-card { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-color: rgba(101, 255, 165, .24); background: linear-gradient(115deg, rgba(34, 104, 61, .16), rgba(11, 20, 15, .86) 47%, rgba(9, 14, 12, .9)); }
.project-audio-copy { min-width: 0; }
.project-audio-copy h2 { margin: 4px 0 7px; }
.project-audio-copy p { margin: 0; max-width: 760px; }
.project-audio-actions { flex: 0 0 auto; align-items: center; }
.project-audio-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 13px; color: #d9ffe9; }
.project-audio-selected b { overflow: hidden; max-width: min(430px, 48vw); text-overflow: ellipsis; white-space: nowrap; }
.project-audio-selected small { flex-basis: 100%; color: #8ab89a; }
.project-audio-empty { margin-top: 13px; color: #9baaa0; font-size: 12px; }
@media (max-width: 900px) { .effect-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .project-audio-card { align-items: flex-start; flex-direction: column; } .project-audio-selected b { max-width: 76vw; } }
@media (max-width: 620px) { .effect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.project-style-controls { overflow: visible; }
.project-style-grid { grid-template-columns: minmax(260px, 1.3fr) minmax(220px, .9fr) minmax(190px, .78fr); align-items: stretch; }
.overlay-mode, .photo-overlay-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(142,255,191,.17);
  border-radius: 12px;
  padding: 12px 13px;
  background: linear-gradient(135deg, rgba(35,131,77,.13), rgba(9,17,12,.46));
}
.overlay-mode small, .photo-overlay-copy span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.overlay-mode b { color: #baffd8; font: 700 12px ui-monospace, monospace; letter-spacing: .03em; }
.photo-overlay-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px; margin-top: 13px; transition: opacity .18s ease; }
.photo-overlay-grid label { min-width: 0; }
.photo-overlay-grid output { color: #a6ffd0; font: 700 11px ui-monospace, monospace; }
.photo-overlay-grid input[type="range"] { min-height: 38px; padding: 0; accent-color: #54f69a; }
.photo-overlay-grid.is-disabled { opacity: .55; }
.photo-overlay-grid.is-disabled .photo-overlay-copy { filter: saturate(.4); }
.photo-overlay-copy b { color: #dbffeb; font-size: 12px; line-height: 1.35; }
.photo-overlay-stack { display: grid; gap: 9px; grid-column: 1 / -1; }
.photo-overlay-layer { display: grid; grid-template-columns: 34px minmax(220px, 1fr) minmax(210px, .7fr) 40px; gap: 10px; align-items: end; padding: 12px; border: 1px solid rgba(99,119,143,.22); border-radius: 13px; background: rgba(7,12,17,.62); }
.photo-overlay-order { align-self: center; display: grid; place-items: center; width: 28px; height: 28px; color: #9fffc0; border: 1px solid rgba(92,255,121,.28); border-radius: 9px; background: rgba(92,255,121,.08); font: 800 11px ui-monospace, monospace; }
.photo-overlay-remove { width: 38px; min-height: 38px; padding: 0; color: #ff9fac; }
.photo-overlay-add { justify-self: start; }
.photo-overlay-copy { min-width: 260px; }

.preview-kit-card { display: grid; gap: 15px; }
.preview-kit-card .pipeline-badge.is-off { color: #a8b0bd; border-color: rgba(168,176,189,.18); background: rgba(168,176,189,.06); }
.preview-reference-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preview-reference-toolbar > div { display: grid; gap: 4px; }
.preview-reference-toolbar small { color: var(--muted); }
.preview-reference-list { display: flex; flex-wrap: wrap; gap: 10px; }
.preview-reference { position: relative; width: 154px; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border: 1px solid rgba(99,119,143,.28); border-radius: 12px; background: #06090d; }
.preview-reference img { width: 100%; height: 100%; object-fit: cover; }
.preview-reference-remove { position: absolute; top: 5px; right: 5px; width: 28px; min-height: 28px; padding: 0; color: #fff; border-color: rgba(255,255,255,.2); background: rgba(4,7,10,.78); }
.generated-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.generated-preview-card { min-width: 0; overflow: hidden; border: 1px solid rgba(99,119,143,.25); border-radius: 15px; background: rgba(5,9,13,.72); }
.generated-preview-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #020406; }
.generated-preview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.generated-preview-image:hover img { transform: scale(1.025); }
.generated-preview-copy { display: grid; gap: 5px; min-height: 92px; padding: 12px 13px 8px; }
.generated-preview-copy span { color: #75d99b; font: 800 9px ui-monospace, monospace; letter-spacing: .11em; }
.generated-preview-copy b { color: #f4f8f6; font-size: 15px; overflow-wrap: anywhere; }
.generated-preview-copy small { color: var(--muted); line-height: 1.4; }
.generated-preview-card > .row { padding: 5px 12px 12px; }
.generated-preview-card .download-pill, .generated-preview-card button { flex: 1 1 auto; justify-content: center; }
.preview-kit-result { border-top: 1px solid rgba(99,119,143,.2); padding-top: 12px; }
.preview-kit-result summary { color: #baffca; cursor: pointer; font-weight: 700; }
.preview-kit-result pre { max-height: 420px; overflow: auto; margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #e7edf5; font: 500 12px/1.65 inherit; }
.project-delete-action { color: #ff9b9b; border-color: rgba(255,96,96,.3); }
.project-delete-action:hover { color: #fff; border-color: rgba(255,96,96,.72); background: rgba(130,24,30,.26); }
.preview-kit-settings { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 18px; border: 1px solid rgba(92,255,121,.16); border-radius: 14px; background: rgba(92,255,121,.035); }
.preview-kit-settings h3 { margin: 5px 0; }
.preview-kit-settings p { margin: 0; color: var(--muted); }
.preview-image-model { min-width: 220px; }
.storyboard-head { align-items: flex-start; }
.storyboard-actions { justify-content: flex-end; }
.storyboard-actions > .muted { max-width: 620px; text-align: right; }
.scene-preview-list { display: grid; gap: 11px; }
.scene-preview-card {
  border: 1px solid rgba(142,255,191,.16);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(19,38,27,.58), rgba(8,13,10,.75));
  overflow: hidden;
}
.scene-preview-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border-bottom: 1px solid rgba(142,255,191,.12); }
.scene-number {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 30px;
  border: 1px solid rgba(120,255,180,.27);
  border-radius: 8px;
  background: rgba(50,244,133,.08);
  color: #aeffd4;
  font: 700 11px ui-monospace, monospace;
}
.scene-preview-meta { display: flex; align-items: center; gap: 8px; min-width: 0; color: #9fb6a9; font-size: 12px; }
.scene-type { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 999px; font: 700 10px ui-monospace, monospace; letter-spacing: .04em; }
.scene-type-image { border: 1px solid rgba(116,205,255,.34); background: rgba(70,150,255,.12); color: #b9e6ff; }
.scene-type-video { border: 1px solid rgba(255,183,91,.38); background: rgba(255,159,55,.11); color: #ffda9b; }
.scene-regenerate { white-space: nowrap; }
.scene-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .55fr); gap: 13px; padding: 13px; }
.scene-preview-main { min-width: 0; }
.scene-prompt-label { color: #7dbd99; font: 700 9px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.scene-preview-prompt { margin: 7px 0 0; color: #e2ede6; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.scene-health { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 11px; border: 1px solid rgba(142,255,191,.15); border-radius: 10px; background: rgba(3,11,6,.32); }
.scene-health-title { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.scene-health-dot { width: 7px; height: 7px; border-radius: 50%; background: #7a8e82; box-shadow: 0 0 0 3px rgba(122,142,130,.12); }
.scene-health-good .scene-health-dot { background: #52f49a; box-shadow: 0 0 0 3px rgba(82,244,154,.13); }
.scene-health-issue { border-color: rgba(255,117,132,.34); background: rgba(113,25,34,.14); }
.scene-health-issue .scene-health-dot { background: #ff7c8c; box-shadow: 0 0 0 3px rgba(255,124,140,.13); }
.scene-health-pending .scene-health-dot { background: #f6cd67; box-shadow: 0 0 0 3px rgba(246,205,103,.13); }
.scene-health-meta { display: grid; gap: 6px; margin: 0; }
.scene-health-meta > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px; align-items: baseline; }
.scene-health-meta dt { color: #829589; font: 700 9px ui-monospace, monospace; letter-spacing: .04em; }
.scene-health-meta dd { min-width: 0; margin: 0; color: #c7d8ce; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-health small { color: #d5aeae; font-size: 10px; line-height: 1.35; }
.scene-editor { border-top: 1px solid rgba(142,255,191,.1); }
.scene-editor summary { padding: 11px 13px; color: #9accae; cursor: pointer; font-size: 12px; user-select: none; }
.scene-editor summary:hover { color: #d7ffea; }
.scene-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 145px 145px; gap: 11px; padding: 0 13px 13px; }
.scene-editor-prompt, .scene-editor-text { grid-column: 1 / -1; }
.scene-editor textarea { min-height: 96px; }
.scene-editor-text textarea { min-height: 78px; }
@media (max-width: 1050px) { .project-style-grid, .photo-overlay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-overlay-layer { grid-template-columns: 34px minmax(0, 1fr) minmax(190px, .7fr) 40px; } .photo-overlay-copy { grid-column: 1 / -1; } .scene-preview-body { grid-template-columns: 1fr; } .generated-preview-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .storyboard-actions { justify-content: flex-start; } .storyboard-actions > .muted { text-align: left; } .scene-preview-header { grid-template-columns: auto minmax(0, 1fr); } .scene-regenerate { grid-column: 1 / -1; width: 100%; } .scene-editor-grid { grid-template-columns: 1fr; } .scene-editor-prompt, .scene-editor-text { grid-column: auto; } }
@media (max-width: 620px) { .project-style-grid, .photo-overlay-grid { grid-template-columns: 1fr; } .photo-overlay-layer { grid-template-columns: 30px minmax(0, 1fr) 36px; } .photo-overlay-layer label:nth-of-type(2) { grid-column: 2 / -1; } .photo-overlay-copy { grid-column: auto; } .preview-reference-toolbar, .preview-kit-settings { align-items: stretch; flex-direction: column; } .scene-health-meta > div { grid-template-columns: 84px minmax(0, 1fr); } }