/* =============================================================== STUDIO == */
/* Studio panel (task queue #73, Content Studio Phase 2). Reuses the Outreach
   list, row and detail primitives (outreach.css) and the Docs search box
   (documents.css); the scene list, the player and the library grid live here. */

.cs-storage { margin-top: 4px; min-height: 16px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.cs-warn { color: var(--warn); }
.cs-tight { margin: 0; }
#studio-new { display: inline-flex; align-items: center; gap: 6px; }
#studio-new .ic { width: 14px; height: 14px; }
.cs-small { font-size: var(--fs-xs); }
.cs-error { font-size: var(--fs-xs); color: var(--danger); }
.cs-k { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 2px; }

.cs-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .cs-layout { grid-template-columns: minmax(0, 1fr); } }
.cs-list { max-height: calc(100vh - 170px); }
.cs-detail { min-height: 420px; }

/* ---- the list ---- */
.cs-row { display: flex; gap: 10px; align-items: flex-start; }
.cs-row + .cs-row { margin-top: 2px; }
.cs-row-thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
.cs-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-row-thumb .ic { width: 18px; height: 18px; }
.cs-row-body { display: block; flex: 1; min-width: 0; }
.cs-row-job { margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--accent-2); }
.cs-row-new { align-items: center; color: var(--text-2); }
.cs-row-plus { width: 28px; height: 28px; border-radius: 8px; border: 1px dashed var(--line-3); display: grid; place-items: center; }
.cs-row-plus .ic { width: 14px; height: 14px; }

.cs-st-active { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-soft); }
.cs-st-review { color: var(--warn); border-color: rgba(245, 182, 74, 0.35); background: var(--warn-soft); }
.cs-st-ready { color: var(--teal); border-color: rgba(94, 234, 212, 0.35); background: rgba(94, 234, 212, 0.08); }
.cs-st-ok { color: var(--ok); border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.1); }
.cs-st-bad { color: var(--danger); border-color: rgba(255, 107, 107, 0.35); background: var(--danger-soft); }

/* ---- the brief form ---- */
.cs-label { display: block; margin: 12px 0 5px; font-size: var(--fs-sm); color: var(--text-2); }
.cs-label:first-child { margin-top: 0; }
textarea.cs-input { height: auto; padding: 8px 11px; line-height: 1.5; resize: vertical; font-family: inherit; }
.cs-input { color: var(--text); }
.cs-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cs-pick-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 4px 0 4px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: var(--fs-xs); max-width: 260px; }
.cs-pick-chip > span:not(.cs-pick-thumb) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pick-thumb { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; flex: none; background: var(--sunken); display: grid; place-items: center; font-size: 10px; overflow: hidden; }
.cs-pick-thumb.cs-thumb-font, .cs-pick-thumb.cs-thumb-icon { font-size: 11px; }
.cs-pick-thumb.cs-thumb-icon .ic { width: 13px; height: 13px; }
.cs-field .task-input { color: var(--text); }
.cs-format-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.cs-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); min-width: 220px; }
.cs-field-num { min-width: 110px; width: 120px; }

/* ---- a brief ---- */
.cs-brief { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cs-brief summary { cursor: pointer; padding: 9px 12px; font-size: var(--fs-sm); color: var(--text-2); }
.cs-brief-body { display: grid; gap: 10px; padding: 2px 12px 12px; font-size: var(--fs-sm); }
.cs-pre { white-space: pre-wrap; }
.cs-job { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); }
.cs-job .fd-spin { color: var(--accent-2); width: 14px; height: 14px; }
.cs-job > div { flex: 1; min-width: 0; }
.cs-job-what { font-size: var(--fs); font-weight: 560; }
.cs-job-stage { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
.cs-job-failed { border-color: rgba(255, 107, 107, 0.35); background: var(--danger-soft); }
.cs-job-failed > .ic { width: 18px; height: 18px; color: var(--danger); flex: none; }
.cs-versions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.cs-versions .filter-btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); }
.cs-ok-ic { width: 12px; height: 12px; color: var(--ok); }
.cs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.cs-change { margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--accent-line); background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: var(--fs-sm); display: grid; gap: 4px; }
.cs-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.cs-assume { margin-top: 12px; font-size: var(--fs-sm); }
.cs-assume ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); }
.cs-check { margin-top: 12px; font-size: var(--fs-xs); display: flex; align-items: center; gap: 7px; color: var(--text-2); }
.cs-check .ic { width: 14px; height: 14px; flex: none; }
.cs-check-ok .ic { color: var(--ok); }
details.cs-check { display: block; }
.cs-check-warn summary { cursor: pointer; display: flex; align-items: center; gap: 7px; color: var(--warn); }
.cs-check-warn ul { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 3px; }

/* The scene list: a still at the video's own aspect, then the words. */
.cs-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-scene { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: 14px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.cs-scene-still { width: 100%; max-height: 240px; border-radius: 8px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); justify-self: center; }
.cs-scene-still img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.cs-scene-top { display: flex; align-items: baseline; gap: 10px; }
.cs-scene-time { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.cs-scene-name { font-weight: 600; font-size: var(--fs); }
.cs-scene-text { margin-top: 6px; font-size: var(--fs-md); font-weight: 560; color: var(--text); white-space: pre-wrap; }
.cs-scene-text.cs-none { font-weight: 400; font-size: var(--fs-sm); color: var(--text-3); }
.cs-scene-line { margin-top: 7px; font-size: var(--fs-sm); color: var(--text-2); }
.cs-scene-assets { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.cs-scene-assets code, .cs-brief-body code, .cs-scene-line code { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); }
@media (max-width: 640px) { .cs-scene { grid-template-columns: minmax(0, 1fr); } .cs-scene-still { max-width: 240px; } }
.cs-code { margin-top: 12px; font-size: var(--fs-xs); }
.cs-code summary { cursor: pointer; color: var(--text-3); }
.cs-pre-code { margin: 8px 0 0; max-height: 360px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text-2); white-space: pre; }
.cs-story-text { white-space: pre-wrap; font-family: inherit; font-size: 13px; max-height: 520px; }
.cs-story-times span { font-variant-numeric: tabular-nums; }
.cs-story-files { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
.cs-job-story { margin-top: 8px; }

/* The player keeps the video's aspect, and never outgrows the screen. */
.cs-player { width: 100%; max-height: 70vh; max-width: min(100%, calc(70vh * 16 / 9)); border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line-2); margin: 0 auto; }
.cs-player video { width: 100%; height: 100%; display: block; background: #000; }
.cs-render-actions { margin-top: 4px; }
.cs-quality { width: auto; }
.cs-approved { display: inline-flex; align-items: center; gap: 6px; font-weight: 560; color: var(--ok); font-size: var(--fs-sm); }
.cs-approved .ic { width: 16px; height: 16px; }
.cs-change-box { padding-top: 14px; border-top: 1px solid var(--line); }
.cs-change-box .or-actions { margin-top: 10px; }
/* Task queue #348: the voice script Q reviews before the build (status script_ready). */
.cs-script { padding: 14px 16px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); }
.cs-script .or-actions { margin-top: 14px; }
.cs-vs-picking { margin-top: 6px; }
.cs-vs-scene { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cs-vs-head { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--text); }
.cs-vs-n { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.cs-vs-about { margin-top: 2px; }
.cs-vs-line { position: relative; margin-top: 8px; }
.cs-vs-line .cs-vs-text { width: 100%; box-sizing: border-box; padding-right: 34px; resize: vertical; background: var(--surface); }
.cs-vs-del { position: absolute; top: 8px; right: 8px; color: var(--text-3); }
.cs-vs-del:hover { color: var(--danger); }
.cs-vs-del .ic { width: 14px; height: 14px; }
.cs-vs-tone { margin-top: 3px; }
.cs-vs-none { margin-top: 6px; }
.cs-vs-add { margin-top: 8px; }

/* ---- the library ---- */
.cs-lib-find { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cs-lib-search { flex: 1 1 280px; }
#cs-lib-business, #cs-lib-tag { width: 200px; flex: none; height: 38px; border-radius: 11px; }
.cs-lib-count { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.cs-lib-chips { align-items: center; }
.cs-chip-gap { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
#cs-lib-approved { display: inline-flex; align-items: center; gap: 5px; }
#cs-lib-approved .ic { width: 13px; height: 13px; }
#cs-lib-approved.active { color: var(--ok); }
.cs-lib-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .cs-lib-layout { grid-template-columns: minmax(0, 1fr); } }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; align-content: start; }
.cs-card { display: flex; flex-direction: column; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color 0.16s var(--ease), background 0.16s var(--ease); }
.cs-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.cs-card.selected, .cs-card.picked { border-color: var(--accent-line); background: var(--surface-2); }
.cs-card-media { position: relative; display: block; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden; background: var(--sunken); border-bottom: 1px solid var(--line); }
.cs-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The box keeps its 16:10 shape whatever the picture's own size. */
.cs-card-media > .cs-thumb { position: absolute; inset: 0; }
.cs-thumb-font, .cs-thumb-icon { display: grid; place-items: center; color: var(--text-2); font-size: 34px; }
.cs-thumb-icon .ic { width: 30px; height: 30px; color: var(--text-3); }
.cs-badge { position: absolute; left: 7px; top: 7px; padding: 1px 7px; border-radius: 999px; font-family: var(--mono); font-size: 10px; background: rgba(9, 9, 11, 0.8); border: 1px solid var(--line-2); color: var(--text-2); }
.cs-badge-ok { color: var(--ok); border-color: rgba(74, 222, 128, 0.4); }
.cs-check-mark { position: absolute; right: 7px; top: 7px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-3); background: rgba(9, 9, 11, 0.7); display: grid; place-items: center; }
.cs-card.picked .cs-check-mark { background: var(--accent); border-color: var(--accent); }
.cs-check-mark .ic { width: 14px; height: 14px; color: #0b0b0e; }
.cs-card-body { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 10px; min-width: 0; }
.cs-card-title { font-size: var(--fs-sm); font-weight: 560; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-card-meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-card .or-row-tags { margin-top: 2px; }
.cs-asset-detail { position: sticky; top: 0; }
.cs-asset-preview { border-radius: 10px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); margin-bottom: 12px; display: grid; place-items: center; min-height: 120px; }
.cs-asset-preview img, .cs-asset-preview video { width: 100%; max-height: 320px; object-fit: contain; display: block; }
.cs-asset-preview audio { width: calc(100% - 20px); margin: 20px 10px; }
.cs-font-sample { padding: 18px; font-size: 30px; line-height: 1.25; color: var(--text); text-align: center; }
.cs-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; margin: 14px 0 0; font-size: var(--fs-xs); }
.cs-dl dt { color: var(--text-3); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 1px; }
.cs-dl dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }

/* ---- the picker and the full-size still ---- */
.cs-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.62); display: grid; place-items: center; padding: 24px; }
.cs-modal-box { width: min(1080px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-pop); }
.cs-modal-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cs-modal-head .cs-lib-search { margin-left: auto; max-width: 360px; }
.cs-picker-grid { overflow-y: auto; min-height: 200px; padding: 2px; }
.cs-zoom { cursor: zoom-out; }
.cs-zoom img, .cs-zoom video { max-width: 100%; max-height: calc(100vh - 48px); border-radius: 10px; box-shadow: var(--shadow-pop); }
.cs-achip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 3px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-3); font-size: var(--fs-xs); color: var(--text-2); max-width: 280px; }
.cs-achip img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: none; }
.cs-achip .ic { width: 14px; height: 14px; margin-left: 3px; color: var(--text-3); flex: none; }
.cs-achip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.chip-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ---- uploads (task queue #84 follow-up 2): the Library's Upload button,
   its list of files with a progress bar each, and the drop zone ---- */
.cs-upload-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.cs-upload-btn .ic { width: 14px; height: 14px; }
#studio-library-view { position: relative; min-height: calc(100vh - 220px); }
.cs-drop { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; border-radius: 14px; border: 1.5px dashed var(--accent-line); background: rgba(9, 9, 11, 0.82); pointer-events: none; }
.cs-drop > div { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--accent-2); }
.cs-drop .ic { width: 20px; height: 20px; }
.cs-uploads { margin-bottom: 12px; display: grid; gap: 10px; }
.cs-up-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-up-all { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.cs-up-all .cs-k { margin: 0 2px 0 8px; }
#cs-up-allbiz { width: auto; height: 30px; }
.cs-up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-up { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.cs-up-failed { border-color: rgba(255, 107, 107, 0.3); }
.cs-up-done { border-color: rgba(74, 222, 128, 0.28); }
.cs-up-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
.cs-up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-up-thumb .ic { width: 20px; height: 20px; }
.cs-up-main { min-width: 0; display: grid; gap: 8px; }
.cs-up-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-up-name { font-size: var(--fs-sm); font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-up-size { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.cs-up-rm { flex: none; }
.cs-up-top .or-spacer, .cs-up-head .or-spacer { flex: 1; }
.cs-up-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-up-fields .cs-field { min-width: 160px; }
.cs-up-fields select.task-input { height: 34px; }
.cs-up-title { flex: 1 1 220px; }
.cs-up-tags .cs-k { margin-bottom: 5px; }
.cs-up-need { color: var(--warn); text-transform: none; letter-spacing: 0; }
.cs-up-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 30px; padding: 3px 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }
.cs-up-tagin { flex: 1 1 120px; min-width: 100px; height: 24px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); }
#cs-up-alltag { flex: 0 1 160px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 10px; height: 26px; }
.cs-up-sugg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cs-up-sugg .tag-chip, .cs-up-all .tag-chip { height: 24px; padding: 0 9px; font-size: var(--fs-xs); }
.cs-up-facts { font-size: var(--fs-xs); color: var(--text-3); }
.cs-up-state { font-size: var(--fs-xs); color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-up-state .ic { width: 13px; height: 13px; }
.cs-up-ok { color: var(--ok); }
.cs-up-bad { color: var(--danger); }
.cs-progress { height: 6px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; }
.cs-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.2s linear; }

/* ---- the brief form: type, style, voice-over, music ---- */
#cs-new-form .filter-btn .ic { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.cs-sub { margin-top: 10px; display: grid; gap: 8px; }
.cs-sub:empty { display: none; }
.cs-sub .cs-label { margin: 2px 0 0; }
.cs-slot-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-slot-chip { max-width: 100%; }
.cs-slot-len { font-family: var(--mono); font-size: 10px; color: var(--text-3); white-space: nowrap; }
#cs-f-edit .cs-picks, #cs-f-voice .cs-picks, #cs-f-music .cs-picks { margin-bottom: 0; }
#cs-f-edit { display: grid; gap: 8px; }
#cs-f-edit .or-section-title { margin-bottom: 0; }
.cs-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cs-style-card { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); transition: border-color 0.16s var(--ease), background 0.16s var(--ease); }
.cs-style-card:hover { border-color: var(--line-3); }
.cs-style-card.selected { border-color: var(--accent-line); background: var(--accent-soft); }
.cs-style-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-style-name { font-weight: 600; font-size: var(--fs); color: var(--text); }
.cs-style-top .ic { width: 15px; height: 15px; color: var(--accent-2); }
.cs-style-sum { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; }
.cs-rec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--danger); }
.cs-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px rgba(255, 107, 107, 0.7); animation: cs-rec-pulse 1.2s ease-in-out infinite; }
@keyframes cs-rec-pulse { 50% { opacity: 0.35; } }
.cs-script { display: block; margin-top: 4px; color: var(--text-2); }

/* ---- a version's sound ---- */
.cs-sound { display: grid; gap: 8px; }
.cs-sound .or-section-title { margin-bottom: 2px; }
.cs-sound-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-sm); color: var(--text-2); }
.cs-sound-row .cs-k { width: 110px; flex: none; margin: 0; }
.cs-sound-edit { color: var(--text); font-weight: 560; }
.cs-lines { list-style: none; margin: 0 0 0 120px; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.cs-lines li { display: flex; gap: 10px; align-items: baseline; }
@media (max-width: 640px) { .cs-lines { margin-left: 0; } }

/* ---- brand profiles (task queue #101) ---- */
.cs-p-sum span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.cs-row-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-p-make { margin-top: 8px; align-items: center; }
.cs-p-has { margin-top: 8px; }
.cs-p-sample { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 4px; font-size: var(--fs-sm); }
/* What the studio read on the brand's website (task queue #102). */
.cs-p-site { margin-top: 10px; }
.cs-p-site > .cs-k { display: block; }
.cs-swatches { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.cs-swatch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.cs-swatch-dot { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); flex: none; }
.cs-swatch-hex { font-family: var(--mono); color: var(--text); }
.cs-p-site-logo { display: flex; align-items: center; gap: 10px; }
.cs-p-site-logo img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface-2) 0 50%) 0 0 / 12px 12px; flex: none; }
.cs-p-quotes { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.cs-p-progress { margin: 12px 0 10px; font-size: var(--fs-xs); color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cs-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cs-dir-card { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.cs-dir-card.saved { border-color: rgba(74, 222, 128, 0.35); }
.cs-dir-media { aspect-ratio: 1 / 1; background: #000; display: grid; place-items: center; }
.cs-dir-media video, .cs-dir-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-dir-media img { cursor: zoom-in; }
.cs-dir-empty { color: var(--text-3); display: grid; place-items: center; }
.cs-dir-empty .ic { width: 22px; height: 22px; }
.cs-dir-empty .fd-spin { width: 18px; height: 18px; color: var(--accent-2); }
.cs-dir-body { padding: 10px 12px 12px; display: grid; gap: 6px; }
.cs-dir-top { display: flex; align-items: baseline; gap: 8px; }
.cs-dir-slug { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.cs-dir-name { margin: 0; font-size: var(--fs-md); font-weight: 620; }
.cs-dir-sum { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; }
.cs-dir-state { font-size: var(--fs-xs); color: var(--accent-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-dir-state .fd-spin { width: 12px; height: 12px; }
.cs-dir-bad { color: var(--danger); }
.cs-dir-acts { margin-top: 2px; flex-wrap: wrap; }
.cs-rules { white-space: pre-wrap; max-height: 320px; }
.cs-p-save { width: 100%; }
.cs-p-save .cs-label { margin-top: 2px; }
.cs-p-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-2); }
.cs-p-change { margin-top: 12px; }
.cs-dir-before { max-width: 320px; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line-2); }
.cs-dir-before video { width: 100%; display: block; }
.cs-p-player { max-width: min(100%, 460px); aspect-ratio: 1 / 1; }
textarea.cs-rules-edit { font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.cs-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-xs); }
.cs-hist li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
[data-cs-pbiz="__new"] { display: inline-flex; align-items: center; gap: 5px; }
[data-cs-pbiz="__new"] .ic { width: 12px; height: 12px; }

/* ---- the style library (task queue #106) ---- */
.cs-sl-pickbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: var(--fs-sm); }
.cs-sl-pickbar > .ic { width: 15px; height: 15px; color: var(--accent-2); flex: none; }
.cs-sl-cats { margin-bottom: 10px; }
.cs-sl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.cs-sl-tags .filter-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; font-size: var(--fs-xs); }
.cs-sl-tags .filter-btn .ic { width: 11px; height: 11px; }
.cs-sl-n { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.cs-sl-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cs-sl-grid-audio { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cs-sl-card { cursor: pointer; outline: none; }
.cs-sl-card:focus-visible { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }
.cs-sl-media { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.cs-sl-media img, .cs-sl-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-sl-m-music, .cs-sl-m-sfx { aspect-ratio: 16 / 9; }
.cs-sl-badge { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 10px; font-family: var(--mono); pointer-events: none; opacity: 0.85; }
.cs-sl-card:hover .cs-sl-badge { opacity: 0; }
.cs-sl-none { font-size: var(--fs-xs); color: var(--text-3); }
.cs-sl-audio { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg, var(--surface-3), var(--sunken)); }
.cs-sl-audio.cs-sl-sfx { background: linear-gradient(135deg, var(--sunken), var(--surface-3)); }
.cs-sl-wave { display: flex; align-items: center; gap: 3px; height: 26px; opacity: 0.55; }
.cs-sl-wave i { flex: 1; border-radius: 2px; background: var(--text-3); height: 30%; }
.cs-sl-wave i:nth-child(3n) { height: 70%; } .cs-sl-wave i:nth-child(4n+1) { height: 50%; } .cs-sl-wave i:nth-child(5n+2) { height: 95%; }
.cs-sl-sub { font-family: var(--mono); font-size: 10px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sl-play { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-2); flex: none; }
.cs-sl-play:hover { background: var(--accent); color: #fff; }
.cs-sl-play.playing { background: var(--accent); color: #fff; }
.cs-sl-play .ic { width: 16px; height: 16px; }
.cs-sl-play-sm { width: 26px; height: 26px; }
.cs-sl-play-sm .ic { width: 11px; height: 11px; }
.cs-sl-pal { display: inline-flex; gap: 3px; vertical-align: middle; }
.cs-sl-pal i { width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--line-2); display: inline-block; }
.cs-sl-detail { display: grid; gap: 10px; }
.cs-sl-hero { position: relative; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.cs-sl-hero img, .cs-sl-hero video { width: 100%; display: block; }
.cs-sl-hero.cs-sl-m-music, .cs-sl-hero.cs-sl-m-sfx { aspect-ratio: 16 / 7; background: var(--sunken); }
.cs-sl-head .or-name { margin: 2px 0 0; }
.cs-sl-acts { margin: 0; }
.cs-sl-acts .ic { width: 13px; height: 13px; }
.cs-sl-acts .btn-secondary { display: inline-flex; align-items: center; gap: 6px; }
.cs-sl-sum { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.cs-sl-facts { padding: 0; }
.cs-sl-list, .cs-sl-sounds { margin: 0; padding-left: 16px; display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); }
.cs-sl-sounds { list-style: none; padding-left: 0; }
.cs-sl-sounds li { display: flex; align-items: center; gap: 8px; }
.cs-sl-tagbtn { cursor: pointer; }

/* the builder of a library profile: options of four picks */
.cs-builder { display: grid; gap: 10px; }
.cs-builder .or-section-title { margin-bottom: 0; }
.cs-opts { display: grid; gap: 10px; }
.cs-opt { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 8px; }
.cs-opt-head { display: flex; align-items: center; gap: 8px; }
.cs-opt-head .cs-k { margin: 0; }
.cs-opt-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .cs-opt-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-slot { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); min-width: 0; }
.cs-slot-empty { align-items: center; justify-content: center; flex-direction: row; min-height: 120px; border-style: dashed; color: var(--text-2); font-size: var(--fs-xs); }
.cs-slot-empty:hover { border-color: var(--accent-line); color: var(--text); }
.cs-slot-empty .ic { width: 13px; height: 13px; }
.cs-slot-acts { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.cs-pk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-pk-th { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; background: var(--sunken); display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--line); }
.cs-pk-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-pk-th .ic { width: 16px; height: 16px; }
.cs-pk-txt { display: grid; min-width: 0; }
.cs-pk-cat { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.cs-pk-name { font-size: var(--fs-xs); font-weight: 560; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pk-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cs-pk-strip .cs-pk-th { width: 34px; height: 34px; }
.cs-pk-pal { margin-top: 2px; }
.cs-sugg { display: grid; gap: 10px; }
.cs-sugg .or-section-title { margin-bottom: 0; }
.cs-sugg-grid { display: grid; gap: 12px; }
.cs-sugg-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 10px; align-content: start; }
.cs-sugg-card .or-actions { margin: 0; flex-wrap: wrap; gap: 6px; }

/* a pick as a card, its example big enough to see (#106 follow-up 4) */
.cs-pkc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .cs-pkc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-pkc { display: flex; flex-direction: column; min-width: 0; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.cs-pkc-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sunken); border-bottom: 1px solid var(--line); display: grid; place-items: center; }
.cs-pkc-media img, .cs-pkc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-pkc-zoom { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cs-pkc-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-pkc-media .cs-sl-audio { gap: 12px; padding: 14px; }
.cs-pkc-media .cs-sl-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.45; }
.cs-pkc-hover, .cs-pkc-touch { display: none; }
.cs-pkc-hint-hover { opacity: 0; }
@media (hover: hover) {
  .cs-pkc-media:hover .cs-pkc-hint { opacity: 0.85; }
  .cs-pkc-media:hover .cs-pkc-idle { display: none; }
  .cs-pkc-media:hover .cs-pkc-hover { display: inline; }
}
@media (hover: none) {
  .cs-pkc-idle { display: none; }
  .cs-pkc-touch { display: inline; }
  .cs-pkc-hint-hover { opacity: 0.85; }
}
.cs-pkc-body { display: grid; gap: 3px; padding: 8px 10px 10px; min-width: 0; }
.cs-pkc-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pkc .cs-slot-acts { margin-top: auto; padding: 0 10px 10px; }

/* the simpler video form (task queue #106) */
.cs-label-big { font-size: var(--fs); color: var(--text); font-weight: 560; }
.cs-more { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 0 12px; }
.cs-more > summary { cursor: pointer; padding: 10px 0; font-size: var(--fs-sm); color: var(--text-2); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cs-more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }

/* ---- deleting a video, a saved profile or a gallery (task queue #114) ---- */
.cs-del { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--line); }
.cs-del > .or-actions { margin: 0; }
button.linklike.cs-del-link { color: var(--danger); }
button.linklike.cs-del-link:hover { color: var(--danger); background: var(--danger-soft); border-color: rgba(255, 107, 107, 0.35); }
.cs-del-ask { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid rgba(255, 107, 107, 0.35); border-radius: 12px; background: var(--danger-soft); }
.cs-del-ask .or-actions { margin: 0; flex-wrap: wrap; gap: 8px; }
.cs-del-title { margin: 0; font-size: var(--fs); font-weight: 600; color: var(--text); }
.cs-del-text { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.btn-primary.cs-btn-danger { background: var(--danger); color: #0b0b0e; }
.btn-primary.cs-btn-danger:hover { background: #ff8787; }

/* ---- reference videos (task queue #155) ---- */
#cs-ref-aspect { width: 200px; flex: none; height: 38px; border-radius: 11px; }
.cs-ref-kinds { margin: 0 0 4px; }
.cs-ref-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); }
@media (max-width: 1000px) { .cs-ref-layout { grid-template-columns: minmax(0, 1fr); } }
.cs-ref-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cs-ref-card { cursor: pointer; outline: none; }
.cs-ref-card:focus-visible { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }
.cs-ref-media { aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--text-3); }
.cs-ref-media img, .cs-ref-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-ref-media video { opacity: 0; transition: opacity 0.2s var(--ease); }
.cs-ref-card:hover .cs-ref-media video { opacity: 1; }
.cs-ref-media > .ic { width: 26px; height: 26px; }
.cs-ref-len { position: absolute; right: 7px; bottom: 7px; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); color: #fff; font-family: var(--mono); font-size: 10px; pointer-events: none; }
/* A scroll box: the rows keep their full height (an overflow-hidden player would shrink to nothing). */
.cs-ref-detail { max-height: calc(100vh - 140px); overflow-y: auto; grid-auto-rows: max-content; }
.cs-ref-player { width: 100%; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line-2); margin: 0 auto; }
.cs-ref-player video { width: 100%; height: 100%; display: block; background: #000; }
.cs-ref-facts { white-space: normal; margin-top: 3px; }
.cs-ref-acts { flex-wrap: wrap; gap: 8px; }
.cs-ref-acts .btn-primary, .cs-ref-acts .chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.cs-ref-acts .ic { width: 13px; height: 13px; }
.cs-ref-sec { display: grid; gap: 8px; }
.cs-ref-sec .or-section-title { margin: 4px 0 0; }
.cs-ref-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs-ref-scene { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.16s var(--ease); }
.cs-ref-scene:hover { border-color: var(--accent-line); }
.cs-ref-sn { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); background: var(--surface-3); }
.cs-ref-sbody { display: grid; gap: 3px; min-width: 0; font-size: var(--fs-xs); }
.cs-ref-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-ref-stype { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.cs-ref-words { font-size: var(--fs-sm); font-weight: 560; color: var(--text); }
.cs-ref-words.cs-none { font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); }
.cs-ref-what { color: var(--text-2); line-height: 1.45; }
.cs-ref-trans { color: var(--text-3); }
.cs-ref-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cs-ref-sheet { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--sunken); cursor: zoom-in; }
.cs-ref-sheet img { width: 100%; display: block; }
.cs-ref-tagline { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-ref-title { font-size: var(--fs); font-weight: 600; color: var(--text); }
.cs-ref-why { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.cs-ref-link { font-weight: 560; }

/* the brief form: the picked reference (a compact card) */
.cs-ref-pickcard { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--surface-2); margin-bottom: 8px; }
.cs-ref-th { flex: none; width: 96px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
.cs-ref-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-ref-th .ic { width: 20px; height: 20px; }
.cs-ref-pickbody { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cs-ref-pickbody .cs-card-meta { white-space: normal; }
.cs-ref-pickacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-ref-suggest { border-style: dashed; }
.cs-ref-pickbtn { display: inline-flex; align-items: center; gap: 6px; }
.cs-ref-pickbtn .ic { width: 14px; height: 14px; }
#cs-f-ref .cs-slot-acts { margin-bottom: 8px; }

/* a video: the 3 suggestions, the reference of a plan, the scene pairs */
.cs-ref-choose { display: grid; gap: 10px; }
.cs-ref-choose .or-section-title { margin-bottom: 0; }
.cs-ref-sugg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cs-ref-sugg { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.cs-ref-sugg-media { position: relative; padding: 0; border: 0; max-height: 260px; background: #000; display: grid; place-items: center; cursor: pointer; color: var(--text-3); }
.cs-ref-sugg-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-ref-play { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.cs-ref-play .ic { width: 16px; height: 16px; }
.cs-ref-sugg-body { padding: 10px 12px 12px; display: grid; gap: 7px; }
.cs-ref-sugg-body .or-actions { margin: 2px 0 0; }
.cs-ref-plan-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cs-ref-mini { flex: none; width: 100%; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line-2); }
.cs-ref-mini video { width: 100%; height: 100%; display: block; background: #000; }
.cs-ref-plan-body { flex: 1 1 260px; min-width: 0; display: grid; gap: 7px; }
.cs-ref-plan-body .or-actions { margin: 2px 0 0; flex-wrap: wrap; gap: 8px; }
.cs-scene.cs-scene-ref { grid-template-columns: minmax(220px, 420px) minmax(0, 1fr); }
.cs-scene-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.cs-ref-frame { margin: 0; display: grid; gap: 4px; min-width: 0; }
.cs-ref-frame figcaption { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.4; display: grid; gap: 2px; }
.cs-ref-frame figcaption .cs-k { margin: 0; }
.cs-ref-frame-img { width: 100%; max-height: 240px; border-radius: 8px; overflow: hidden; background: var(--sunken); border: 1px dashed var(--line-3); }
.cs-ref-frame-img img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.cs-ref-new { padding: 10px; border-radius: 8px; border: 1px dashed var(--accent-line); background: var(--accent-soft); font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; }
.cs-ref-new b { color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .cs-scene.cs-scene-ref { grid-template-columns: minmax(0, 1fr); } }
.cs-sc-link { margin-top: 8px; }
.cs-sc-link .linklike { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); }
.cs-sc-link .ic { width: 12px; height: 12px; }
.cs-sc-box { margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--surface); display: grid; gap: 8px; }
.cs-sc-box .or-actions { margin: 0; flex-wrap: wrap; gap: 8px; }

/* ---- brand profiles, simple shape (task queue #155) ---- */
.cs-b-sw { display: flex; gap: 3px; margin-top: 4px; }
.cs-b-sw i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-2); display: inline-block; }
.cs-b-feels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cs-b-row .or-row-tags, .cs-b-row .cs-b-feels .or-tag { font-size: 10px; }
.cs-b-logo img { object-fit: contain; background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface-2) 0 50%) 0 0 / 10px 10px; }
.cs-b-thsw { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; height: 100%; }
.cs-b-thsw i { display: block; }
.cs-b-peek { margin-top: 8px; display: grid; gap: 4px; }
.cs-b-select { max-width: 420px; }
.cs-b-view { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.cs-b-view > .cs-b-facts:only-child { grid-column: 1 / -1; }
@media (max-width: 640px) { .cs-b-view { grid-template-columns: minmax(0, 1fr); } }
.cs-b-facts { padding: 0; }
.cs-b-logo-big { width: 120px; height: 120px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface-2) 0 50%) 0 0 / 14px 14px; display: grid; place-items: center; }
.cs-b-logo-big img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.cs-b-editbtn { display: inline-flex; align-items: center; gap: 6px; }
.cs-b-editbtn .ic { width: 13px; height: 13px; }
.cs-b-bizname { font-size: var(--fs); font-weight: 560; color: var(--text); }
.cs-b-newbiz { display: inline-flex; align-items: center; gap: 5px; }
.cs-b-newbiz .ic { width: 12px; height: 12px; }
.cs-b-old { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(245, 182, 74, 0.35); background: var(--warn-soft); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.cs-b-old .or-status { flex: none; }
.cs-b-colors { display: grid; gap: 6px; margin-bottom: 8px; }
.cs-b-color { display: flex; align-items: center; gap: 8px; }
.cs-b-picker { flex: none; width: 38px; height: 34px; padding: 2px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; }
.cs-b-hex { flex: none; width: 104px; font-family: var(--mono); font-size: 12px; color: var(--text); }
.cs-b-cname { flex: 1 1 160px; min-width: 0; color: var(--text); }
.cs-b-site { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.cs-b-site .task-input { flex: 1 1 220px; max-width: 360px; color: var(--text); }
.cs-b-reading { margin-top: 8px; }
.cs-b-reading .fd-spin { width: 12px; height: 12px; color: var(--accent-2); }
.cs-b-found { margin-top: 10px; display: grid; gap: 6px; }
.cs-b-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-b-swatch { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px 0 5px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; }
.cs-b-swatch:hover:not(:disabled) { border-color: var(--accent-line); color: var(--text); }
.cs-b-swatch:disabled { cursor: default; opacity: 0.7; }
.cs-b-swatch.added { border-color: rgba(74, 222, 128, 0.4); }
.cs-b-swatch .ic { width: 12px; height: 12px; color: var(--ok); }
.cs-b-feelbox { margin-bottom: 6px; }

/* Task queue #155 follow-up 4: the preview player, more stills per scene,
   the versions of one brief, and the form's "How to make it". */
.cs-pv { position: relative; }
.cs-pv img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.cs-pv-time { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.cs-scene-more { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cs-scene-more img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--sunken); cursor: zoom-in; }
.cs-gv-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cs-gv { display: flex; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised, transparent); }
.cs-gv-me { border-color: var(--accent-line); background: var(--accent-soft); }
.cs-gv-picked .or-row-name { color: var(--ok); }
.cs-gv-media { flex: none; width: 64px; height: 64px; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--sunken); display: grid; place-items: center; color: var(--text-3); cursor: pointer; }
.cs-gv-media:disabled { cursor: default; }
.cs-gv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-gv-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-nver { margin-top: 10px; align-items: center; }
.cs-nver .cs-k { margin-right: 6px; }

/* The effect kit (#155 follow-up 5): the Effects view and a version's kit list. */
.cs-kit-card .cs-ref-media { aspect-ratio: 16 / 9; }
.cs-kit-still { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.cs-kit-used { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-kit-used li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }

/* Task queue #212 follow-up 2: the step strip (brief -> plan -> preview ->
   edit -> render) and the Hyperframes editor inside the Studio tab. */
.cs-pipe { list-style: none; display: flex; gap: 4px; margin: 10px 0 0; padding: 0; counter-reset: pipe; }
.cs-pipe li { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pipe li.cs-pipe-done { color: var(--text-2); border-color: var(--line-2); }
.cs-pipe li.cs-pipe-done span::before { content: "✓ "; color: var(--ok); }
.cs-pipe li.cs-pipe-current { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 600; }
.cs-pipe li.cs-pipe-failed { color: var(--danger); border-color: var(--danger); }
.cs-pipe-small { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cs-pipe-small ol { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.cs-pipe-small li { width: 12px; height: 4px; border-radius: 2px; background: var(--line-2); }
.cs-pipe-small li.cs-pipe-done { background: var(--text-3); }
.cs-pipe-small li.cs-pipe-current { background: var(--accent-2); }
.cs-pipe-small li.cs-pipe-failed { background: var(--danger); }
.cs-pipe-label { font-size: 10.5px; color: var(--text-3); }
.cs-editor { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100vh - 150px); min-height: 520px; }
.cs-editor.hidden { display: none; }
.cs-ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.cs-ed-title { font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.cs-ed-note { font-size: var(--fs-xs); }
.cs-ed-phone { flex-basis: 100%; font-size: var(--fs-xs); color: var(--danger); }
.cs-ed-frame { flex: 1; min-height: 0; background: var(--sunken); }
.cs-ed-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cs-ed-done { margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: var(--fs-sm); }
#studio-panel.cs-editing #studio-new { display: none; }
.cs-ed-away { display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; padding: 24px; text-align: center; }