.video-workspace {
  --vg-border: #d8dee8;
  --vg-surface: #ffffff;
  --vg-muted: #64748b;
  --vg-accent: #1268a0;
  --vg-panel: #f7f9fc;
  color: #1f2937;
  margin: 1.5rem auto 3rem;
  max-width: 1600px;
  overflow-x: clip;
  padding: 0 1rem;
}

.video-workspace * { box-sizing: border-box; }
.video-workspace button, .video-workspace input, .video-workspace select, .video-workspace textarea { font: inherit; }
.video-workspace :focus-visible { outline: 3px solid #0b6da8; outline-offset: 2px; }
.vg-toolbar, .vg-panel, .vg-output-dock { background: var(--vg-surface); border: 1px solid var(--vg-border); }
.vg-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; justify-content: space-between; padding: 1rem; }
.vg-toolbar h1 { font-size: 1.25rem; margin: 0; }
.vg-toolbar-meta { color: var(--vg-muted); font-size: .85rem; }
.vg-toolbar-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.vg-toolbar-actions label { font-weight: 700; margin: 0; }
.vg-target-model { border: 1px solid var(--vg-border); border-radius: .35rem; min-width: 10rem; padding: .45rem .6rem; }
.vg-action { background: #eef3f8; border: 1px solid var(--vg-border); border-radius: .35rem; color: #334155; padding: .45rem .75rem; }
.vg-help-link { display: inline-flex; text-decoration: none; }
.vg-action[disabled] { cursor: not-allowed; opacity: .55; }
.vg-persistence-controls[aria-busy="true"], .vg-output-dock[aria-busy="true"] { cursor: progress; }
.vg-persistence-controls { align-items: center; display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.vg-file-action { background: #eef3f8; border: 1px solid var(--vg-border); border-radius: .35rem; color: #334155; cursor: pointer; margin: 0; padding: .45rem .75rem; }
.vg-file-action input { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.vg-project-save-status { color: var(--vg-muted); font-size: .85rem; font-weight: 700; }
.vg-persistence-feedback { color: var(--vg-muted); flex: 1 1 100%; min-height: 1.25em; overflow-wrap: anywhere; text-align: right; }

.vg-layout { display: grid; gap: .75rem; grid-template-columns: minmax(220px, 280px) minmax(360px, 1fr) minmax(260px, 360px); margin-top: .75rem; min-height: 440px; }
.vg-panel { min-width: 0; padding: 1rem; }
.vg-panel h2 { font-size: 1rem; margin: 0 0 1rem; }
.vg-project-tree ul { list-style: none; margin: 0; padding-left: 1rem; }
.vg-project-tree > ul { padding-left: 0; }
.vg-tree-group { color: var(--vg-muted); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; margin: .8rem 0 .25rem; text-transform: uppercase; }
.vg-tree-button { background: transparent; border: 0; border-radius: .3rem; color: #334155; cursor: pointer; display: block; padding: .35rem .5rem; text-align: left; width: 100%; }
.vg-tree-button:hover, .vg-tree-button[aria-current="true"] { background: #e6f2fa; color: var(--vg-accent); }
.vg-editor-placeholder { background: var(--vg-panel); border: 1px dashed var(--vg-border); border-radius: .5rem; min-height: 260px; padding: 1.25rem; }
.vg-editor-placeholder h3 { margin-top: 0; }
.vg-character-library, .vg-character-editor { min-width: 0; }
.vg-editor-heading-row { align-items: start; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.vg-character-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.vg-character-card, .vg-voice-profile, .vg-reference-manager { background: var(--vg-panel); border: 1px solid var(--vg-border); border-radius: .5rem; padding: 1rem; }
.vg-character-card h4, .vg-voice-profile h4, .vg-reference-manager h4 { margin: 0 0 .5rem; }
.vg-character-id { color: var(--vg-muted); font-family: monospace; }
.vg-character-editor { display: grid; gap: .75rem; }
.vg-character-editor label, .vg-voice-details label { display: grid; font-weight: 700; gap: .25rem; }
.vg-character-editor input, .vg-character-editor textarea { border: 1px solid var(--vg-border); border-radius: .35rem; min-width: 0; padding: .45rem .6rem; width: 100%; }
.vg-character-editor textarea { min-height: 4.5rem; resize: vertical; }
.vg-voice-details { display: grid; gap: .65rem; margin-top: .75rem; }
.vg-reference-manager, .vg-reference-section, .vg-reference-list, .vg-reference-add, .vg-reference-card, .vg-intent-card { display: grid; gap: .65rem; min-width: 0; }
.vg-reference-section { border-top: 1px solid var(--vg-border); padding-top: .85rem; }
.vg-reference-card, .vg-intent-card, .vg-reference-add, .vg-unused-references { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: .4rem; overflow-wrap: anywhere; padding: .75rem; }
.vg-reference-meta { display: grid; gap: .25rem .5rem; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.vg-reference-meta dt { color: var(--vg-muted); font-weight: 700; }
.vg-reference-meta dd { margin: 0; overflow-wrap: anywhere; }
.vg-reference-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.vg-reference-badge { background: #e2e8f0; border-radius: 999px; color: #475569; font-size: .75rem; margin-left: .5rem; padding: .15rem .45rem; }
.vg-policy-grid { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-reference-feedback { color: #9f1239; margin: 0; min-height: 1.25em; overflow-wrap: anywhere; }
.vg-empty-state { background: #f8fafc; border: 1px dashed var(--vg-border); border-radius: .4rem; color: #475569; margin: 0; padding: .75rem; }
.vg-error-message, .vg-story-feedback { color: #9f1239; min-height: 1.25em; overflow-wrap: anywhere; }
.vg-error-message:not(:empty)::before, .vg-reference-feedback:not(:empty)::before, .vg-story-feedback:not(:empty)::before { content: "Error: "; font-weight: 700; }
.vg-story-editor, .vg-story-form, .vg-story-children, .vg-story-cards { display: grid; gap: .75rem; min-width: 0; }
.vg-story-card, .vg-story-children, .vg-inheritance-summary { background: var(--vg-panel); border: 1px solid var(--vg-border); border-radius: .5rem; padding: .75rem; }
.vg-dialogue-section, .vg-dialogue-cards, .vg-dialogue-editor { display: grid; gap: .75rem; min-width: 0; }
.vg-dialogue-section { border-top: 1px solid var(--vg-border); margin-top: .5rem; padding-top: .75rem; }
.vg-dialogue-card { background: var(--vg-panel); border: 1px solid var(--vg-border); border-radius: .5rem; min-width: 0; overflow-wrap: anywhere; padding: .75rem; }
.vg-dialogue-card p, .vg-dialogue-card blockquote { margin: 0 0 .5rem; }
.vg-dialogue-card blockquote { border-left: 3px solid var(--vg-border); padding-left: .65rem; }
.vg-dialogue-core, .vg-dialogue-delivery, .vg-reactions-editor, .vg-reaction-list, .vg-reaction-add { display: grid; gap: .75rem; min-width: 0; }
.vg-dialogue-delivery, .vg-reactions-editor { background: var(--vg-panel); border: 1px solid var(--vg-border); border-radius: .5rem; padding: .75rem; }
.vg-delivery-grid { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-reaction-card, .vg-reaction-add { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: .4rem; min-width: 0; padding: .75rem; }
.vg-camera-editor, .vg-camera-fields { display: grid; gap: .75rem; min-width: 0; }
.vg-camera-editor { background: var(--vg-panel); border: 1px solid var(--vg-border); border-radius: .5rem; padding: .75rem; }
.vg-camera-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-camera-field { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: .4rem; display: grid; gap: .5rem; min-width: 0; overflow-wrap: anywhere; padding: .65rem; }
.vg-camera-field p { margin: 0; }
.vg-audio-editor, .vg-audio-fields { display: grid; gap: .75rem; min-width: 0; }
.vg-audio-editor { background: var(--vg-panel); border: 1px solid var(--vg-border); border-radius: .5rem; padding: .75rem; }
.vg-audio-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-audio-field { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: .4rem; display: grid; gap: .5rem; min-width: 0; overflow-wrap: anywhere; padding: .65rem; }
.vg-audio-field p { margin: 0; }
.vg-continuity-editor, .vg-continuity-fields { display: grid; gap: .75rem; min-width: 0; }
.vg-continuity-editor { background: var(--vg-panel); border: 1px solid var(--vg-border); border-radius: .5rem; padding: .75rem; }
.vg-continuity-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-continuity-field { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: .4rem; display: grid; gap: .5rem; min-width: 0; overflow-wrap: anywhere; padding: .65rem; }
.vg-continuity-field p, .vg-continuity-warning p { margin: 0; }
.vg-continuity-warning { background: #fffbeb; border: 1px solid #fbbf24; border-radius: .5rem; min-width: 0; overflow-wrap: anywhere; padding: .75rem; }
.vg-story-form label, .vg-story-form fieldset { min-width: 0; }
.vg-story-form label { display: grid; font-weight: 700; gap: .25rem; }
.vg-story-form input, .vg-story-form textarea, .vg-story-form select { border: 1px solid var(--vg-border); border-radius: .35rem; min-width: 0; padding: .45rem .6rem; width: 100%; }
.vg-story-form textarea { min-height: 5rem; resize: vertical; }
.vg-story-link { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: .35rem; overflow-wrap: anywhere; padding: .55rem; text-align: left; width: 100%; }
.vg-cast-grid { display: grid; gap: .4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-cast-grid label { align-items: center; display: flex; font-weight: 400; overflow-wrap: anywhere; }
.vg-cast-grid input { flex: 0 0 auto; width: auto; }
.vg-timecode { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vg-timecode legend { grid-column: 1 / -1; }
.vg-inheritance-summary { display: grid; gap: .35rem .75rem; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.vg-inheritance-summary dt { color: var(--vg-muted); font-weight: 700; }
.vg-inheritance-summary dd { margin: 0; }
.vg-danger { background: #fff1f2; border: 1px solid #fda4af; border-radius: .35rem; color: #9f1239; justify-self: start; padding: .45rem .75rem; }
.vg-data-list { display: grid; gap: .5rem; grid-template-columns: max-content minmax(0, 1fr); margin: 1rem 0; }
.vg-data-list dt { color: var(--vg-muted); font-weight: 700; }
.vg-data-list dd { margin: 0; overflow-wrap: anywhere; }
.vg-note { color: var(--vg-muted); font-size: .9rem; }
.vg-output-dock { margin-top: .75rem; min-width: 0; padding: .75rem 1rem 1rem; }
.vg-output-heading, .vg-output-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.vg-output-heading h2, .vg-output-heading p { margin: 0; }
.vg-output-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.vg-output-tab { background: #f1f5f9; border: 1px solid var(--vg-border); border-radius: .35rem; color: #475569; padding: .4rem .7rem; }
.vg-output-tab[aria-selected="true"] { background: #dbeafe; border-color: var(--vg-accent); color: var(--vg-accent); }
.vg-output-content { background: #0f172a; border-radius: .4rem; color: #e2e8f0; margin: .75rem 0 0; max-height: 34rem; min-height: 10rem; overflow: auto; padding: .75rem; white-space: pre; }
.vg-output-feedback { color: var(--vg-muted); margin: .5rem 0 0; min-height: 1.25em; overflow-wrap: anywhere; }

@media (max-width: 1050px) {
  .vg-layout { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); }
  .vg-inspector { grid-column: 1 / -1; }
  .video-workspace button, .video-workspace select, .vg-file-action, .vg-help-link { min-height: 44px; }
}

@media (max-width: 680px) {
  .video-workspace { padding: 0 .5rem; }
  .vg-toolbar { align-items: stretch; flex-direction: column; }
  .vg-toolbar-actions { align-items: stretch; flex-direction: column; }
  .vg-persistence-controls { align-items: stretch; flex-direction: column; }
  .vg-file-action, .vg-persistence-controls .vg-action { text-align: center; width: 100%; }
  .vg-persistence-feedback { text-align: left; }
  .vg-output-heading, .vg-output-actions { align-items: stretch; flex-direction: column; }
  .vg-output-actions .vg-action { width: 100%; }
  .vg-target-model, .vg-action { width: 100%; }
  .vg-layout { display: block; }
  .vg-panel { margin-top: .75rem; width: 100%; }
  .vg-project-tree { max-height: 18rem; overflow: auto; }
  .vg-editor-heading-row { align-items: stretch; flex-direction: column; }
  .vg-character-cards { grid-template-columns: 1fr; }
  .vg-policy-grid { grid-template-columns: 1fr; }
  .vg-reference-actions { align-items: stretch; flex-direction: column; }
  .vg-reference-actions .vg-action, .vg-reference-actions .vg-danger { width: 100%; }
  .vg-cast-grid, .vg-timecode { grid-template-columns: 1fr; }
  .vg-dialogue-cards { grid-template-columns: 1fr; }
  .vg-delivery-grid { grid-template-columns: 1fr; }
  .vg-camera-fields { grid-template-columns: 1fr; }
  .vg-audio-fields { grid-template-columns: 1fr; }
  .vg-continuity-fields { grid-template-columns: 1fr; }
  .vg-project-tree ul { padding-left: .65rem; }
  .vg-output-content { max-width: 100%; overflow-x: auto; }
}