/* Component styles for the editorial prototype */

.cs-wrap { max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
[data-density="compact"] .cs-wrap { max-width: 1120px; }

/* ——— Header ——— */
.cs-switcher-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper-1); border: 1px solid var(--line-strong);
  border-radius: var(--r-full); padding: 7px 13px; cursor: pointer;
  color: var(--ink-0); transition: all var(--fast) var(--ease);
}
.cs-switcher-btn:hover { border-color: var(--ink-0); }
.cs-switch-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; cursor: pointer; padding: 11px 12px; border-radius: var(--r-md);
  text-align: left; transition: background var(--fast) var(--ease);
}
.cs-switch-item:hover { background: var(--paper-2); }
.cs-switch-no { font-size: 11px; font-weight: 700; color: var(--accent); width: 18px; }
.cs-badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em;
  padding: 2px 6px; border-radius: var(--r-full); background: var(--accent); color: var(--ink-invert);
}

/* ——— slide-over sheet (appearance) ——— */
.cs-scrim { position: fixed; inset: 0; background: rgba(20,15,10,.42); z-index: 60; transition: opacity var(--base) var(--ease); backdrop-filter: blur(2px); }
[data-theme="dark"] .cs-scrim { background: rgba(0,0,0,.6); }
.cs-sheet {
  position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 92vw; z-index: 61;
  background: var(--paper-1); border-left: 1px solid var(--line);
  box-shadow: var(--sh-lg); display: flex; flex-direction: column;
  transition: transform var(--base) var(--ease);
}
.cs-sec-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.cs-pal { display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--paper-1); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 13px; cursor: pointer; transition: all var(--fast) var(--ease); }
.cs-pal:hover { border-color: var(--ink-2); }
.cs-font { display: flex; align-items: center; gap: 14px; background: var(--paper-1);
  border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; cursor: pointer;
  transition: all var(--fast) var(--ease); }
.cs-font:hover { border-color: var(--ink-2); }

/* ——— Director chat dock ——— */
.cs-chat {
  position: fixed; top: 92px; right: 18px; bottom: 18px; width: 384px; max-width: calc(100vw - 36px);
  z-index: 50; background: var(--paper-1); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg); display: flex; flex-direction: column;
  overflow: hidden; transition: transform var(--slow) var(--ease);
}
.cs-director-avatar {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent); color: var(--ink-invert);
}

/* ——— Home: mode index grid ——— */
.cs-modes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-mode-card {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 18px 18px; min-height: 232px; transition: all var(--base) var(--ease);
}
.cs-mode-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
.cs-mode-icon { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); }
.cs-mode-cta { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--accent); transition: gap var(--fast) var(--ease); }
.cs-mode-card:hover .cs-mode-cta { gap: 12px; }

.cs-recent { text-align: left; background: none; border: 0; cursor: pointer; padding: 0; }
.cs-recent:hover .mono { color: var(--accent); }

/* ——— Storyboard board ——— */
.cs-shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-shot { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: all var(--base) var(--ease); }
.cs-shot:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.cs-shot-no { position: absolute; top: 10px; left: 12px; font-size: 30px; font-weight: 800;
  color: #fff; line-height: 1; text-shadow: 0 2px 14px rgba(0,0,0,.5); letter-spacing: -.02em; }
.cs-shot-osd { position: absolute; bottom: 10px; left: 12px; font-size: 10px; letter-spacing: .08em;
  background: rgba(20,15,10,.78); color: #fff; padding: 3px 8px; border-radius: var(--r-sm); }
.cs-shot-dur { position: absolute; top: 12px; right: 12px; font-size: 10px;
  background: var(--paper-1); color: var(--ink-1); padding: 3px 8px; border-radius: var(--r-full);
  border: 1px solid var(--line); }
.cs-shot-rows { margin-top: 13px; display: flex; flex-direction: column; gap: 11px; }
.cs-shot-rows p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-1); }
.cs-shot-lbl { font-size: 9px; letter-spacing: .14em; color: var(--ink-3); }
.cs-add-shot { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 220px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  background: transparent; color: var(--ink-2); cursor: pointer; transition: all var(--fast) var(--ease); }
.cs-add-shot:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* timeline */
.cs-tl-row { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.cs-tl-rail { position: relative; display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; }
.cs-tl-no { font-size: 18px; font-weight: 800; color: var(--accent); }
.cs-tl-line { position: absolute; top: 26px; bottom: -36px; width: 2px; background: var(--line); }
.cs-tl-thumb { width: 168px; flex-shrink: 0; }

/* ——— Branding gallery ——— */
.cs-poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cs-poster { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; cursor: pointer; transition: all var(--base) var(--ease); }
.cs-poster:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
.cs-poster-v { position: absolute; bottom: 10px; right: 10px; font-size: 10px;
  background: rgba(20,15,10,.78); color: #fff; padding: 3px 8px; border-radius: var(--r-full); }
.cs-poster-live { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
  background: var(--paper-1); border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); }

/* ——— Branding canvas ——— */
.cs-canvas-bar { display: flex; align-items: center; gap: 8px; padding: 12px 20px;
  border-bottom: 1px solid var(--line); background: var(--paper-0); flex-wrap: wrap; }
.cs-canvas-title { display: flex; align-items: center; }
.cs-canvas-add { display: flex; gap: 4px; }
.cs-zoom { display: inline-flex; align-items: center; background: var(--paper-1);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); overflow: hidden; }
.cs-zoom button { border: 0; background: transparent; cursor: pointer; height: 32px; padding: 0 11px;
  font-size: 15px; color: var(--ink-1); font-family: var(--font-mono); }
.cs-zoom button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.cs-canvas-vp { position: relative; flex: 1; overflow: hidden; background: var(--paper-2);
  cursor: grab; user-select: none; }
.cs-canvas-vp:active { cursor: grabbing; }
.cs-canvas-vp.grid {
  background-image: radial-gradient(var(--line-strong) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
}
.cs-canvas-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: var(--ink-2); background: var(--paper-1); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: var(--r-full); box-shadow: var(--sh-sm); pointer-events: none; white-space: nowrap; }
.cs-node-v { position: absolute; top: 9px; left: 9px; font-size: 10px; background: rgba(20,15,10,.78);
  color: #fff; padding: 2px 8px; border-radius: var(--r-full); }
.cs-node-active { position: absolute; top: 9px; right: 9px; font-size: 9px; letter-spacing: .08em;
  background: var(--accent); color: var(--ink-invert); padding: 2px 7px; border-radius: var(--r-sm); }
.cs-node-mode { position: absolute; bottom: 9px; left: 9px; font-size: 9px; text-transform: uppercase;
  background: var(--paper-1); color: var(--ink-1); padding: 2px 7px; border-radius: var(--r-sm); border: 1px solid var(--line); }

/* ——— Slide Studio ——— */
.cs-slide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-slide-card { text-align: left; background: var(--paper-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer; padding: 0; transition: all var(--base) var(--ease); }
.cs-slide-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--accent); }
.cs-slide-thumb { aspect-ratio: 16/9; border-bottom: 1px solid var(--line); overflow: hidden; }
.cs-slide-meta { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.cs-sr { width: 100%; height: 100%; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; background: var(--paper-1); }

/* ——— Motion Studio ——— */
.cs-pipeline { display: flex; align-items: center; gap: 18px; padding: 16px 18px; margin-top: 22px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); flex-wrap: wrap; }
.cs-stage { display: flex; align-items: center; gap: 8px; }
.cs-stage-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: #fff; }
.cs-stage[data-state="done"] .cs-stage-dot { background: var(--accent); border-color: var(--accent); }
.cs-stage[data-state="running"] .cs-stage-dot { border-color: var(--accent); }
.cs-stage-link { flex: 1; min-width: 30px; height: 2px; background: var(--line-strong); }
.cs-stage-link[data-on="true"] { background: var(--accent); }
.cs-clip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.cs-clip { text-align: left; background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; padding: 0; transition: all var(--base) var(--ease); }
.cs-clip:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--accent); }
.cs-clip-play { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-1); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--accent); box-shadow: var(--sh-sm); }
.cs-clip-dur { position: absolute; bottom: 9px; right: 9px; font-size: 10px; background: rgba(20,15,10,.78);
  color: #fff; padding: 2px 8px; border-radius: var(--r-full); }
.cs-clip-prog { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(20,15,10,.15); }
.cs-clip-prog > div { height: 100%; background: var(--accent); }

/* ——— Lightbox + Present overlay ——— */
.cs-lb, .cs-present { position: fixed; inset: 0; z-index: 70; background: rgba(12,9,6,.92);
  backdrop-filter: blur(6px); display: flex; flex-direction: column; }
[data-theme="dark"] .cs-lb, [data-theme="dark"] .cs-present { background: rgba(0,0,0,.95); }
.cs-lb-bar, .cs-present-top { display: flex; align-items: center; gap: 14px; padding: 18px 24px; }
.cs-lb-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.cs-lb-x:hover { background: rgba(255,255,255,.18); }
.cs-lb-stage, .cs-present-stage { flex: 1; position: relative; display: grid; place-items: center; padding: 0 80px; min-height: 0; }
.cs-lb-frame { max-height: 100%; max-width: 1100px; width: 100%; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.cs-lb-stripe { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #2a241c 0 12px, #211c15 12px 24px); }
.cs-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: all var(--fast); }
.cs-lb-nav:hover:not(:disabled) { background: var(--accent); border-color: transparent; }
.cs-lb-nav:disabled { opacity: .25; cursor: default; }
.cs-lb-foot { display: flex; align-items: center; gap: 14px; padding: 16px 24px; }
.cs-lb-thumb { height: 52px; border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer;
  background: repeating-linear-gradient(135deg, #2a241c 0 8px, #211c15 8px 16px); display: grid; place-items: center; flex-shrink: 0; }
.cs-present-slide { width: 100%; max-width: 1180px; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); background: var(--paper-1); }
.cs-present-slide .cs-sr { padding: 6%; gap: 1%; }
.cs-present-dots { display: flex; gap: 8px; justify-content: center; padding: 20px; }

/* ——— present banner on home ——— */
.cs-present-banner { display: flex; align-items: center; gap: 20px; width: 100%; margin-top: 16px;
  background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px;
  cursor: pointer; transition: all var(--base) var(--ease); }
.cs-present-banner:hover { border-color: var(--accent); box-shadow: var(--sh-md); transform: translateY(-2px); }
.cs-present-banner:hover .cs-mode-cta { gap: 12px; }
.cs-present-icon { width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.cs-special-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cs-special-row .cs-present-banner { margin-top: 0; }

/* ——— Sequence Studio ——— */
.cs-seq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cs-seq-card { text-align: left; background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; cursor: pointer; padding: 0; transition: all var(--base) var(--ease); }
.cs-seq-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
.cs-spread-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.cs-spread { display: flex; flex-direction: column; }
.cs-seqp-frame { aspect-ratio: 3/4; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  box-shadow: var(--sh-sm); background: var(--paper-1); transition: all var(--base) var(--ease); }
.cs-spread:hover .cs-seqp-frame { box-shadow: var(--sh-md); transform: translateY(-2px); }
.cs-seqp { width: 100%; height: 100%; padding: 14px; display: flex; flex-direction: column; background: var(--paper-1); }

/* ——— density + corners modifiers ——— */
[data-density="compact"] .cs-mode-card { padding: 15px 14px; min-height: 200px; }
[data-density="compact"] .cs-shot-rows { gap: 8px; }
[data-density="compact"] .cs-shot-grid,
[data-density="compact"] .cs-poster-grid { gap: 12px; }

/* ——— Wave 1: generating · library · outline · building ——— */
.cs-gen-icon { width: 84px; height: 84px; border-radius: var(--r-xl); margin: 0 auto; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); animation: pulseDot 1.6s ease-in-out infinite; }
.cs-gen-track { height: 6px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.cs-gen-track > div { height: 100%; background: var(--accent); transition: width .5s var(--ease); }
.cs-gen-steps { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin-left: auto; margin-right: auto; }
.cs-gen-step { display: flex; align-items: center; gap: 12px; }
.cs-gen-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  border: 1.5px solid var(--line-strong); color: #fff; }
.cs-gen-step[data-state="done"] .cs-gen-dot { background: var(--accent); border-color: var(--accent); }
.cs-gen-step[data-state="now"] .cs-gen-dot { border-color: var(--accent); }

.cs-lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-lib-card { text-align: left; background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; padding: 0; transition: all var(--base) var(--ease); }
.cs-lib-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--accent); }
.cs-lib-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 180px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: transparent;
  color: var(--ink-2); cursor: pointer; transition: all var(--fast) var(--ease); }
.cs-lib-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.cs-ol-row { display: flex; gap: 16px; align-items: flex-start; background: var(--paper-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; }
.cs-ol-no { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; width: 38px; flex-shrink: 0; }
.cs-ol-title { width: 100%; border: 0; background: transparent; font-family: var(--font-display); font-size: 18px;
  font-weight: 700; color: var(--ink-0); padding: 2px 0; }
.cs-ol-title:focus { outline: none; }
.cs-ol-body { width: 100%; border: 0; background: transparent; resize: none; font-family: var(--font-ui);
  font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.cs-ol-body:focus { outline: none; }
.cs-ol-add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px;
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: transparent; color: var(--ink-2);
  cursor: pointer; font-weight: 600; font-size: 14px; transition: all var(--fast) var(--ease); }
.cs-ol-add:hover { border-color: var(--accent); color: var(--accent); }

/* ——— Wave 2: poster detail · slide editor · master board ——— */
.cs-vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-vcard { position: relative; background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; cursor: pointer; transition: all var(--base) var(--ease); }
.cs-vcard:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.cs-vcard[data-active="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.cs-vbadge { position: absolute; top: 8px; left: 8px; font-size: 10px; background: rgba(20,15,10,.78); color: #fff;
  padding: 2px 8px; border-radius: var(--r-full); }
.cs-vtags { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }

.cs-edit-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cs-edit-stage { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.cs-edit-slide { aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-md); background: var(--paper-1); }
.cs-edit-field { margin-bottom: 18px; }
.cs-edit-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 7px; display: block; }
.cs-filmstrip { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; }
.cs-film { flex-shrink: 0; width: 116px; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; }
.cs-film[data-active="true"] { border-color: var(--accent); }

.cs-mb { background: #1c1813; border-radius: var(--r-lg); padding: 40px; color: #efe7d6; }
[data-theme="dark"] .cs-mb { background: #0c0a08; border: 1px solid var(--line); }
.cs-mb-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid rgba(239,231,214,.25);
  padding-bottom: 18px; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.cs-mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(239,231,214,.2); border: 1px solid rgba(239,231,214,.2); }
.cs-mb-cell { background: #1c1813; padding: 14px; }
[data-theme="dark"] .cs-mb-cell { background: #0c0a08; }
.cs-mb-num { width: 30px; height: 30px; background: #efe7d6; color: #1c1813; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.cs-mb-row { display: flex; gap: 8px; font-size: 11px; line-height: 1.4; padding: 3px 0; border-top: 1px solid rgba(239,231,214,.12); }
.cs-mb-row b { color: #cdbfa0; min-width: 64px; flex-shrink: 0; font-weight: 600; }

/* ——— responsive ——— */
@media (max-width: 1080px) {
  .cs-modes-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-poster-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-clip-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-slide-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-lib-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-vgrid { grid-template-columns: repeat(3, 1fr); }
  .cs-mb-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-seq-grid, .cs-spread-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .cs-wrap { padding-left: 16px; padding-right: 16px; }
  .cs-shot-grid { grid-template-columns: 1fr; }
  .cs-modes-grid, .cs-poster-grid { grid-template-columns: 1fr 1fr; }
  .cs-clip-grid, .cs-slide-grid { grid-template-columns: 1fr; }
  .cs-lib-grid, .cs-vgrid { grid-template-columns: 1fr 1fr; }
  .cs-edit-wrap { grid-template-columns: 1fr; }
  .cs-mb-grid { grid-template-columns: 1fr; }
  .cs-seq-grid, .cs-spread-grid { grid-template-columns: 1fr 1fr; }
  .cs-special-row { grid-template-columns: 1fr; }
  .cs-present-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cs-chat { left: 12px; right: 12px; width: auto; top: auto; height: 72vh; }
  .cs-tl-thumb { width: 120px; }
}