/* Creative Studio (creative-*.js). Same language as the event story (story.css): frosted cards on a calm
   gradient, large light numbers, ink for the selected thing, Athena gold for highlights. Tokens only, so dark
   mode follows premium.css. Segmented controls reuse .st-seg from story.css. */
.cs { --glass: color-mix(in srgb, var(--surface) 80%, transparent); --glass-line: color-mix(in srgb, var(--line) 75%, transparent);
  background: radial-gradient(55% 40% at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(40% 35% at 100% 0%, color-mix(in srgb, var(--text-3) 12%, transparent), transparent 70%), var(--surface-2); min-height: calc(100vh - 80px); }
.cs-wrap { max-width: 1480px; margin: 0 auto; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.cs-crumb { font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.cs-card { background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--glass-line); border-radius: 20px; padding: 16px 18px; box-shadow: 0 12px 32px -24px rgba(21, 23, 28, .3); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-card h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cs-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cs-card-h p { margin: 2px 0 0; }
.cs-h4 { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 8px 0 4px; }
.cs-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cs-cols { grid-template-columns: 1fr; } }
.cs-kicker { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.cs .span2 { grid-column: 1 / -1; }

/* hero */
.cs-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cs-hero-l { background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, var(--accent-soft)), color-mix(in srgb, var(--accent-soft) 70%, var(--surface)));
  border: 1px solid var(--glass-line); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cs-prompt { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.cs-prompt textarea { border: 0; box-shadow: none; resize: vertical; font-size: 15px; background: transparent; }
.cs-prompt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-prompt-row .input { width: auto; }
.cs-hero-r, .cs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cs-kpis.sm { grid-template-columns: repeat(2, 1fr); }
.cs-stat { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cs-stat span { font-size: 12px; color: var(--text-3); }
.cs-stat b { font-size: 30px; font-weight: 400; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cs-stat b em { font-style: normal; font-size: 15px; color: var(--accent-ink); font-weight: 600; letter-spacing: 0; }
.cs-stat small { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 900px) { .cs-hero { grid-template-columns: 1fr; } .cs-wrap { padding: 14px; } }

/* studio tiles */
.cs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cs-tile { display: grid; grid-template-columns: 36px 1fr; gap: 2px 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--surface); color: inherit; text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s; }
.cs-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.cs-tile > span { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.cs-tile b { font-size: 13.5px; } .cs-tile p { margin: 2px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.4; }

/* media cards */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cs-grid.lg { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cs-out { background: var(--surface); border: 1px solid var(--glass-line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.cs-out-m { position: relative; background: var(--surface-3); aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.cs-media { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
img.cs-media { background: var(--surface-3); }
.cs-media.audio, .cs-media.doc, .cs-media.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--surface-3); color: var(--text-3); text-decoration: none; }
.cs-media.audio audio { width: 90%; }
.cs-ai { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 600; background: rgba(0, 0, 0, .55); color: #fff; padding: 2px 7px; border-radius: 99px; pointer-events: none; }
/* licence and listening warnings (VoiceStudio): top corners, hover tells why */
.cs-ai.cs-noclient { bottom: auto; top: 8px; background: rgba(150, 40, 30, .85); pointer-events: auto; cursor: help; }
.cs-ai.cs-review { left: auto; bottom: auto; top: 8px; right: 8px; background: rgba(135, 90, 14, .9); pointer-events: auto; cursor: help; }
.cs-score-chip { position: absolute; right: 8px; top: 8px; min-width: 30px; text-align: center; font-size: 12px; font-weight: 700; background: var(--accent); color: #231a08; padding: 3px 8px; border-radius: 99px; }
.cs-out-b { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-out-b > b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-out-meta { font-size: 11px; color: var(--text-3); }
.cs-out-cap { font-size: 12px; margin: 2px 0 0; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-out-a { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cs-out-x { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 4px; } .cs-tags span { font-size: 10.5px; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 6px; border-radius: 99px; }
.cs-grade { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--surface-3); }
.cs-grade.pos { background: var(--ok-soft); color: var(--pos-ink); } .cs-grade.mid { background: var(--surface-3); color: var(--text-2); } .cs-grade.warn { background: var(--warn-soft); color: var(--warn); } .cs-grade.neg { background: var(--danger-soft); color: var(--neg-ink); }
.cs-status { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; text-transform: capitalize; }
.cs-status.approved { background: var(--ok-soft); color: var(--pos-ink); } .cs-status.review, .cs-status.briefed { background: var(--accent-soft); color: var(--accent-ink); } .cs-status.rejected, .cs-status.changes { background: var(--danger-soft); color: var(--neg-ink); }
.cs-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.cs-tag.pos { background: var(--ok-soft); color: var(--pos-ink); }
.cs-filter { align-self: flex-start; }

/* jobs + alerts */
.cs-job { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.cs-job:last-child { border-bottom: 0; }
.cs-job-ic { width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: var(--text-3); }
.cs-job.done .cs-job-ic { color: var(--pos-ink); } .cs-job.failed .cs-job-ic { color: var(--neg-ink); }
.cs-err { color: var(--neg-ink); }
.cs-alert { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); margin-bottom: 6px; font-size: 13px; }
.cs-alert > .ic { margin-top: 2px; flex: none; color: var(--text-3); }
.cs-alert.critical { border-left: 3px solid var(--neg); } .cs-alert.critical > .ic { color: var(--neg-ink); }
.cs-alert.warning { border-left: 3px solid var(--warn); } .cs-alert.warning > .ic { color: var(--warn); }
.cs-alert.digest { border-left: 3px solid var(--accent); }
.cs-alert.read { opacity: .55; }

/* settings */
.cs-eng .cs-caps { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); }
.cs-eng .cs-caps b { text-transform: capitalize; margin-right: 6px; color: var(--text); }
.cs-engine-note { font-size: 12px; color: var(--text-3); }
.cs-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cs-swatches { display: flex; gap: 6px; } .cs-swatches i { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); }

/* projects + agent workspace */
.cs-projects { display: flex; flex-direction: column; gap: 8px; }
.cs-proj { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); color: inherit; text-decoration: none; }
.cs-proj:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.cs-proj-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.cs-wf-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cs-wf-pick button { display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.cs-wf-pick button > span { grid-row: 1 / 3; color: var(--accent-ink); } .cs-wf-pick button small { font-size: 11px; color: var(--text-3); }
.cs-wf-pick button.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cs-ws { display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cs-ws { grid-template-columns: 1fr; } }
.cs-chatcol { position: sticky; top: 12px; max-height: calc(100vh - 150px); }
.cs-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; min-height: 240px; }
.cs-msg { display: flex; flex-direction: column; gap: 4px; max-width: 94%; }
.cs-msg > span { font-size: 11px; color: var(--text-3); font-weight: 600; }
.cs-msg > p { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.cs-msg.user { align-self: flex-end; } .cs-msg.user > span { text-align: right; } .cs-msg.user > p { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.cs-action { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cs-action-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cs-action textarea { font-size: 12.5px; }
.cs-attach { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chipx { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.cs-chatbox { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.cs-canvascol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-canvascol .cs-out { cursor: pointer; }
.cs-brief-p { font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.cs-brief-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cs-brief-g span { font-size: 11.5px; color: var(--text-3); } .cs-brief-g p { margin: 2px 0 0; font-size: 13px; }
.cs-scenes { display: flex; flex-direction: column; gap: 8px; }
.cs-scenes article { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); }
.cs-scenes article > i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.cs-scenes b { font-size: 13px; } .cs-scenes p { margin: 3px 0; font-size: 13px; color: var(--text-2); } .cs-scenes small { font-size: 11.5px; color: var(--text-3); }
.cs-trail { padding: 6px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; } .cs-trail b { text-transform: capitalize; }

/* video lab */
.cs-src { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cs-src .fld { flex: 1 1 320px; margin-bottom: 0; }
.cs-or { font-size: 12px; color: var(--text-3); padding-bottom: 8px; }
.cs-sc { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.cs-sc > i { font-style: normal; font-weight: 700; width: 22px; color: var(--accent-ink); padding-top: 8px; }
.cs-sc .grow { display: flex; flex-direction: column; gap: 4px; }
.cs-sec { width: 70px; }
.cs-vo { font-size: 14px; line-height: 1.6; margin: 0; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); }
.cs-prompt-box { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; }
.cs-prompt-box span { font-size: 11px; font-weight: 600; color: var(--accent-ink); } .cs-prompt-box p { font-size: 12.5px; margin: 0; }
.cs-beats { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-beats > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); max-width: 240px; font-size: 12.5px; }
.cs-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cs-variants article { padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; }
.cs-ed { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cs-ed { grid-template-columns: 1fr; } }
.cs-bin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 70vh; overflow-y: auto; }
.cs-bin-i { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; font: inherit; color: inherit; text-align: left; }
.cs-bin-i img, .cs-bin-i video { width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.cs-bin-i span { font-size: 11px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-bin-i:hover { border-color: var(--accent); }
.cs-tl { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); margin-bottom: 8px; }
.cs-tl-m { width: 90px; height: 120px; border-radius: 10px; overflow: hidden; flex: none; background: #000; }
.cs-tl-m .cs-media { height: 100%; }
.cs-tl .grow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-tl-f { display: flex; gap: 8px; flex-wrap: wrap; } .cs-tl-f label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); } .cs-tl-f .input { width: 90px; }
.cs-tl-a { display: flex; flex-direction: column; gap: 4px; }

/* governance */
.cs-weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 150px; align-items: end; }
.cs-weeks > div { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.cs-weeks i { width: 100%; max-width: 26px; background: color-mix(in srgb, var(--text-3) 30%, transparent); border-radius: 8px 8px 4px 4px; position: relative; overflow: hidden; min-height: 3px; display: flex; flex-direction: column; justify-content: flex-end; }
.cs-weeks u { display: block; background: var(--primary); }
.cs-weeks span { font-size: 10px; color: var(--text-3); }
.cs-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--line-2); }
.cs-dim { display: grid; grid-template-columns: 100px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; }
.cs-dimbar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.cs-dimbar i { display: block; height: 100%; border-radius: 99px; background: var(--text-3); }
.cs-dimbar i.pos { background: var(--pos); } .cs-dimbar i.mid { background: var(--accent); } .cs-dimbar i.neg { background: var(--neg); }
.cs-grades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px; }
.cs-grades > div { text-align: center; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); }
.cs-grades b { display: block; font-size: 18px; } .cs-grades span { font-size: 12px; color: var(--text-3); }
.cs-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.cs-q { padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.cs-q.overdue { border-left: 3px solid var(--neg); }
.cs .neg { color: var(--neg-ink); } .cs .pos { color: var(--pos-ink); }
.cs-answer { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.cs-persona { padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cs-persona p { flex-basis: 100%; margin: 2px 0; }
.cs-var h3 { font-size: 16px; } .cs-var p { margin: 0; font-size: 13px; color: var(--text-2); }
.cs-pick { cursor: pointer; border-radius: 16px; transition: box-shadow .15s; } .cs-pick:hover { box-shadow: 0 0 0 2px var(--accent); } .cs-pick.busy { opacity: .5; pointer-events: none; }
.cs-new .fld { margin-bottom: 8px; }

/* AI tools (tools.js) */
.vi-drop { min-height: 260px; border: 2px dashed var(--line); border-radius: 16px; display: grid; place-items: center; overflow: hidden; background: var(--surface); }
.vi-drop img { max-width: 100%; max-height: 70vh; display: block; }
.vi-text { white-space: pre-wrap; font: 13px/1.6 var(--font); background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; max-height: 60vh; overflow: auto; }
.vi-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.hl-bar { display: grid; grid-template-columns: 150px 1fr 60px 70px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.hl-bar span small { display: block; font-size: 10.5px; color: var(--text-3); }
.hl-bar i { height: 12px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .hl-bar em { display: block; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--text-3) 45%, transparent); }
.hl-bar em.up { background: var(--accent); } .hl-bar b { text-align: right; font-variant-numeric: tabular-nums; } .hl-bar > small { font-size: 11px; color: var(--text-3); }

/* ---- Video editor (creative-editor.js): media bin · preview + timeline · presets ---- */
.ed-tabs button { display: inline-flex; gap: 6px; align-items: center; }
.ed { display: grid; grid-template-columns: 250px minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.ed-bin { max-height: calc(100vh - 190px); overflow: auto; }
.ed-bin .cs-card-h { gap: 6px; }
.ed-bin-h, .ed-ph { font-size: 12px; font-weight: 600; color: var(--text-3); margin: 10px 0 6px; }
.ed-aud { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--surface-3); color: var(--text-2); }
.ed-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ed-preview { position: relative; margin: 0 auto; background: #0d0e11; border-radius: 16px; overflow: hidden; display: grid; place-items: center; max-height: 58vh; width: 100%; }
.ed-preview.ratio-9x16 { aspect-ratio: 9 / 16; width: auto; height: 58vh; }
.ed-preview.ratio-4x5 { aspect-ratio: 4 / 5; width: auto; height: 52vh; }
.ed-preview.ratio-1x1 { aspect-ratio: 1; width: auto; height: 48vh; }
.ed-preview.ratio-16x9 { aspect-ratio: 16 / 9; }
.ed-preview img, .ed-preview video { width: 100%; height: 100%; object-fit: cover; }
.ed-prev-empty { color: #9aa0aa; display: grid; justify-items: center; gap: 6px; font-size: 13px; }
.ed-preview[data-look="warm"] > img, .ed-preview[data-look="warm"] > video { filter: sepia(.18) saturate(1.1); }
.ed-preview[data-look="cool"] > img, .ed-preview[data-look="cool"] > video { filter: hue-rotate(-8deg) saturate(.95); }
.ed-preview[data-look="vivid"] > img, .ed-preview[data-look="vivid"] > video { filter: saturate(1.4) contrast(1.06); }
.ed-preview[data-look="cinematic"] > img, .ed-preview[data-look="cinematic"] > video { filter: contrast(1.1) saturate(.88); }
.ed-preview[data-look="festive"] > img, .ed-preview[data-look="festive"] > video { filter: saturate(1.3) brightness(1.04); }
.ed-preview[data-look="vintage"] > img, .ed-preview[data-look="vintage"] > video { filter: sepia(.45) contrast(.95); }
.ed-preview[data-look="bw"] > img, .ed-preview[data-look="bw"] > video { filter: grayscale(1) contrast(1.08); }
.ed-cap { position: absolute; left: 8%; right: 8%; bottom: 16%; text-align: center; color: #fff; font-weight: 700; font-size: clamp(14px, 2.4vw, 22px); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.ed-card-prev { position: absolute; inset: 0; display: grid; place-items: center; padding: 10%; text-align: center; color: #fff; font-size: clamp(18px, 3vw, 30px); font-weight: 700; }
.kb-in { animation: ed-kbin linear forwards; } .kb-out { animation: ed-kbout linear forwards; }
@keyframes ed-kbin { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes ed-kbout { from { transform: scale(1.12); } to { transform: scale(1); } }
.ed-transport { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-transport #ed-title { max-width: 220px; }
.ed-strip { display: flex; gap: 4px; min-height: 76px; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); overflow-x: auto; }
.ed-strip-empty { margin: auto; }
.ed-chip { position: relative; min-width: 64px; height: 64px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; padding: 0; background: var(--surface-3); cursor: pointer; }
.ed-chip.on { border-color: var(--accent); }
.ed-chip img, .ed-chip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-chip span { position: absolute; left: 4px; right: 4px; bottom: 3px; font-size: 10.5px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ed-chip em { position: absolute; top: 4px; right: 4px; color: #fff; }
.ed-card { min-width: 44px; height: 64px; border-radius: 10px; display: grid; place-items: center; padding: 4px; color: #fff; font-size: 10.5px; text-align: center; overflow: hidden; }
.ed-inspect { border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ed-ih { display: flex; gap: 8px; align-items: center; }
.ed-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ed-presets { position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 190px); overflow: auto; }
.ed-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-look { border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; font: inherit; font-size: 12px; cursor: pointer; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background: linear-gradient(135deg, #3d6b8c, #c98a3c 55%, #6b8f3d); }
.ed-look.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.look-warm { filter: sepia(.25) saturate(1.1); } .look-cool { filter: hue-rotate(-12deg); } .look-vivid { filter: saturate(1.5); } .look-cinematic { filter: contrast(1.15) saturate(.8); }
.look-festive { filter: saturate(1.35) brightness(1.05); } .look-vintage { filter: sepia(.55); } .look-bw { filter: grayscale(1); }
.ed-oc { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 170px); }
.ed-oc-note { font-size: 12.5px; color: var(--text-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ed-oc iframe { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 16px; background: #0d0e11; }
@media (max-width: 1200px) { .ed { grid-template-columns: 220px minmax(0, 1fr); } .ed-presets { grid-column: 1 / -1; position: static; max-height: none; } }
@media (max-width: 760px) { .ed { grid-template-columns: 1fr; } .ed-bin { max-height: 280px; } }
@media (prefers-reduced-motion: reduce) { .kb-in, .kb-out { animation: none; } }

/* ---- AI video producer (creative-producer.js) ---- */
.pd-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-pick select { max-width: 320px; }
.pd-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; position: sticky; top: 0; z-index: 3; background: var(--bg); }
.pd-steps button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pd-steps button i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.pd-steps button.done i { background: var(--accent-soft); color: var(--accent-ink); }
.pd-steps button.locked { opacity: .45; pointer-events: none; }
.pd-steps > span { width: 14px; height: 1px; background: var(--line); }
.pd-run { display: flex; gap: 10px; align-items: flex-start; }
.pd-run p { margin: 2px 0 0; }
.pd-locked { opacity: .7; }
.pd-src .chk, #pd-render .chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.pd-sum { font-size: 15px; line-height: 1.55; margin: 0; }
.pd-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1000px) { .pd-cols { grid-template-columns: 1fr; } }
.pd-cols h4, #pd-render h4 { margin: 6px 0; font-size: 13px; font-weight: 600; }
.pd-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-facts li { display: flex; gap: 10px; align-items: flex-start; }
.pd-facts p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; }
.pd-fid { flex: none; font: 600 11px var(--mono, ui-monospace, monospace); color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; margin-top: 1px; }
.pd-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pd-chip { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); text-decoration: none; white-space: nowrap; }
a.pd-chip:hover { background: var(--accent-soft); color: var(--accent-ink); }
.pd-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.pd-yt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pd-yt li { display: flex; flex-direction: column; }
.pd-yt span { font-size: 11.5px; }
.pd-sources summary, .pd-yt-pack summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.pd-sources ol { font-size: 12.5px; line-height: 1.6; padding-left: 18px; }
.pd-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pd-concepts article { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.pd-concepts article.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pd-concepts article > b { font-size: 15px; line-height: 1.3; }
.pd-concepts p { margin: 0; line-height: 1.45; }
.pd-concepts blockquote { margin: 2px 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 13px; font-style: italic; }
.pd-concepts .btn, .pd-concepts .cs-status { align-self: flex-start; margin-top: auto; }
.pd-chs { list-style: none; margin: 4px 0; padding: 0; font-size: 12.5px; }
.pd-chs li { display: flex; gap: 8px; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--line-2); }
.pd-chs i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pd-totals { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.pd-totals b { color: var(--text); font-variant-numeric: tabular-nums; }
.pd-yt-pack { border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px; }
.pd-yt-pack[open] { display: flex; flex-direction: column; gap: 8px; }
.pd-chapter { display: flex; flex-direction: column; }
.pd-ch-h { display: flex; gap: 10px; align-items: center; padding: 12px 0 4px; }
.pd-ch-h span { font-size: 12px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.pd-ch-h .input { font-weight: 600; }
.pd-scene { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
@media (max-width: 640px) { .pd-scene { grid-template-columns: 1fr; } }
.pd-vis { position: relative; display: flex; flex-direction: column; gap: 4px; }
.pd-vis img, .pd-vis-ic { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); }
.pd-scene[data-kind="title"] .pd-vis-ic { background: var(--text); color: var(--surface); }
.pd-scene[data-kind^="ai_"] .pd-vis-ic { background: var(--accent-soft); color: var(--accent-ink); }
.pd-play { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 99px; padding: 2px 6px; display: inline-flex; }
.pd-vis small { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-vis .btn { align-self: flex-start; }
.pd-sc-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd-sc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px; gap: 6px; }
.pd-sc-row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pd-sc-main .input { font-size: 13px; }
.pd-sec { text-align: center; }
.pd-sc-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--text-2); }
.pd-note { color: var(--accent-ink); }
.pd-opt-bar { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 6px; }
.pd-opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 6px; }
.pd-opt { position: relative; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: var(--surface-3); cursor: pointer; aspect-ratio: 16 / 9; }
.pd-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-opt.on { border-color: var(--accent); }
.pd-opt span { position: absolute; left: 4px; bottom: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; border-radius: 99px; padding: 1px 6px; display: inline-flex; gap: 2px; align-items: center; }
.pd-est-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-est-grid div { border-radius: 12px; background: var(--surface-2); padding: 8px 10px; display: flex; flex-direction: column; }
.pd-est-grid b { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pd-est-grid span { font-size: 11.5px; color: var(--text-2); }
.pd-est-grid .ok { background: var(--ok-soft); }
.pd-est-grid .ok b { color: var(--pos-ink); }
.pd-est-grid .warn { background: var(--accent-soft); }
.pd-est-grid .warn b { color: var(--accent-ink); }
.pd-go { width: 100%; justify-content: center; margin-top: 4px; }
.pd-result { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-2); }
@media (max-width: 900px) { .pd-result { grid-template-columns: 1fr; } }
.pd-pack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-thumb { width: 100%; max-width: 420px; border-radius: 10px; }
.pd-desc { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--surface-2); padding: 10px; border-radius: 10px; }
#pd-brief, #pd-research-c, #pd-concept, #pd-script, #pd-render { scroll-margin-top: 64px; }
.pd-pack-title { font-size: 16px; line-height: 1.35; }
.pd-pack .pd-chs li { justify-content: flex-start; }
.pd-pack .pd-chs i { min-width: 40px; }
.pd-flag { color: var(--neg-ink); background: var(--danger-soft); border-radius: 8px; padding: 2px 8px; line-height: 1.4; }
.pd-totals .pd-flag b { color: var(--neg-ink); }
.pd-ok { color: var(--pos-ink); }

/* ---- Production Studio (creative-production.js) ---- */
.pp-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-pick select { max-width: 300px; }
.pp-recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pp-recipe { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: inherit; cursor: pointer; text-decoration: none; }
.pp-recipe b { font-size: 15px; }
.pp-recipe span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.pp-recipe small { font-size: 11.5px; color: var(--text-3, var(--text-2)); margin-top: auto; }
.pp-recipe.on, .pp-recipe:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pp-h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.pp-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .pp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-tier { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: inherit; cursor: pointer; }
.pp-tier.on { border-color: var(--accent); background: var(--accent-soft); }
.pp-tier b { font-size: 14px; }
.pp-price { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pp-tier small { font-size: 11.5px; }
.pp-accts { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.pp-accts .chk, .pp-pack .chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.pp-meter { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.pp-meter > div:not(.pp-engines) { border-radius: 12px; background: var(--surface-2); padding: 8px 12px; display: flex; flex-direction: column; min-width: 110px; }
.pp-meter span { font-size: 11.5px; color: var(--text-2); }
.pp-meter b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pp-engines { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.pp-engines span { font-size: 11px; padding: 3px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); display: inline-flex; gap: 4px; align-items: center; }
.pp-run { display: flex; gap: 10px; align-items: center; }
.pp-run > div { flex: 1; }
.pp-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .pp-layout { grid-template-columns: 1fr; } .pp-steps { flex-direction: row; overflow-x: auto; } }
.pp-steps { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 8px; }
.pp-step { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 7px 10px; border-radius: 12px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.pp-step i { grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-2); align-self: center; }
.pp-step span { font-size: 13px; font-weight: 500; }
.pp-step small { font-size: 11px; color: var(--text-2); }
.pp-step.on { background: var(--surface); border-color: var(--line); }
.pp-step.done i { background: var(--accent-soft); color: var(--accent-ink); }
.pp-step.need i { background: var(--accent); color: var(--text); }
.pp-step.need small { color: var(--accent-ink); font-weight: 600; }
.pp-step.lock { opacity: .55; }
.pp-main { min-height: 300px; }
.pp-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.pp-redo { display: flex; gap: 6px; align-items: center; }
.pp-redo .input { flex: 1; min-width: 0; }
.pp-idea { font-size: 15px; line-height: 1.55; margin: 0; }
.pp-kv { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pp-kv .input { width: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-table td, .pp-table th { padding: 6px 8px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.pp-table th { font-weight: 600; font-size: 12px; color: var(--text-2); }
.pp-sheet td { font-variant-numeric: tabular-nums; }
.pp-scroll { overflow-x: auto; }
.pp-music { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pp-music article { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pp-music h4 { margin: 0; font-size: 14px; }
.pp-track { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pp-track audio, .pp-lines audio { width: 100%; }
.pp-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pp-style { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; }
.pp-style:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pp-style span { font-size: 13px; color: var(--text-2); }
.pp-sw { display: flex; gap: 4px; }
.pp-sw i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); }
.pp-scenes, .pp-shots { display: flex; flex-direction: column; gap: 8px; }
.pp-scene { display: grid; grid-template-columns: 24px minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) 64px; gap: 6px; align-items: start; }
@media (max-width: 900px) { .pp-scene { grid-template-columns: 24px minmax(0, 1fr); } }
.pp-scene i { font-style: normal; font-weight: 700; color: var(--accent-ink); padding-top: 8px; }
.pp-sec { text-align: center; }
.pp-shot { border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pp-shot-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.pp-shot-h b { font-size: 14px; color: var(--accent-ink); }
.pp-flag { color: var(--neg-ink); }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pp-grid.big { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pp-grid figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-grid figure.err { opacity: .8; }
.pp-grid img, .pp-grid video, .pp-pickcard img { width: 100%; border-radius: 10px; background: var(--surface-3); aspect-ratio: 9 / 16; object-fit: cover; }
.pp-grid figcaption { font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.pp-pickcard { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 8px; cursor: pointer; }
.pp-pickcard:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pp-cast { display: flex; flex-direction: column; gap: 12px; }
.pp-cast article { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 12px; border: 1px solid var(--line-2); border-radius: 14px; padding: 10px; }
@media (max-width: 700px) { .pp-cast article { grid-template-columns: 1fr; } }
.pp-castimg img { width: 100%; border-radius: 10px; }
.pp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pp-photos img { aspect-ratio: 1; object-fit: cover; }
.pp-photos figure { position: relative; margin: 0; }
.pp-photos .pp-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); cursor: pointer; opacity: 0; transition: opacity .15s; }
.pp-photos figure:hover .pp-x, .pp-photos .pp-x:focus-visible { opacity: 1; }
.pp-castph { aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; color: var(--text-3); }
.pp-refh { margin: 12px 0 6px; font-size: 12.5px; font-weight: 600; }
.pp-cast .seg + .pp-refh { margin-top: 10px; }
.pp-cast article > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pp-cast article > div:last-child > .input, .pp-cast article > div:last-child > .pp-photos, .pp-cast article > div:last-child > textarea { width: 100%; }
.pp-hero img, .pp-hero video, .pp-hero audio { max-width: 100%; max-height: 70vh; border-radius: 12px; display: block; }
.pp-prompt { white-space: pre-wrap; font-size: 12.5px; background: var(--surface-2); padding: 10px; border-radius: 10px; }
.pp-lines { display: flex; flex-direction: column; gap: 6px; }
.pp-lines > div { display: grid; grid-template-columns: 30px 1fr 50px; gap: 8px; align-items: center; }
.pp-final { display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 800px) { .pp-final { grid-template-columns: 1fr; } }
.pp-final video { width: 100%; border-radius: 12px; }
.pp-final img { width: 100%; border-radius: 10px; }
.pp-scores { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-scores span { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--surface-3); }
.pp-scores .ok { background: var(--ok-soft); color: var(--pos-ink); }
.pp-scores .mid { background: var(--accent-soft); color: var(--accent-ink); }
.pp-scores .bad { background: var(--danger-soft); color: var(--neg-ink); }
.pp-problem { border-left: 3px solid var(--accent); padding: 6px 10px; margin: 6px 0; font-size: 13px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pp-pack { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.pp-pack article { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pp-pack h4 { margin: 0; font-size: 13px; text-transform: capitalize; }
.pp-pack p { margin: 0; }
.pp-cap { white-space: pre-wrap; font-size: 12.5px; background: var(--surface-2); padding: 8px; border-radius: 8px; max-height: 220px; overflow: auto; margin: 0; }
.pp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-tabs a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 13px; }
.pp-tabs a.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.pp-list { line-height: 1.6; padding-left: 18px; }
.br-acc { border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; }
.br-acc summary { cursor: pointer; font-size: 13px; text-transform: none; }
.br-acc[open] summary { margin-bottom: 8px; }
@media (max-width: 900px) { .pp-steps { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; } .pp-step { flex: none; } }
.pp-refthumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-refthumbs:empty { display: none; }
.pp-refthumbs figure { position: relative; margin: 0; width: 64px; height: 64px; }
.pp-refthumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pp-refthumbs .pp-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); cursor: pointer; }

/* Shorts factory (creative-factory.js) */
.sf-agents { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1400px) { .sf-agents { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .sf-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-agent { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.sf-agent.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.sf-agent-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.sf-agent.on .sf-agent-ic { background: var(--accent); color: var(--on-primary, #fff); }
.sf-agent b { display: block; font-size: 12.5px; } .sf-agent small { display: block; color: var(--text-3); font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sf-side { display: flex; flex-direction: column; gap: 14px; }
.sf-h { margin: 14px 0 6px; font-size: 13px; }
.sf-rights { margin-top: 6px; }
.sf-src { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.sf-src-r { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.sf-src-r > div { flex: 1; min-width: 0; } .sf-src-r b { display: block; font-size: 13px; } .sf-src-r small { color: var(--text-3); font-size: 11.5px; }
.sf-err { color: var(--danger, var(--neg)); }
.sf-add summary { cursor: pointer; font-weight: 600; font-size: 13px; margin: 6px 0; }
.sf-mem { display: flex; flex-direction: column; gap: 12px; }
.sf-mem > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sf-mem p { margin: 2px 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.sf-tags { display: flex; flex-wrap: wrap; gap: 5px; } .sf-tags span { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; }
.sf-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sf-clip { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.sf-clip-v { position: relative; background: #000; aspect-ratio: 9 / 16; max-height: 440px; }
.sf-clip-v video { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-score { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font: 700 12px/1.4 var(--font); }
.sf-clip-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sf-title { font-size: 13.5px; line-height: 1.35; }
.sf-bars { display: grid; grid-template-columns: 1fr; gap: 3px; }
.sf-bars span { position: relative; height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.sf-bars i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.sf-bars em { position: relative; font: 600 10.5px/14px var(--font); font-style: normal; padding-left: 6px; color: var(--text-2); }
.sf-cut { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sf-qa summary { cursor: pointer; font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.sf-qa.good summary { color: var(--pos-ink); } .sf-qa.warn summary { color: var(--warn); } .sf-qa.bad summary { color: var(--neg-ink); }
.sf-qa ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.sf-qa li small { color: var(--text-3); } .sf-qa li.ok { color: var(--text-2); } .sf-qa li.warn { color: var(--warn); } .sf-qa li.fail { color: var(--neg-ink); }
.sf-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
@media (max-width: 960px) { .sf-grid { grid-template-columns: 1fr; } }
.sf-pub { display: flex; flex-direction: column; gap: 8px; }
.sf-pub-r { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.sf-pub-r > svg { flex: none; margin-top: 2px; color: var(--text-3); }
.sf-pub-r.ok > svg { color: var(--pos-ink); } .sf-pub-r.warn > svg { color: var(--warn); }
.sf-pub-r > div { flex: 1; min-width: 0; } .sf-pub-r b { display: block; font-size: 13px; } .sf-pub-r small { display: block; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.sf-comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.sf-comps > div { display: flex; flex-direction: column; gap: 4px; } .sf-comps video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; }
.sf-comps small { color: var(--text-3); font-size: 11.5px; }

/* Style match (creative-reelmimic.js): ReelMimic projects, their steps, and ReelMimic's own screen in a frame. */
.rm-status { flex-direction: row; align-items: center; gap: 12px; }
.rm-status small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.rm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.rm-status.on .rm-dot { background: var(--pos); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pos) 25%, transparent); }
.rm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.rm-card { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.rm-card.needs { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.rm-card.err { border-color: color-mix(in srgb, var(--neg) 70%, var(--line)); }
.rm-card-m { position: relative; min-width: 0; }
.rm-card-m > img, .rm-ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; display: grid; place-items: center; background: var(--line-2, var(--line)); color: var(--text-2); }
.rm-card-m .cs-out { margin: 0; } .rm-card-m .cs-out-b { display: none; }
.rm-ref-tag { position: absolute; left: 6px; top: 6px; font-size: 10.5px; padding: 2px 7px; border-radius: 99px; background: rgb(0 0 0 / .55); color: #fff; }
.rm-card-b { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rm-card-b > b { font-size: 14px; line-height: 1.3; }
.rm-steps { list-style: none; margin: 2px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rm-steps li { font-size: 11px; color: var(--text-2); padding-top: 6px; border-top: 3px solid var(--line); }
.rm-steps li.done { border-color: var(--pos); color: var(--text); }
.rm-steps li.now { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rm-stage { margin: 0; font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rm-stage.needs { color: var(--accent-ink); font-weight: 600; }
.rm-frame-card iframe { width: 100%; height: min(82vh, 900px); border: 1px solid var(--line); border-radius: 14px; background: #fff; }
@media (max-width: 600px) { .rm-card { grid-template-columns: 96px 1fr; } }

/* Finish in FilmCraft (filmcraft-ui.js): a "Branded" chip on copies, and its options form. */
.fc-chip { display: inline-flex; gap: 3px; align-items: center; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.fc-form { display: grid; gap: 12px; }
.fc-brand { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2, var(--surface)); }
.fc-brand small { display: block; color: var(--text-2); font-size: 12px; }