/* =============================================================== 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; }

/* 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; }

/* ---- 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 { 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); }
.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; }