/* Marketing Studio — built on the shared tokens; compact, image-first. */
.studio-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.studio-page-header .inline-actions { margin-top: 0; }
.studio-section-title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.studio-section-title h2 { font-size: 15px; margin: 0; }
.studio-section-title .studio-file-button { margin-left: auto; }

.studio-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.studio-start { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); color: var(--color-text); }
.studio-start:hover { border-color: var(--color-primary); text-decoration: none; }
.studio-start > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.studio-start strong { font-size: 15px; }
.studio-start.is-disabled { opacity: .55; cursor: not-allowed; }
.studio-start-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); flex: none; }
.studio-start-icon .icon { width: 22px; height: 22px; }

.studio-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.studio-project { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2); color: var(--color-text); }
.studio-project:hover { border-color: var(--color-primary); text-decoration: none; }
.studio-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 0 4px; }
.studio-project .status-text { padding: 0 4px 4px; }
.studio-project-thumb { aspect-ratio: 4 / 3; border-radius: 4px; background: var(--color-sidebar); overflow: hidden; }
.studio-project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.studio-title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.studio-project-name { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.02em; border: 1px solid transparent; background: transparent; padding: 4px 6px; margin-left: -6px; min-width: min(420px, 70vw); border-radius: var(--radius); }
.studio-project-name:hover, .studio-project-name:focus { border-color: var(--color-border); background: var(--color-surface); }

.studio-layout { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.studio-composer { position: sticky; top: var(--space-4); }
.studio-block { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.studio-block-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.studio-block-header > :last-child { margin-left: auto; }
.studio-prompt { width: 100%; resize: vertical; min-height: 140px; line-height: 1.6; font-size: 13px; }
.studio-meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 12px; color: var(--color-muted); margin-top: 6px; }
.studio-history summary { cursor: pointer; }
.studio-history ol { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; }
.studio-history .button-link { font-size: 12px; text-align: left; }
.studio-file-button { cursor: pointer; }

.studio-references { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-2); }
.studio-reference { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-background); }
.studio-reference img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--color-sidebar); }
.studio-reference select { font-size: 11px; padding: 2px 4px; }
.studio-remove { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: rgba(255, 255, 255, .92); border-radius: 50%; }
.studio-remove:disabled { display: none; }
.studio-check { display: flex; align-items: center; gap: 6px; font-size: 12px; }

.studio-settings { display: flex; flex-direction: column; gap: var(--space-2); }
.studio-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; flex: 1; }
.studio-field-row { display: flex; gap: var(--space-3); }
.studio-model-summary { margin: 0; }
.studio-advanced summary { cursor: pointer; font-size: 12px; color: var(--color-muted); }
.studio-advanced[open] { display: flex; flex-direction: column; gap: var(--space-2); }
.studio-generate { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.studio-cost { font-size: 12px; color: var(--color-muted); min-height: 18px; }
.studio-generate .button-primary:disabled { opacity: .55; cursor: not-allowed; }

.studio-results .studio-section-title { margin-top: 0; }
.studio-runs { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.studio-run { border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--color-surface); }
.studio-run.is-failed, .studio-run.is-uncertain { border-left-color: var(--color-danger); }
.studio-run.is-cancelled { border-left-color: var(--color-muted); }
.studio-run.is-completed { border-left-color: var(--color-success); }
.studio-run-head { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.studio-run-error { margin: 6px 0 0; font-size: 12px; color: var(--color-danger); }
.studio-run-actions { display: flex; gap: var(--space-2); margin-top: 8px; }
.studio-run.is-running .studio-run-head strong::after, .studio-run.is-queued .studio-run-head strong::after, .studio-run.is-submitting .studio-run-head strong::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--color-primary); animation: studio-pulse 1.2s ease-in-out infinite; }
@keyframes studio-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .studio-run strong::after { animation: none; } }

.studio-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.studio-result { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; display: flex; flex-direction: column; }
.studio-result.is-accepted { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.studio-result > a { display: block; background: var(--color-sidebar); }
.studio-result img { width: 100%; max-height: 360px; object-fit: contain; display: block; }
.studio-result figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px 0; }
.studio-result.is-accepted .badge { background: var(--ok-soft); color: var(--ok); }
.studio-result-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; }
.studio-empty { padding: var(--space-6); text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius); font-size: 13px; }

.studio-confirm-list > div { padding: 8px 0; grid-template-columns: 140px minmax(0, 1fr); }
.studio-library-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin: var(--space-3) 0 var(--space-4); }
.studio-library-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 8px 10px; }
.studio-library-item:hover { border-color: var(--color-primary); }

@media (max-width: 960px) {
  .studio-layout { grid-template-columns: 1fr; }
  .studio-composer { position: static; }
}
@media (max-width: 600px) {
  .studio-page-header { flex-direction: column; }
  .studio-project-name { min-width: 0; width: 100%; }
  .studio-field-row { flex-direction: column; }
}

/* Creative Lab */
.lab-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; padding: var(--space-4); }
.lab-controls .studio-field { flex: 0 1 auto; min-width: 160px; }
.lab-segments { display: inline-flex; padding: 3px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius-sm); gap: 2px; }
.lab-segments .button { border-color: transparent; background: transparent; min-height: 28px; }
.lab-segments .button[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 32, 26, .08); }
.lab-refresh { margin-left: auto; }
.lab-status { margin: var(--space-3) 0; font-size: 13px; color: var(--color-muted); }
.lab-status[data-state="error"], .lab-status[data-state="stale"] { color: #8f2a1d; background: var(--alert-soft); border-left: 3px solid var(--alert); padding: 8px 12px; border-radius: var(--radius-sm); }
.lab-summary { margin-bottom: var(--space-3); font-size: 13px; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); }
.lab-card { display: flex; flex-direction: column; overflow: hidden; }
.lab-media { position: relative; aspect-ratio: 5 / 4; background: var(--surface-sunk); border-bottom: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 0; font-size: 12px; }
.lab-media img { width: 100%; height: 100%; object-fit: contain; }
.lab-rank { position: absolute; top: 8px; left: 8px; background: var(--rail); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.lab-rank.is-weak { background: var(--color-muted); }
.lab-flag { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .92); }
.lab-flag-bottom { top: auto; bottom: 8px; }
.lab-body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 8px; }
.lab-head { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.lab-head h3 { font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.lab-path { margin: 0; overflow-wrap: anywhere; }
.lab-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lab-metric { background: var(--surface-sunk); border-radius: var(--radius-sm); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lab-metric span { font-size: 11px; color: var(--color-muted); }
.lab-metric strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-metric.is-weak strong { color: var(--color-muted); font-weight: 500; }
.lab-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-copy summary { cursor: pointer; font-size: 12px; color: var(--color-muted); }
.lab-copy p { margin: 4px 0; font-size: 12px; white-space: pre-line; }
.lab-footnote { margin-top: var(--space-5); }
@media (max-width: 600px) { .lab-refresh { margin-left: 0; } .lab-controls .studio-field { min-width: 0; flex: 1 1 100%; } }
.lab-value-note { margin: 8px 0 0; padding: 10px 12px; background: var(--warn-soft); border-radius: var(--radius-sm); color: #7a4a00; font-size: 12px; line-height: 1.5; }
.lab-plain-note { margin: 6px 0 0; }

/* Creative Lab: analysis */
.lab-analysis { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.lab-analysis-head { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; }
.lab-analysis-head h2 { font-size: 16px; margin: 0 0 4px; }
.lab-analysis-head p { margin: 0; max-width: 720px; }
.lab-analysis-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; flex: none; max-width: 100%; }
.lab-analysis-actions select { min-width: 0; max-width: 100%; }
.lab-analysis-status { margin-top: var(--space-3); }
.lab-analysis-off { margin: var(--space-3) 0 0; }
.lab-analysis-body { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.lab-analysis-body h3 { font-size: 14px; margin: var(--space-4) 0 var(--space-2); }
.lab-summary-text { font-size: 14px; line-height: 1.6; margin: 0 0 var(--space-3); }
.lab-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lab-findings { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-3); }
.lab-findings p { margin: 4px 0 6px; font-size: 13px; line-height: 1.55; }
.lab-finding-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge.is-strong { background: var(--ok-soft); color: var(--ok); }
.badge.is-medium { background: var(--color-primary-soft); color: var(--color-primary); }
.badge.is-weak { background: var(--color-sidebar); color: var(--color-muted); }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lab-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 2px 10px 2px 2px; font-size: 12px; max-width: 280px; cursor: pointer; }
.lab-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.lab-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-chip.is-best { border-color: #a9d8bf; }
.lab-chip.is-weak { border-color: #f0cdc6; }
.lab-chip:hover { background: var(--color-background); }
.lab-caveats { margin: var(--space-4) 0 0; padding-left: 18px; }
.lab-disclaimer { margin: var(--space-3) 0 0; }
.lab-card.is-focused { box-shadow: 0 0 0 3px var(--color-primary); transition: box-shadow .2s; }
@media (max-width: 760px) { .lab-analysis-head { flex-direction: column; } .lab-groups { grid-template-columns: 1fr; } }

/* AI settings */
.ai-settings { padding: var(--space-5); max-width: 860px; display: flex; flex-direction: column; gap: var(--space-4); }
.ai-providers { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); }
.ai-providers legend { font-weight: 600; margin-bottom: var(--space-2); }
.ai-provider { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); cursor: pointer; }
.ai-provider:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.ai-provider.is-off { background: var(--color-background); }
.ai-provider-body { display: flex; flex-direction: column; gap: 8px; flex: 1; align-items: flex-start; }
.ai-provider-body .studio-field { width: 100%; }
.ai-fallback { font-size: 13px; }
.ai-actions { display: flex; align-items: center; gap: var(--space-3); }
.ai-settings p { margin: 0; }
.ai-provider-body input { width: 100%; }
.ai-settings fieldset + fieldset { margin-top: var(--space-2); }

/* Subscription package */
.studio-mode-note { margin: 0 0 var(--space-2); padding: 10px 12px; background: var(--pine-soft); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5; }
.studio-run.is-external { border-left-color: var(--warn); }
.studio-package-dialog { width: min(760px, calc(100vw - 32px)); }
.studio-package-steps { margin: 0 0 var(--space-3); padding-left: 20px; font-size: 13px; line-height: 1.6; }
.studio-package-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; resize: vertical; }
.studio-package-actions { flex-wrap: wrap; }

/* Lab → image project */
.lab-idea-prompt summary { cursor: pointer; font-size: 12px; color: var(--color-muted); }
.lab-idea-prompt p { white-space: pre-line; background: var(--color-background); padding: 8px 10px; border-radius: var(--radius); }
.lab-idea-start { margin-top: 6px; }
.lab-variant { align-self: flex-start; margin-top: 4px; }
.studio-origin { margin: 0 0 var(--space-4); padding: 10px 14px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 13px; line-height: 1.5; }

/* Google Drive */
.drive-settings { margin-top: var(--space-5); }
.drive-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.drive-head h2 { margin: 0 0 4px; font-size: 16px; }
.drive-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; }
.drive-facts dt { font-size: 12px; color: var(--color-muted); }
.drive-facts dd { margin: 2px 0 0; word-break: break-word; }
.drive-redirect code { word-break: break-all; }
.studio-drive { font-size: 12px; }
.studio-drive.is-error { color: var(--alert); }

/* Settings pages stack their panels with even spacing. */
.ai-settings + .ai-settings { margin-top: var(--space-5); }

/* Brands */
.brand-new { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-5); }
.brand-new .studio-field { min-width: 220px; }
.settings-content .brand-new { padding: var(--space-4) 0 0; margin: var(--space-4) 0 0; border-top: 1px solid var(--line); }
.brand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.brand-card { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); color: var(--ink); }
.brand-card:hover { border-color: var(--line-strong); text-decoration: none; }
.brand-section { margin-bottom: var(--space-5); max-width: 1000px; }
.brand-style { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.brand-style-media { display: flex; flex-direction: column; gap: var(--space-3); }
.brand-logo { max-width: 180px; max-height: 64px; object-fit: contain; }
.brand-image { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.brand-style-facts { display: grid; gap: var(--space-3); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.swatch i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); background: var(--surface-sunk); }
.swatch-dot { padding: 2px; }
.brand-page { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.brand-page:first-child { padding-top: 0; }
.brand-page:has(+ .brand-new) { border-bottom: 0; }
.brand-page-head { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.brand-page-head .inline-actions { margin-top: 0; }
.brand-page-head form, .panel-header form { margin: 0; }
.brand-details { display: grid; gap: var(--space-3); }
.brand-details textarea { width: 100%; }
@media (max-width: 700px) { .brand-style { grid-template-columns: 1fr; } .brand-page-head { flex-direction: column; } }
.brand-copy { display: grid; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-sm); max-width: 72ch; }
.brand-headline { font-size: var(--text-lg); font-weight: 600; }
.brand-points { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.brand-copy details p { margin-top: 6px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.product-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.product-card.is-gone { opacity: .6; }
.product-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 4px; }
.product-thumbs img:first-child { grid-column: 1 / -1; aspect-ratio: 1; }
.product-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--surface-sunk); }
.brand-edit summary { cursor: pointer; }
.brand-edit[open] { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.brand-edit textarea, .brand-edit input { width: 100%; }
.studio-brand-dialog { width: min(820px, calc(100vw - 32px)); }
.studio-brand-list { display: grid; gap: var(--space-4); max-height: 65vh; overflow: auto; }
.studio-brand-group h3 { margin-bottom: var(--space-2); }
.studio-brand-product { display: grid; gap: 4px; margin-bottom: var(--space-3); }
.studio-brand-images { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-brand-image { padding: 0; width: 84px; height: 84px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunk); overflow: hidden; }
.studio-brand-image:hover { border-color: var(--pine); box-shadow: 0 0 0 2px var(--pine-soft); }
.studio-brand-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-brand-block .swatches:empty { display: none; }
.studio-brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.studio-measure { margin-top: var(--space-5); }
.studio-measure-verdict { font-weight: 550; margin: var(--space-2) 0; }
.studio-measure-list { display: grid; gap: 6px; margin-bottom: var(--space-3); }
.studio-measure-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.studio-measure-row .button { margin-left: auto; }
.studio-measure-link { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.studio-measure-link select { flex: 1 1 260px; min-width: 0; }
.studio-measure-link input { flex: 0 1 180px; }
.swatch-toggle { cursor: pointer; background: var(--surface); color: var(--ink); }
.swatch-toggle[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.swatch-toggle:hover { border-color: var(--line-strong); }

/* Video director */
.director-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--line); }
.director-tabs a, .director-tabs span { padding: 8px 14px; font-size: var(--text-sm); font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.director-tabs a:hover { color: var(--ink); text-decoration: none; }
.director-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--color-primary); }
.director-tabs .is-soon { opacity: .45; cursor: default; }
.director-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.director-fields { display: grid; gap: var(--space-4); }
.director-fields .studio-field small { font-weight: 400; }
.director-fields textarea { width: 100%; resize: vertical; }
.director-fields .is-empty > span::after { content: " · not defined yet"; color: var(--muted); font-weight: 400; }
.director-save { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-3); max-width: 1000px; padding: var(--space-3) 0; margin-bottom: var(--space-5); background: var(--paper); }
.director-cast { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.director-cast figure { margin: 0; display: grid; gap: 4px; }
.director-cast img { height: 140px; width: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-sunk); }
.director-character-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunk); }
.settings-content .director-upload { padding-top: 0; margin-top: 0; border-top: 0; }
.director-paste-hint { flex-basis: 100%; margin: 0; }
.director-group-title { font-size: var(--text-sm); margin: var(--space-4) 0 var(--space-2); }
.director-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.director-image { margin: 0; display: grid; gap: 6px; align-content: start; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.director-image img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface-sunk); border-radius: 4px; }
.director-image-edit { display: grid; grid-template-columns: 1fr; gap: 4px; }
.director-image-edit input, .director-image-edit select { width: 100%; min-width: 0; }
.director-timeline { list-style: none; margin: 0; display: grid; gap: var(--space-3); }
.director-timeline > li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.director-timeline > li:last-child { border-bottom: 0; padding-bottom: 0; }
.director-entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.director-note { margin: 6px 0 0; max-width: 72ch; }
.director-snapshot { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 6px var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.director-snapshot dt { font-weight: 600; }
.director-snapshot dd { margin: 0; }
.director-pre { white-space: pre-wrap; font-size: var(--text-xs); max-height: 420px; overflow: auto; margin: 0; }
@media (max-width: 640px) { .director-snapshot { grid-template-columns: 1fr; } }
.moodboard-hint { margin: 0 0 var(--space-4); max-width: 100ch; }
.moodboard-group { margin-bottom: var(--space-4); outline: none; transition: border-color .15s, box-shadow .15s; }
.moodboard-group.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.moodboard-group.is-drop { border-color: var(--color-primary); background: var(--color-primary-soft); }
.moodboard-group.is-busy { opacity: .6; }
.moodboard-target { display: none; }
.moodboard-group.is-active .moodboard-target { display: inline; color: var(--color-primary); }
.moodboard-note { margin: 0 0 var(--space-3); max-width: 80ch; }
.moodboard-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.moodboard-grid::after { content: ""; flex-grow: 999; }
.moodboard-item { position: relative; margin: 0; height: 150px; flex: 1 1 150px; min-width: 60px; }
.moodboard-item a, .moodboard-item img { display: block; width: 100%; height: 100%; }
.moodboard-item img { object-fit: cover; border-radius: 3px; background: var(--surface-sunk); }
.moodboard-item form { position: absolute; top: 4px; right: 4px; margin: 0; opacity: 0; transition: opacity .15s; }
.moodboard-item:hover form, .moodboard-item:focus-within form { opacity: 1; }
.moodboard-remove { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.moodboard-empty { padding: var(--space-5); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); margin: 0; }
.moodboard-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.story-ask-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.story-count { flex: 0 0 auto; min-width: 80px; }
.story-said { margin: 0 0 var(--space-3); max-width: 90ch; }
.story-thinking { margin: 0; }
.story-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.story-idea { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.story-idea p, .story-chosen p { margin: 0; }
.story-idea.is-liked { border-color: #d9a400; box-shadow: 0 0 0 1px #d9a400; }
.story-idea.is-chosen { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.story-title { font-size: var(--text-md); margin: 0; }
.story-label { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.story-hook { font-weight: 500; }
.story-beats { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.story-idea-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.story-idea-actions form { margin: 0; }
.story-like[aria-pressed="true"] { color: #8a6800; border-color: #d9a400; }
.story-chosen .settings-content { display: grid; gap: 6px; max-width: 90ch; }
.director-switch { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); max-width: 90ch; cursor: pointer; }
.director-switch input { margin-top: 3px; }
.scenes-warnings { margin: 0; padding: var(--space-2) var(--space-3) var(--space-2) 28px; background: #fff8e6; border: 1px solid #f0d58a; border-radius: var(--radius-sm); font-size: var(--text-sm); display: grid; gap: 2px; }
.scene-card { margin-bottom: var(--space-2); max-width: 1000px; }
.scene-card[open] { margin-bottom: var(--space-4); }
.scene-summary { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.scene-summary::-webkit-details-marker { display: none; }
.scene-number { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); }
.scene-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-sm); }
.scene-line { color: var(--ink-soft, var(--ink)); }
.scene-narration { font-style: italic; }
.scene-issue { color: #8a6800; }
.scene-card.has-issues .scene-number { background: #fff1c2; color: #8a6800; }
.scene-card > .settings-content { border-top: 1px solid var(--line); }
.scene-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.scene-meta .studio-field:first-child { grid-column: span 2; }
.scene-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.scene-columns fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); align-content: start; }
.scene-columns legend { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: var(--space-2); }
.scene-columns textarea, .scene-meta input, .scene-meta select { width: 100%; min-width: 0; }
.scene-tools { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.scene-tools form { margin: 0; }
.scenes-add { margin: var(--space-3) 0 var(--space-5); }
@media (max-width: 900px) { .scene-meta, .scene-columns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .scene-meta, .scene-columns { grid-template-columns: 1fr; } }
.scene-thumb { flex: none; width: 48px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--surface-sunk); }
.scene-frame { display: inline-flex; align-items: flex-end; gap: var(--space-2); color: var(--ink); }
.scene-frame img { height: 180px; width: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.scene-voice { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); }
.scene-voice-title { margin: 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.scene-take { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 4px 0; }
.scene-take audio { height: 32px; max-width: 320px; }
.scene-take form { margin: 0; }
.scene-voice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.scene-voice-actions form { margin: 0; }
.scene-voice-upload { display: flex; align-items: center; gap: 6px; }
.scene-voice-upload input[type=file] { max-width: 220px; font-size: var(--text-xs); }
.sound-balance { margin: 0 0 var(--space-4); }
.sound-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.sound-model { display: flex; gap: var(--space-2); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); }
.sound-model.is-current { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.sound-model input { margin-top: 3px; }
.voice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.voice-item { display: grid; grid-template-columns: minmax(0, 1fr) 280px 160px; gap: var(--space-3); align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); }
.voice-item.is-current { background: var(--color-primary-soft); }
.voice-item audio { width: 100%; height: 32px; }
.voice-item form { margin: 0; }
.sound-clip { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sound-clip.is-current { border-color: var(--color-primary); }
.sound-clip audio { width: 100%; height: 32px; }
.sound-clip-info { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); min-width: 0; }
.sound-clip-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sound-clip-actions form { margin: 0; display: flex; gap: 4px; }
.sound-form { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.sound-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.sound-row .studio-field { flex: 0 1 200px; }
.sound-upload { align-items: center; }
.sound-upload input[type=file] { max-width: 240px; font-size: var(--text-xs); }
.sound-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sound-suggestions form { margin: 0; }
@media (max-width: 900px) { .voice-item, .sound-clip { grid-template-columns: 1fr; } }
.scene-video { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); }
.scene-video-current { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.scene-video-current video { max-height: 360px; max-width: 100%; border-radius: var(--radius-sm); background: #000; }
.scene-video-take video { max-height: 160px; border-radius: 4px; background: #000; }
.scene-video-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.scene-video-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.scene-video-form select { max-width: 260px; }
.export-scenes { margin: 0 0 var(--space-3); padding-left: 22px; display: grid; gap: 4px; font-size: var(--text-sm); }
.export-scenes .is-missing { color: var(--muted); }
.export-cut { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.export-cut video { width: 100%; max-height: 300px; background: #000; border-radius: 4px; }
.export-contents { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--text-sm); }
@media (max-width: 900px) { .export-cut { grid-template-columns: 1fr; } }