/* Grok Imagine inspired workspace redesign. Functional DOM and action order stay intact. */
:root {
  --grok-bg: #090b10;
  --grok-surface: #0d1118;
  --grok-surface-2: #121722;
  --grok-surface-3: #171d29;
  --grok-line: #242b38;
  --grok-line-strong: #30394a;
  --grok-text: #f5f7fb;
  --grok-muted: #8f9aab;
  --grok-dim: #667286;
  --grok-purple: #8b72ff;
  --grok-purple-strong: #7258e8;
  --grok-teal: #47d8c8;
  --grok-green: #9fe870;
  --grok-danger: #ff8e9a;
}

html, body, .app { background: var(--grok-bg) !important; color: var(--grok-text) !important; }
body { font-family: Inter, "Microsoft YaHei", "Segoe UI", system-ui, sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; }
button, input, textarea, select { font-family: inherit !important; }

/* Top chrome: quiet and almost editorial, with the project controls kept inline. */
.topbar {
  min-height: 62px !important; height: 62px !important; padding: 0 24px !important;
  background: rgba(9, 11, 16, .96) !important; border-bottom: 1px solid var(--grok-line) !important;
  box-shadow: none !important;
}
.topbar .brand-mini { gap: 10px !important; color: var(--grok-text) !important; font-size: 14px !important; font-weight: 750 !important; }
.topbar .brand-mini .site-logo { width: 30px !important; height: 30px !important; border: 1px solid #343b50 !important; border-radius: 9px !important; background: #121522 !important; box-shadow: none !important; }
.topbar-tools { gap: 8px !important; }
.topbar-tools > .btn, .auth-card .btn { min-height: 32px !important; padding: 6px 12px !important; border-radius: 8px !important; font-size: 11px !important; }
.topbar-tools > a.btn { color: #c8d0dd !important; background: transparent !important; border-color: transparent !important; }
.topbar-tools > a.btn:hover { color: #fff !important; background: #151a25 !important; border-color: var(--grok-line) !important; }
.auth-card { gap: 7px !important; }
.auth-card input, .auth-card select { height: 32px !important; min-width: 102px !important; padding: 0 10px !important; border: 1px solid var(--grok-line-strong) !important; border-radius: 8px !important; background: #111620 !important; color: var(--grok-text) !important; }
.auth-card .btn.primary { background: var(--grok-purple) !important; border-color: var(--grok-purple) !important; box-shadow: none !important; }
.auth-card.signed strong { color: #fff !important; font-size: 12px !important; }
.auth-card .tiny { color: var(--grok-dim) !important; font-size: 10px !important; }

/* Project controls now read as topbar metadata, not a sidebar card. */
.topbar-project-management {
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin-left: 18px !important; padding: 0 !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
.topbar-project-management .project-row { display: contents !important; }
.topbar-project-management .project-row input, .topbar-project-management .project-select {
  height: 32px !important; margin: 0 !important; padding: 0 10px !important;
  background: #111620 !important; border: 1px solid var(--grok-line) !important; border-radius: 8px !important;
  color: var(--grok-text) !important; font-size: 11px !important;
}
.topbar-project-management .project-row input { width: 150px !important; font-weight: 700 !important; }
.topbar-project-management > .project-select { width: 130px !important; }
.topbar-project-management .side-actions { display: flex !important; gap: 5px !important; }
.topbar-project-management .side-actions .btn { min-height: 32px !important; padding: 6px 10px !important; border-radius: 7px !important; background: transparent !important; border-color: var(--grok-line) !important; color: #aeb8c8 !important; font-size: 11px !important; }
.topbar-project-management .side-actions .btn.primary { background: #211b45 !important; border-color: #6654c6 !important; color: #dcd6ff !important; }
.topbar-project-management .autosave, .topbar-project-management .hint { display: none !important; }

/* Open two-column workspace, with a slim command rail on the left. */
.layout { grid-template-columns: minmax(236px, 268px) 8px minmax(0, 1fr) !important; min-height: calc(100vh - 62px) !important; background: var(--grok-bg) !important; }
.sidebar { top: 62px !important; height: calc(100vh - 62px) !important; background: #0b0e14 !important; border-right: 1px solid var(--grok-line) !important; }
.layout-resizer { width: 8px !important; background: var(--grok-bg) !important; }
.layout-resizer::after { left: 3px !important; width: 2px !important; background: #262d3b !important; }
.layout-resizer:hover::after, .layout-resizer:focus-visible::after { background: var(--grok-purple) !important; }
.workspace-nav { padding: 18px 12px 16px !important; border-bottom: 1px solid var(--grok-line) !important; background: transparent !important; }
.workspace-nav-label { margin: 0 11px 9px !important; color: #677286 !important; font-size: 10px !important; font-weight: 750 !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
.workspace-nav-item, .workspace-nav-item:hover, .workspace-nav-item.active {
  min-height: 38px !important; margin: 2px 0 !important; padding: 8px 12px !important;
  border: 0 !important; border-left: 2px solid transparent !important; border-radius: 6px !important;
  background: transparent !important; color: #b4becd !important; -webkit-text-fill-color: #b4becd !important;
  font-size: 12px !important; font-weight: 650 !important; transform: none !important; box-shadow: none !important;
}
.workspace-nav-item:hover { background: #141a24 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.workspace-nav-item.active { background: #211b3f !important; border-left-color: var(--grok-purple) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.workspace-nav-item::before, .workspace-nav-item::after, .workspace-nav-dot { display: none !important; }
.sidebar > .side-section:not(.project-management) {
  margin: 0 !important; padding: 16px 16px 18px !important;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--grok-line) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.sidebar > .side-section:not(.project-management) .section-title { margin-bottom: 10px !important; color: #dce2ec !important; font-size: 12px !important; font-weight: 700 !important; }
.server-item { padding: 9px !important; background: #10151e !important; border: 1px solid var(--grok-line) !important; border-radius: 8px !important; }
.server-item.active { background: #17162a !important; border-color: #5f50b4 !important; box-shadow: inset 2px 0 0 var(--grok-purple) !important; }
.server-actions .icon-btn { min-height: 28px !important; padding: 5px 7px !important; border-radius: 6px !important; background: transparent !important; border: 1px solid var(--grok-line) !important; color: #9da8b9 !important; }
.ratio-grid { gap: 5px !important; }
.ratio { min-height: 58px !important; padding: 5px 2px !important; background: #10151e !important; border: 1px solid var(--grok-line) !important; border-radius: 8px !important; color: #a8b2c2 !important; font-size: 10px !important; }
.ratio.active { background: #211b3f !important; border-color: var(--grok-purple) !important; color: #ddd8ff !important; box-shadow: 0 0 0 2px rgba(139,114,255,.12) !important; }
.script-import textarea, .side-section textarea { min-height: 148px !important; padding: 12px !important; background: #0d121a !important; border: 1px solid var(--grok-line-strong) !important; border-radius: 10px !important; color: #edf1f7 !important; font-size: 12px !important; }

/* Main surface: remove the old framed dashboard feeling. */
.main { min-width: 0 !important; padding: 26px 32px 64px !important; background: var(--grok-bg) !important; }
.main-head { min-height: 42px !important; margin-bottom: 16px !important; padding-bottom: 15px !important; border-bottom: 1px solid var(--grok-line) !important; }
.main-head h1 { color: #f8f9fc !important; font-size: 21px !important; font-weight: 750 !important; letter-spacing: 0 !important; }
.main-head p { color: var(--grok-muted) !important; font-size: 11px !important; }
.top-tools { gap: 7px !important; }
.top-tools .btn { min-height: 34px !important; padding: 7px 11px !important; border-radius: 8px !important; font-size: 11px !important; }
.top-tools .btn.primary { background: var(--grok-purple) !important; border-color: var(--grok-purple) !important; box-shadow: none !important; }
.settings { display: flex !important; gap: 18px !important; margin: 0 0 20px !important; padding: 0 0 16px !important; border-bottom: 1px solid var(--grok-line) !important; }
.setting-card { min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.setting-card span { display: inline !important; margin-right: 7px !important; color: var(--grok-muted) !important; font-size: 11px !important; }
.setting-card strong { display: inline !important; margin: 0 !important; color: #fff !important; font-size: 16px !important; font-weight: 750 !important; }
.setting-card:nth-child(2) strong { color: var(--grok-green) !important; }
.setting-card:nth-child(3) strong { color: var(--grok-purple) !important; }

/* Every storyboard becomes an open working row instead of a card. */
.shot-list { display: block !important; }
.shot {
  position: relative !important; overflow: visible !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--grok-line) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.shot:first-child { border-top-color: transparent !important; }
.shot.active-shot { border-color: var(--grok-line) !important; box-shadow: none !important; }
.shot-head { min-height: 48px !important; padding: 10px 0 !important; background: transparent !important; border-bottom: 0 !important; }
.shot-heading { gap: 8px !important; }
.shot-heading .shot-title { color: #f3f6fb !important; font-size: 14px !important; font-weight: 750 !important; }
.shot-heading .shot-meta { color: var(--grok-muted) !important; font-size: 11px !important; }
.shot-actions { gap: 6px !important; }
.shot-actions .btn { min-height: 30px !important; padding: 6px 10px !important; border-radius: 7px !important; font-size: 10px !important; }
.shot-actions .shot-copy { background: transparent !important; border-color: var(--grok-line) !important; color: #aeb8c8 !important; }
.shot-actions .shot-delete { background: transparent !important; border-color: #59323c !important; color: var(--grok-danger) !important; }
.shot-body { display: grid !important; grid-template-columns: minmax(300px, var(--shot-split, 50%)) 18px minmax(360px, 1fr) !important; gap: 0 !important; padding: 0 0 26px !important; background: transparent !important; }
.shot-panel, .script-pane, .video-pane.shot-panel { min-width: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.shot-split-resizer { width: 18px !important; min-width: 18px !important; background: transparent !important; }
.shot-split-resizer::after { left: 8px !important; width: 1px !important; background: var(--grok-line) !important; }
.shot-split-resizer:hover::after { left: 7px !important; width: 3px !important; background: var(--grok-purple) !important; }
.panel-content { padding: 0 16px 0 0 !important; }
.video-pane .panel-content { padding: 0 0 0 16px !important; }
.script-pane textarea { min-height: 158px !important; padding: 14px !important; background: #0d121a !important; border: 1px solid var(--grok-line-strong) !important; border-radius: 12px !important; color: #f1f4f9 !important; font-size: 12px !important; line-height: 1.65 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; }
.script-pane textarea:focus { border-color: var(--grok-purple) !important; box-shadow: 0 0 0 3px rgba(139,114,255,.14) !important; }
.script-actions { display: none !important; }
.status { min-height: 0 !important; margin-top: 10px !important; padding: 4px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--grok-muted) !important; font-size: 10px !important; }
.status.ok { color: var(--grok-green) !important; }
.status.error { color: var(--grok-danger) !important; }

/* Reference assets are a loose media rail, not a nested panel. */
.asset-area { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid var(--grok-line) !important; }
.asset-group-title { margin: 0 0 8px !important; color: #aab5c5 !important; font-size: 10px !important; letter-spacing: .02em !important; }
.asset-area .media-slot-row { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 7px !important; padding: 0 !important; }
.asset-area .media-slot-row .slot-wrap { width: 58px !important; min-width: 58px !important; max-width: 58px !important; }
.asset-area .media-slot-row .tile { width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; background: #0d121a !important; border: 1px dashed #3b4657 !important; border-radius: 9px !important; }
.asset-area .media-slot-row .slot-name { color: #7f8a9c !important; font-size: 9px !important; }
.asset-area .media-slot-row .file-name, .asset-area .media-slot-row .slot-alias { color: #687488 !important; font-size: 9px !important; }
.asset-area .media-slot-row .clear-asset { background: #252d3b !important; border: 1px solid #414c5d !important; }
.asset-library-after-slots { margin-left: 2px !important; padding-top: 17px !important; gap: 6px !important; }
.asset-library-after-slots .btn { min-height: 32px !important; padding: 6px 10px !important; border-radius: 7px !important; font-size: 10px !important; }
.asset-library-after-slots .asset-library-trigger { color: #d8d0ff !important; background: #211b3f !important; border-color: #6553bd !important; }
.asset-library-after-slots .generate-btn { color: #fff !important; background: var(--grok-purple) !important; border-color: var(--grok-purple) !important; box-shadow: none !important; }

/* Controls are spread into a command rail below assets, preserving order. */
.shot-generation-row {
  display: flex !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  background: transparent !important;
  border-top: 1px solid var(--grok-line) !important;
  overflow: visible !important;
}
.shot-generation-row.shot-action-row { display: flex !important; }
.shot-generation-row > .generation-preference, .shot-generation-row > .duration { display: flex !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; margin: 0 !important; }
.shot-generation-row > .generation-preference span, .shot-generation-row > .duration .duration-label { color: var(--grok-muted) !important; font-size: 10px !important; white-space: nowrap !important; }
.shot-generation-row select, .template-menu-trigger { height: 32px !important; min-height: 32px !important; padding: 0 8px !important; background: #111620 !important; border: 1px solid var(--grok-line-strong) !important; border-radius: 7px !important; color: #eef2f7 !important; font-size: 10px !important; }
.shot-generation-row .template-picker-wrap { width: 100% !important; }
.shot-generation-row .template-menu-trigger { width: 100% !important; text-align: left !important; }
.shot-generation-row > .btn { min-height: 32px !important; padding: 6px 10px !important; border-radius: 7px !important; white-space: nowrap !important; font-size: 10px !important; }
.shot-generation-row > .btn[data-action="optimize-h3"] { background: #1b2140 !important; border-color: #514a94 !important; color: #d8d1ff !important; }
.shot-generation-row > .btn[data-action="auto-match-library"] { background: #132a2a !important; border-color: #2e7776 !important; color: #b9fff6 !important; }
.shot-generation-row > .btn[data-action="match-reference-content"] { background: #25202f !important; border-color: #674e86 !important; color: #ebd8ff !important; }
.shot-generation-row > .btn {
  flex: 0 1 auto !important;
  min-width: max-content !important;
  min-height: 32px !important;
  padding: 6px 11px !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}
.shot-generation-row > [data-action="optimize-h3"] { background: #1b2140 !important; border-color: #514a94 !important; color: #d8d1ff !important; }
.shot-generation-row > [data-action="auto-match-library"] { background: #132a2a !important; border-color: #2e7776 !important; color: #b9fff6 !important; }
.shot-generation-row > [data-action="match-reference-content"] { background: #25202f !important; border-color: #674e86 !important; color: #ebd8ff !important; }

/* The rail is intentionally independent from the preference grid. */
.shot .asset-area > .shot-generation-row,
.shot .asset-area > .shot-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Keep the two asset actions just wider than their labels. */
.shot .asset-area .media-slot-row .asset-library-after-slots .asset-library-slot-action {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 8px 14px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.template-menu { background: #151b26 !important; border-color: var(--grok-line-strong) !important; box-shadow: 0 18px 44px rgba(0,0,0,.45) !important; }
.template-menu-item:hover, .template-menu-add:hover, .template-menu-item.is-selected { background: #262044 !important; }

/* Preview is the only framed tool surface; its controls float beneath it. */
.video-pane .preview-box { aspect-ratio: 16 / 9 !important; min-height: 0 !important; height: auto !important; background: #05070b !important; border: 1px solid #343e50 !important; border-radius: 14px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important; }
.video-pane .preview-box video, .video-pane .preview-box img { background: #05070b !important; }
.preview-empty strong { color: #e4e8ef !important; font-size: 14px !important; }
.preview-empty small { color: var(--grok-dim) !important; font-size: 10px !important; }
.preview-camera { color: #606b7e !important; font-size: 24px !important; }
.video-controls { display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 10px !important; }
.video-controls .duration { margin-right: auto !important; }
.video-controls .duration-label { color: var(--grok-muted) !important; font-size: 10px !important; }
.video-controls .duration select, .video-controls .btn { min-height: 32px !important; border-radius: 7px !important; font-size: 10px !important; }
.video-controls .duration select { width: 58px !important; min-width: 58px !important; background: #111620 !important; border-color: var(--grok-line-strong) !important; color: #f5f7fb !important; }
.video-controls .generate-btn { background: var(--grok-purple) !important; border-color: var(--grok-purple) !important; color: #fff !important; box-shadow: none !important; }
.video-controls .video-secondary-btn { background: transparent !important; border-color: var(--grok-line) !important; color: #9da8b9 !important; }
.progress-line { margin-top: 10px !important; color: var(--grok-dim) !important; font-size: 10px !important; }
.progress-line b { color: #c7bcff !important; }
.bar { height: 3px !important; margin-top: 5px !important; background: #1b222e !important; }
.bar i { background: var(--grok-purple) !important; }
.video-ratio-badge, .video-history-label { top: 9px !important; left: 9px !important; background: rgba(8,10,15,.82) !important; border: 1px solid #30394a !important; color: #d8ddea !important; border-radius: 6px !important; font-size: 10px !important; }

.toast { right: 20px !important; bottom: 20px !important; background: #eef1f7 !important; color: #161923 !important; border-radius: 8px !important; }

@media (max-width: 1100px) {
  .topbar-project-management { display: none !important; }
  .main { padding: 22px 22px 54px !important; }
  .shot-body { grid-template-columns: 1fr !important; gap: 18px !important; }
  .shot-split-resizer { display: none !important; }
  .panel-content, .video-pane .panel-content { padding: 0 !important; }
  .shot-generation-row { grid-template-columns: minmax(170px, 1fr) 86px 86px 74px repeat(3, max-content) !important; }
}
@media (max-width: 760px) {
  .topbar { height: auto !important; min-height: 62px !important; padding: 10px 14px !important; align-items: flex-start !important; flex-direction: column !important; }
  .topbar-tools { width: 100% !important; flex-wrap: wrap !important; }
  .topbar-tools > a.btn { flex: 1 1 0 !important; }
  .layout { display: block !important; }
  .sidebar { position: static !important; height: auto !important; border-right: 0 !important; border-bottom: 1px solid var(--grok-line) !important; }
  .main { padding: 16px 14px 36px !important; }
  .main-head { display: grid !important; gap: 10px !important; }
  .settings { gap: 12px !important; flex-wrap: wrap !important; }
  .shot-head { align-items: flex-start !important; flex-wrap: wrap !important; }
  .shot-actions { width: 100% !important; margin-left: 0 !important; }
  .shot-actions .btn { flex: 1 1 0 !important; }
  .shot-generation-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; }
  .shot-generation-row > .template-picker-wrap, .shot-generation-row > .generation-preference, .shot-generation-row > .duration, .shot-generation-row > .btn { grid-column: 1 / -1 !important; width: 100% !important; }
  .shot-generation-row { gap: 6px !important; }
  .shot-generation-row > .btn { flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; }
  .video-controls { flex-wrap: wrap !important; }
  .video-controls .duration { flex: 1 1 100% !important; margin-right: 0 !important; }
  .video-controls .duration select { flex: 1 !important; width: auto !important; }
  .video-controls .btn { flex: 1 1 0 !important; }
}

/* Reference layout: the red-box content is one cohesive left-side unit. */
.shot-body {
  grid-template-columns: minmax(0, var(--shot-split, 50%)) 18px minmax(360px, 1fr) !important;
  align-items: start !important;
}
.shot-body > .script-pane {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
.shot-body > .shot-split-resizer {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.shot-body > .video-pane {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
.script-pane > .panel-content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.script-pane .asset-area {
  order: 2 !important;
}
.script-pane .shot-generation-row,
.script-pane .shot-action-row {
  order: 3 !important;
}
.script-pane .shot-generation-row.shot-action-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow: visible !important;
}
.script-pane .shot-generation-row.shot-action-row > .shot-generation-template {
  flex: 0 1 170px !important;
  width: 170px !important;
  min-width: 150px !important;
  max-width: 190px !important;
}
.script-pane .shot-generation-row.shot-action-row > .generation-preference,
.script-pane .shot-generation-row.shot-action-row > .duration {
  flex: 0 0 auto !important;
  width: auto !important;
}
.script-pane .shot-generation-row.shot-action-row > .generation-preference select,
.script-pane .shot-generation-row.shot-action-row > .duration select {
  width: auto !important;
  min-width: 0 !important;
}
.script-pane .shot-generation-row.shot-action-row > .shot-generation-action,
.script-pane .shot-generation-row.shot-action-row > .btn {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
.script-pane .status {
  order: 4 !important;
}
.script-pane .shot-generation-row {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--grok-line) !important;
}
.script-pane .shot-action-row {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 0 !important;
}
.script-pane .shot-generation-row > .generation-preference,
.script-pane .shot-generation-row > .duration {
  flex: 0 1 auto !important;
}
.script-pane .shot-action-row > .shot-generation-template {
  flex: 1 1 180px !important;
  min-width: 160px !important;
  max-width: none !important;
}
.script-pane .shot-action-row > .shot-generation-action,
.script-pane .shot-action-row > .btn {
  flex: 0 1 auto !important;
}
.asset-area .media-slot-row {
  align-items: flex-start !important;
}
.asset-area .media-slot-row .asset-library-after-slots {
  margin-left: auto !important;
  padding-top: 17px !important;
}
@media (max-width: 1100px) {
  .shot-body { grid-template-columns: 1fr !important; gap: 18px !important; }
  .shot-body > .script-pane,
  .shot-body > .shot-split-resizer,
  .shot-body > .video-pane { grid-column: 1 !important; grid-row: auto !important; }
  .shot-body > .shot-split-resizer { display: none !important; }
}
@media (max-width: 760px) {
  .script-pane .shot-generation-row,
  .script-pane .shot-action-row { align-items: stretch !important; }
  .script-pane .shot-generation-row.shot-action-row { flex-wrap: wrap !important; }
  .script-pane .shot-generation-row > .generation-preference,
  .script-pane .shot-generation-row > .duration,
  .script-pane .shot-action-row > .shot-generation-template,
  .script-pane .shot-action-row > .shot-generation-action,
  .script-pane .shot-action-row > .btn { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
  .asset-area .media-slot-row .asset-library-after-slots { flex-basis: 100% !important; margin-left: 0 !important; }
}