/* Professional editing timeline */
.audio-timeline {
  padding: 12px 14px 10px;
  background: #080b11;
  border-color: #232a37;
}
.audio-timeline-head {
  min-height: 32px;
  margin-bottom: 4px;
}
.audio-timeline-head strong {
  color: #b8c0cf;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.audio-timeline-legend {
  display: none;
}
.audio-timeline svg {
  min-height: 0;
  aspect-ratio: 1200/188;
}
.audio-timeline .timeline-grid {
  stroke: #7b849314;
  stroke-width: 1;
}
.audio-timeline .timeline-ruler-tick {
  stroke: #8b95a52c;
  stroke-width: 1;
}
.audio-timeline .timeline-axis-label {
  fill: #758094;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.audio-timeline .timeline-lane-label {
  fill: #657084;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.audio-timeline .timeline-lane-rule {
  stroke: #80899a18;
  stroke-width: 1;
}
.audio-timeline .timeline-area {
  fill: #71809612;
}
.audio-timeline .timeline-line {
  stroke: #8b99ad;
  stroke-width: 1.35;
  opacity: 0.78;
}
.audio-timeline .timeline-change {
  stroke: #d6a15c;
  stroke-width: 1;
  stroke-dasharray: none;
  stroke-linecap: butt;
  filter: none;
}
.audio-timeline .timeline-change.medium {
  opacity: 0.46;
}
.audio-timeline .timeline-change.weak {
  opacity: 0.25;
}
.audio-timeline .timeline-shot-candidate {
  stroke: #9b8ec4;
  stroke-width: 1;
  stroke-linecap: butt;
  filter: none;
}
.audio-timeline .timeline-scene {
  fill: #7871a926;
  stroke: none;
}
.audio-timeline .timeline-scene.alt {
  fill: #68729b20;
}
.audio-timeline .timeline-scene-label {
  fill: #c7c5dd;
  font-size: 8px;
  font-weight: 600;
}
.audio-timeline .timeline-shot {
  fill: #77859b;
  opacity: 0.64;
  transition:
    opacity 0.1s,
    fill 0.1s;
}
.audio-timeline .timeline-shot.performance {
  fill: #7d83b5;
}
.audio-timeline .timeline-shot.story {
  fill: #688ca9;
}
.audio-timeline .timeline-shot.insert {
  fill: #8e887d;
}
.audio-timeline .timeline-shot.is-current {
  fill: #a9a1ff;
  opacity: 1;
}
.audio-timeline .timeline-playhead {
  stroke: #d9d5ff;
  stroke-width: 1.2;
  stroke-linecap: butt;
  filter: none;
}
.audio-timeline .timeline-playhead-handle {
  fill: #d9d5ff;
}
.audio-timeline .timeline-hoverhead {
  stroke: #a8b0bf66;
  stroke-width: 1;
  stroke-dasharray: none;
  stroke-linecap: butt;
  filter: none;
}
.audio-timeline .timeline-hover-chip {
  fill: #151a24;
  stroke: #31394a;
  stroke-width: 1;
}
.audio-timeline .timeline-hover-time {
  fill: #d1d7e2;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}
.audio-timeline .timeline-hit {
  fill: transparent;
}
.audio-timeline-readout {
  border-top: 1px solid #222936;
  padding-top: 6px;
}
.timeline-swatch {
  box-shadow: none !important;
  filter: none !important;
}
html[data-theme="light"] .audio-timeline {
  background: #f8fafc;
  border-color: #d5dce7;
}
html[data-theme="light"] .audio-timeline .timeline-grid {
  stroke: #64748b18;
}
html[data-theme="light"] .audio-timeline .timeline-ruler-tick {
  stroke: #64748b30;
}
html[data-theme="light"] .audio-timeline .timeline-axis-label,
html[data-theme="light"] .audio-timeline .timeline-lane-label {
  fill: #64748b;
}
html[data-theme="light"] .audio-timeline .timeline-lane-rule {
  stroke: #64748b22;
}
html[data-theme="light"] .audio-timeline .timeline-area {
  fill: #64748b10;
}
html[data-theme="light"] .audio-timeline .timeline-line {
  stroke: #64748b;
}
html[data-theme="light"] .audio-timeline .timeline-change {
  stroke: #b7792f;
}
html[data-theme="light"] .audio-timeline .timeline-shot-candidate {
  stroke: #7567a4;
}
html[data-theme="light"] .audio-timeline .timeline-scene {
  fill: #6d63a71d;
}
html[data-theme="light"] .audio-timeline .timeline-scene.alt {
  fill: #64748b14;
}
html[data-theme="light"] .audio-timeline .timeline-scene-label {
  fill: #4c466f;
}
html[data-theme="light"] .audio-timeline .timeline-shot {
  fill: #64748b;
}
html[data-theme="light"] .audio-timeline .timeline-shot.performance {
  fill: #6366a3;
}
html[data-theme="light"] .audio-timeline .timeline-shot.story {
  fill: #477899;
}
html[data-theme="light"] .audio-timeline .timeline-shot.insert {
  fill: #746e65;
}
html[data-theme="light"] .audio-timeline .timeline-shot.is-current {
  fill: #5b55c9;
}
html[data-theme="light"] .audio-timeline .timeline-playhead {
  stroke: #514bc2;
}
html[data-theme="light"] .audio-timeline .timeline-playhead-handle {
  fill: #514bc2;
}
html[data-theme="light"] .audio-timeline .timeline-hoverhead {
  stroke: #47556966;
}
html[data-theme="light"] .audio-timeline .timeline-hover-chip {
  fill: #fff;
  stroke: #cbd5e1;
}
html[data-theme="light"] .audio-timeline .timeline-hover-time {
  fill: #334155;
}
html[data-theme="light"] .audio-timeline-readout {
  border-color: #dbe2ec;
}
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .step-nav {
    display: flex;
    overflow: auto;
  }
  .step-link {
    white-space: nowrap;
  }
  .side-note,
  .progress-label {
    display: none;
  }
  .scene {
    grid-template-columns: 1fr;
  }
  .scene-image {
    max-height: 340px;
  }
  .grid3 {
    grid-template-columns: 1fr 1fr;
  }
  .shot-card {
    grid-template-columns: 1fr;
  }
  .concept-settings {
    grid-template-columns: 1fr 1fr;
  }
  .concept-settings-title {
    grid-column: 1/-1;
  }
  .audio-storyboard-live {
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  }
}
.timeline-trim-handle {
  cursor: ew-resize;
  outline: none;
}
.timeline-trim-handle .timeline-trim-hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
}
.timeline-trim-handle .timeline-trim-line {
  stroke: #f8fafc99;
  stroke-width: 1;
  pointer-events: none;
}
.timeline-trim-handle .timeline-trim-grip {
  fill: #111827;
  stroke: #f8fafccc;
  stroke-width: 1;
  pointer-events: none;
}
.timeline-trim-handle:hover .timeline-trim-line,
.timeline-trim-handle:focus .timeline-trim-line,
.timeline-trim-handle.dragging .timeline-trim-line {
  stroke: #f8fafc;
  stroke-width: 1.5;
}
.timeline-trim-handle:hover .timeline-trim-grip,
.timeline-trim-handle:focus .timeline-trim-grip,
.timeline-trim-handle.dragging .timeline-trim-grip {
  fill: #8b5cf6;
  stroke: #fff;
}
html[data-theme="light"] .timeline-trim-handle .timeline-trim-line {
  stroke: #33415599;
}
html[data-theme="light"] .timeline-trim-handle .timeline-trim-grip {
  fill: #fff;
  stroke: #334155;
}
html[data-theme="light"] .timeline-trim-handle:hover .timeline-trim-line,
html[data-theme="light"] .timeline-trim-handle:focus .timeline-trim-line,
html[data-theme="light"] .timeline-trim-handle.dragging .timeline-trim-line {
  stroke: #4338ca;
}
html[data-theme="light"] .timeline-trim-handle:hover .timeline-trim-grip,
html[data-theme="light"] .timeline-trim-handle:focus .timeline-trim-grip,
html[data-theme="light"] .timeline-trim-handle.dragging .timeline-trim-grip {
  fill: #6366f1;
  stroke: #312e81;
}
@media (max-width: 620px) {
  .audio-timeline-stage {
    overflow-x: auto;
  }
  .audio-timeline svg {
    min-width: 720px;
    aspect-ratio: 1200/188;
  }
}
@media (max-width: 620px) {
  .shell {
    padding: 0 15px;
  }
  .brand small,
  .provider-pill {
    display: none;
  }
  .topbar-inner {
    height: 64px;
  }
  .layout {
    padding-top: 15px;
  }
  .hero {
    padding-top: 12px;
  }
  .card-body,
  .card-head {
    padding: 16px;
  }
  .grid2,
  .grid3,
  .concept-settings {
    grid-template-columns: 1fr;
  }
  .scene-toolbar {
    flex-wrap: wrap;
  }
  .actions .push {
    margin-left: 0;
  }
  .character-grid,
  .environment-grid {
    grid-template-columns: 1fr;
  }
  .overlay {
    right: 16px;
    bottom: 16px;
  }
  .loader {
    width: calc(100vw - 32px);
  }
  .toast {
    right: 16px;
    bottom: 92px;
    max-width: calc(100vw - 32px);
  }
  .scene-meta,
  .shot-fields {
    grid-template-columns: 1fr;
  }
  .top-actions > .btn:not(.icon-btn) {
    padding: 8px;
    font-size: 11px;
  }
  .snapshot-create {
    flex-direction: column;
  }
  .snapshot-item {
    grid-template-columns: 1fr;
  }
  .snapshot-actions {
    flex-wrap: wrap;
  }
}
@media (max-width: 620px) {
  .audio-storyboard-live {
    grid-template-columns: 1fr;
  }
  .audio-storyboard-frame {
    max-width: none;
  }
  .audio-timeline-legend {
    margin-left: 0;
  }
}
/* VizIQa workspace */
body {
  background:
    radial-gradient(80% 65% at 72% -10%, #213c6b3a, transparent 62%),
    radial-gradient(55% 45% at 0 20%, #642ca72d, transparent 70%), #07090e;
  font-size: 14px;
  padding-bottom: 0;
}
.shell {
  padding: 0 18px;
}
.topbar {
  height: 66px;
  border-bottom-color: #ffffff10;
}
.topbar-inner {
  height: 66px;
  padding: 0 4px;
}
.brand {
  min-width: var(--rail);
}
.logo {
  border-radius: 15px;
}
.project-title {
  width: min(28vw, 320px);
  border: 0;
  border-left: 1px solid #ffffff14;
  background: transparent;
  color: #f6f7fb;
  padding: 7px 14px;
  font-weight: 750;
  outline: 0;
}
.project-title:focus {
  background: #ffffff07;
  border-radius: 9px;
}
.save-state {
  color: #8e98aa;
  font-size: 11px;
  white-space: nowrap;
}
.save-state:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 7px;
  box-shadow: 0 0 10px #4ade8099;
}
.queue-count {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 99px;
  background: #8b5cf6;
  color: white;
  font-size: 9px;
}
.queue-count.show {
  display: grid;
}
.layout {
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0 42px;
  max-width: none;
}
.sidebar {
  top: 84px;
}
.progress-label,
.side-note {
  display: none;
}
.step-nav {
  gap: 10px;
}
.step-nav:before {
  display: none;
}
.step-link {
  width: 60px;
  height: 60px;
  padding: 7px;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
  border-radius: 18px;
  font-size: 9px;
  line-height: 1.05;
  color: #788297;
}
.step-link .step-num {
  width: 26px;
  height: 26px;
}
.step-link.active {
  background: linear-gradient(145deg, #8769f529, #37cde914);
  border-color: #987eff55;
  box-shadow:
    inset 0 0 0 1px #ffffff05,
    0 12px 28px #0005;
}
.step-link.active .step-num {
  border-radius: 10px;
}
.hero {
  padding: 18px 8px 25px;
}
.hero h1 {
  font-size: clamp(28px, 3vw, 46px);
}
main > .card {
  display: none;
  margin-bottom: 18px;
  border-radius: var(--radius-xl);
}
main > .card.active-panel {
  display: block;
  animation: panel-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
body:not([data-stage="concept"]) .hero {
  display: none;
}
.card-head {
  padding: 15px 20px;
}
.card-body {
  padding: 20px;
}
.card:before {
  width: 1px;
}
.actions {
  gap: 8px;
}
.view-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.view-toolbar .view-label {
  color: #7d8799;
  font-size: 11px;
  margin-right: auto;
}
.view-toggle {
  display: flex;
  padding: 3px;
  background: #090d14;
  border: 1px solid #252e40;
  border-radius: 10px;
}
.view-toggle button {
  border: 0;
  background: transparent;
  color: #747e92;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11px;
}
.view-toggle button.active {
  background: #292f42;
  color: #fff;
}
.shot-card {
  position: relative;
  transition:
    border-color 0.2s,
    transform 0.2s,
    background 0.2s;
}
.shot-card:hover {
  border-color: #495675;
  transform: translateY(-1px);
}
.scene-list.view-table .scene-group {
  overflow: visible;
  background: transparent;
  border: 0;
}
.scene-list.view-table .scene-group-head,
.scene-list.view-table .scene-meta {
  position: sticky;
  left: 0;
}
.scene-list.view-table .shot-list {
  padding: 4px 0;
}
.scene-list.view-table .shot-card {
  grid-template-columns: 110px minmax(120px, 0.5fr) minmax(160px, 1fr);
  border-radius: 8px;
  margin-bottom: 4px;
}
.scene-list.view-table .scene-image {
  aspect-ratio: 16/9;
}
.scene-list.view-table .scene-toolbar,
.scene-list.view-table .scene-content label,
.scene-list.view-table .scene-content textarea {
  display: none;
}
.scene-list.view-table .scene-content {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 9px;
}
.scene-list.view-table .shot-fields {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  grid-column: 2;
}
.scene-list.view-table .shot-badge {
  align-self: center;
}
.scene-group.collapsed .scene-meta,
.scene-group.collapsed .shot-list {
  display: none;
}
.scene-collapse {
  width: 31px;
  padding: 6px;
}
.scene-group.collapsed .scene-collapse {
  transform: rotate(-90deg);
}
.shot-part-type {
  width: 100%;
  margin: 8px 0;
  border: 1px solid #4c3f71;
  border-radius: 8px;
  background: #171124;
  color: #ddd6fe;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  outline: 0;
}
.shot-part-type:focus {
  border-color: #a78bfa;
}
.shot-environment {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #2d374b;
  border-radius: 9px;
  background: #0a1019;
}
.shot-environment label {
  margin: 0;
  color: #a5b4fc !important;
  letter-spacing: 0.06em !important;
}
.shot-environment select {
  width: 100%;
  min-width: 0;
  border: 1px solid #3b4660;
  border-radius: 7px;
  background: #111827;
  color: #e0e7ff;
  padding: 8px 10px;
  font-size: 11px;
  outline: 0;
}
.shot-environment select:focus {
  border-color: #8b5cf6;
}
.shot-environment select.environment-none {
  color: #7f8a9f;
}
.scene-list.view-table .shot-environment {
  grid-column: 2;
  grid-template-columns: 1fr;
  padding: 5px;
}
.scene-list.view-table .shot-environment label {
  display: none;
}
.scene-meta {
  grid-template-columns: 1fr;
}
.shot-timecode {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 7px;
  align-items: end;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #24485a;
  border-radius: 9px;
  background: #07141a;
}
.shot-timecode label {
  margin: 0 !important;
  color: #67e8f9 !important;
  font-size: 9px !important;
}
.shot-timecode input {
  width: 100%;
  margin-top: 4px;
  border: 1px solid #285267;
  border-radius: 7px;
  background: #091b23;
  color: #d5f7fb;
  padding: 7px 8px;
  font:
    11px ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.shot-duration {
  align-self: center;
  white-space: nowrap;
  color: #a5f3fc;
  font-size: 11px;
  font-weight: 800;
}
.scene-list.view-table .shot-timecode {
  grid-column: 2;
  grid-template-columns: 1fr 1fr auto;
  padding: 5px;
  margin: 4px 0;
}
.preflight-panel {
  display: none;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #33405a;
  border-radius: 12px;
  background: #0a1019;
}
.preflight-panel.show {
  display: block;
}
.preflight-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.preflight-summary strong {
  margin-right: auto;
}
.preflight-count {
  padding: 4px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
}
.preflight-count.error {
  background: #fb71851c;
  color: #fda4af;
}
.preflight-count.warning {
  background: #fbbf2418;
  color: #fcd34d;
}
.preflight-count.ok {
  background: #34d39918;
  color: #6ee7b7;
}
.preflight-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #adb7c8;
  font-size: 11px;
  line-height: 1.7;
}
.preflight-list li.error {
  color: #fda4af;
}
.preflight-list li.warning {
  color: #fcd34d;
}
.bottom-dock {
  position: fixed;
  left: calc(var(--rail) + 30px);
  right: calc(var(--queue-width) + 30px);
  bottom: 14px;
  height: 56px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #ffffff1b;
  border-radius: 18px;
  background: #111722d9;
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: 0 20px 60px #0009;
}
.dock-stage {
  margin-right: auto;
  padding-left: 7px;
}
.dock-stage small {
  display: block;
  color: #798397;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.dock-stage strong {
  font-size: 12px;
}
.dock-primary {
  min-width: 180px;
}
.drawer {
  position: fixed;
  right: 16px;
  top: 78px;
  bottom: 16px;
  width: min(390px, calc(100vw - 32px));
  z-index: 60;
  border: 1px solid #ffffff18;
  border-radius: 22px;
  background: #0d121bf5;
  box-shadow: 0 30px 90px #000b;
  backdrop-filter: blur(28px);
  display: flex;
  flex-direction: column;
  transition:
    width 0.25s,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drawer-head {
  padding: 17px;
  border-bottom: 1px solid #ffffff10;
  display: flex;
  align-items: center;
  gap: 9px;
}
.drawer-head strong {
  min-width: 0;
}
.drawer-head .queue-toggle {
  margin-left: auto;
  width: 32px;
  padding: 0;
  font-size: 18px;
}
.queue-cancel-pending {
  padding: 5px 8px !important;
  font-size: 9px !important;
  color: #fecdd3 !important;
  border-color: #fb71854a !important;
}
.queue-cancel-pending:disabled {
  display: none;
}
.queue-list {
  padding: 12px;
  display: grid;
  gap: 8px;
  overflow: auto;
}
.queue-job {
  padding: 12px;
  border: 1px solid #293246;
  border-radius: 12px;
  background: #0a0e15;
}
.queue-job-head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.queue-job-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.queue-job-state {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 99px;
  background: #20283a;
  color: #aeb7c9;
}
.queue-job.queued,
.queue-job.preparing,
.queue-job.retry {
  border-color: #f59e0b55;
}
.queue-job.requesting {
  border-color: #8b5cf680;
  box-shadow: inset 2px 0 #8b5cf6;
}
.queue-job.done {
  opacity: 0.72;
}
.queue-job.error {
  border-color: #fb718580;
}
.queue-job.cancelled {
  opacity: 0.55;
}
.queue-job small {
  color: #8b96aa;
  display: block;
  margin-top: 6px;
}
.queue-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 9px;
}
.queue-progress i {
  height: 3px;
  border-radius: 99px;
  background: #2a3243;
}
.queue-progress i.active {
  background: #a78bfa;
  box-shadow: 0 0 8px #8b5cf666;
}
.queue-progress i.complete {
  background: #34d399;
}
.queue-job.cancelled .queue-progress i {
  background: #64748b;
}
.queue-job-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.queue-job-cancel {
  border: 0;
  background: transparent;
  color: #fda4af;
  padding: 2px 0;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.queue-job-cancel:hover {
  color: #fff;
}
.queue-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 2px 4px;
  color: #8792a6;
  font-size: 9px;
}
.queue-summary b {
  color: #cbd5e1;
}
.queue-job {
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.queue-job:hover {
  border-color: #6366f180;
  background: #111827;
}
.queue-detail-modal .modal {
  width: min(920px, 100%);
}
.queue-detail-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 11px;
}
.queue-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.queue-detail-block {
  min-width: 0;
}
.queue-detail-block h3 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 12px;
}
.queue-detail-content {
  max-height: 56vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #080c13;
  color: #dbe5f3;
  font:
    11px/1.65 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.queue-detail-image {
  display: block;
  max-width: 100%;
  max-height: 52vh;
  margin: auto;
  border-radius: 8px;
}
.queue-detail-empty {
  color: var(--muted);
}
@media (max-width: 760px) {
  .queue-detail-grid {
    grid-template-columns: 1fr;
  }
  .queue-detail-content {
    max-height: 34vh;
  }
}

/* Shot direction profile */
.direction-profile-editor {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--entity-divider);
  background: color-mix(in srgb, var(--entity-surface) 82%, transparent);
}
.direction-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.direction-profile-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.direction-profile-head strong {
  color: var(--text);
  font-size: var(--fs-control);
}
.direction-profile-head span,
.direction-profile-head small {
  color: var(--muted);
  font-size: var(--fs-caption);
}
.direction-profile-head small {
  text-align: right;
}
.direction-profile-head > .direction-profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.direction-profile-actions > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.shot-design-stale {
  align-self: center;
  color: #fbbf24;
  font-size: var(--fs-caption);
  line-height: 1.35;
}
html[data-theme="light"] .shot-design-stale {
  color: #b45309;
}
.direction-profile-stage {
  width: 100%;
  overflow: hidden;
  border-radius: var(--ui-radius-card);
  background: #090d14;
}
.direction-profile-stage svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 190px;
  touch-action: none;
  user-select: none;
}
.direction-profile-column {
  fill: transparent;
}
.direction-profile-column:nth-of-type(even) {
  fill: #ffffff02;
}
.direction-profile-column.current {
  fill: #ffffff08;
}
.direction-profile-boundary {
  stroke: #ffffff0a;
  stroke-width: 0.7;
}
.direction-profile-grid {
  stroke: #ffffff0c;
  stroke-width: 0.65;
}
.direction-profile-label,
.direction-profile-level {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
}
.direction-profile-label.energy {
  fill: #fbbf24;
}
.direction-profile-label.tension {
  fill: #f472b6;
}
.direction-profile-label.motion {
  fill: #22d3ee;
}
.direction-profile-label.intimacy {
  fill: #a78bfa;
}
.direction-profile-line {
  fill: none;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  pointer-events: none;
}
.direction-profile-line.energy {
  stroke: #fbbf24;
}
.direction-profile-line.tension {
  stroke: #f472b6;
}
.direction-profile-line.motion {
  stroke: #22d3ee;
}
.direction-profile-line.intimacy {
  stroke: #a78bfa;
}
.direction-profile-hit {
  fill: transparent;
  cursor: ns-resize;
}
.direction-profile-point {
  stroke: #0b0f16;
  stroke-width: 1.4;
  cursor: ns-resize;
  transition:
    r 0.14s,
    filter 0.14s;
}
.direction-profile-control:hover .direction-profile-point,
.direction-profile-control:focus .direction-profile-point {
  r: 5.5px;
  filter: drop-shadow(0 0 5px currentColor);
}
.direction-profile-control:focus {
  outline: none;
}
.direction-profile-point.energy {
  fill: #fbbf24;
  color: #fbbf24;
}
.direction-profile-point.tension {
  fill: #f472b6;
  color: #f472b6;
}
.direction-profile-point.motion {
  fill: #22d3ee;
  color: #22d3ee;
}
.direction-profile-point.intimacy {
  fill: #a78bfa;
  color: #a78bfa;
}
.direction-profile-point.unset {
  fill: #0b0f16;
  stroke: currentColor;
  stroke-dasharray: 2 1.5;
  opacity: 0.72;
}
.direction-profile-empty {
  display: grid;
  min-height: 92px;
  place-items: center;
  border: 1px dashed var(--entity-empty-border);
  border-radius: var(--ui-radius-card);
  color: var(--muted);
  font-size: var(--fs-small);
}
html[data-theme="light"] .direction-profile-editor {
  border-color: #d7dee9;
  background: #fff;
}
html[data-theme="light"] .direction-profile-stage {
  background: #f8fafc;
}
html[data-theme="light"] .direction-profile-column:nth-of-type(even) {
  fill: #0f172902;
}
html[data-theme="light"] .direction-profile-column.current {
  fill: #7c3aed0b;
}
html[data-theme="light"] .direction-profile-boundary,
html[data-theme="light"] .direction-profile-grid {
  stroke: #33415518;
}
html[data-theme="light"] .direction-profile-point {
  stroke: #fff;
}
html[data-theme="light"] .direction-profile-point.unset {
  fill: #fff;
  stroke: currentColor;
}
@media (max-width: 760px) {
  .direction-profile-head {
    display: grid;
    gap: 4px;
  }
  .direction-profile-head > div {
    display: grid;
    gap: 2px;
  }
  .direction-profile-head small {
    text-align: left;
  }
  .direction-profile-head > .direction-profile-actions,
  .direction-profile-actions > div {
    justify-content: flex-start;
  }
  .direction-profile-stage {
    overflow-x: auto;
  }
  .direction-profile-stage svg {
    min-width: 760px;
  }
}
html[data-theme="light"] .queue-job:hover {
  background: #f5f7ff;
  border-color: #818cf8;
}
html[data-theme="light"] .queue-detail-content {
  background: #f8fafc;
  color: #334155;
  border-color: #cbd5e1;
}
.library-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.library-toolbar input,
.library-toolbar select {
  width: 100%;
  border: 1px solid #2b3346;
  background: #090d14;
  color: #e8ebf3;
  border-radius: 10px;
  padding: 10px 12px;
  outline: 0;
}
.library-count {
  color: #8791a5;
  font-size: 11px;
  white-space: nowrap;
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 13px;
}
.library-card {
  min-width: 0;
  border: 1px solid #293246;
  border-radius: 15px;
  background: linear-gradient(155deg, #111722, #090d14);
  overflow: hidden;
  transition: 0.2s;
}
.library-card:hover {
  border-color: #596784;
  transform: translateY(-1px);
}
.library-preview {
  height: 166px;
  background: #070a10;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #232b3b;
}
.library-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.library-audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 118px;
  padding: 10px 16px;
  border: 1px solid #4b556d;
  border-radius: 99px;
  background: #151b28;
  color: #e8ecf5;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: 0.18s;
}
.library-audio-toggle:hover {
  border-color: #8b5cf6;
  background: #201b37;
}
.library-audio-toggle.playing {
  border-color: #22d3ee;
  background: #0c2b34;
  color: #a5f3fc;
  box-shadow: 0 0 0 3px #22d3ee18;
}
.library-preview pre {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 14px;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  color: #bcc5d5;
  font:
    11px/1.6 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.library-card.expanded .library-preview {
  height: auto;
  min-height: 166px;
  max-height: 520px;
  overflow: auto;
}
.library-card.expanded .library-preview pre {
  height: auto;
  overflow: visible;
}
.library-body {
  padding: 12px;
}
.library-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.library-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.library-meta time {
  margin-left: auto;
  color: #697488;
  font-size: 9px;
  white-space: nowrap;
}
.library-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.library-badges span {
  font-size: 9px;
  color: #aeb9ca;
  border: 1px solid #2b3548;
  border-radius: 99px;
  padding: 3px 7px;
}
.library-apply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
.library-apply select {
  min-width: 0;
  border: 1px solid #2c3548;
  background: #0a0e15;
  color: #d9deea;
  border-radius: 8px;
  padding: 7px;
  font-size: 10px;
}
.library-empty {
  grid-column: 1/-1;
  padding: 46px 20px;
  text-align: center;
  border: 1px dashed #303a4f;
  border-radius: 15px;
  color: #768196;
}
.library-empty strong {
  display: block;
  color: #c0c7d4;
  margin-bottom: 5px;
}
.command-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #03050aa8;
  backdrop-filter: blur(10px);
  display: grid;
  place-items: start center;
  padding-top: 12vh;
}
.command-box {
  width: min(620px, calc(100vw - 28px));
  border: 1px solid #ffffff1d;
  border-radius: 22px;
  background: #111722f7;
  box-shadow: 0 35px 100px #000c;
  overflow: hidden;
}
.command-box input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ffffff10;
  background: transparent;
  color: white;
  padding: 18px;
  font-size: 16px;
  outline: 0;
}
.command-list {
  padding: 8px;
  max-height: 420px;
  overflow: auto;
}
.command-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #cbd1de;
  display: flex;
  align-items: center;
  padding: 11px 12px;
  border-radius: 10px;
  text-align: left;
}
.command-item:hover,
.command-item.active {
  background: #8b5cf61c;
  color: white;
}
.command-item kbd {
  margin-left: auto;
  color: #6f798c;
  font-size: 10px;
}
.hidden.command-modal {
  display: none;
}