.video-module { min-width: 0; margin-top: 30px; overflow: hidden; scroll-margin-top: 20px; }
.video-module *, .video-scene-card, .video-history-card { min-width: 0; }
.video-module input, .video-module select, .video-module textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.video-create-grid { display: grid; grid-template-columns: 2fr repeat(5, minmax(110px, 1fr)); gap: 14px; align-items: end; }
.video-create-grid .video-source-field { grid-column: 1 / -1; }
.video-create-grid textarea { min-height: 130px; }
.video-lip-sync-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.video-avatar-mode-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; border: 1px solid #356de5; border-radius: 10px; background: rgba(40, 103, 237, .1); color: var(--text); }
.video-avatar-mode-note span { color: var(--muted); }
.video-lip-sync-options small { grid-column: 1 / -1; color: var(--muted); }
.video-option-toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; }
.video-option-toggle input { width: 18px; height: 18px; margin: 0; }
.video-avatar-upload { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, 1fr) 96px auto; gap: 12px; align-items: end; }
.video-avatar-upload img { width: 96px; height: 96px; border: 1px solid var(--border); border-radius: 12px; object-fit: cover; background: #020817; }
.video-avatar-upload .button { min-height: 44px; }
.video-podcast-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 14px; }
.video-podcast-heading { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--text); }
.video-podcast-heading span { color: var(--muted); }
.video-podcast-participant { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.video-podcast-participant h4, .video-podcast-participant > label:last-of-type, .video-podcast-avatar-preview { grid-column: 1 / -1; margin: 0; }
.video-podcast-avatar-preview { display: flex; align-items: end; gap: 12px; }
.video-podcast-avatar-preview img { width: 110px; height: 110px; border: 1px solid var(--border); border-radius: 12px; object-fit: cover; background: #020817; }
.video-podcast-speaker { display: inline-flex; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(123, 97, 255, .16); color: #b9aaff; font-size: .75rem; }
.video-workspace { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 24px; }
.video-project-fields { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.video-storyboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 18px; }
.video-scene-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.video-scene-card label, .video-history-card, #video-render-progress { overflow-wrap: anywhere; }
.video-scene-card img, .video-scene-card video, #video-final-result video { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 10px; background: #020817; }
.video-scene-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.video-status { padding: 4px 9px; border-radius: 999px; background: #dce7ff; color: #1d4da8; font-size: .76rem; font-weight: 700; }
.status-completed { background: #d9f7e8; color: #147242; }
.status-failed { background: #ffe1e6; color: #a51d38; }
.status-rendering, .status-composing { background: #fff1cc; color: #8a5b00; }
.video-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.video-progress-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.video-progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2867ed, #7b61ff); transition: width .35s ease; }
.video-history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: stretch; }
.video-history-card { display: grid; grid-template-rows: auto auto auto 1fr; gap: 8px; min-height: 245px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; text-align: left; color: var(--text); background: var(--surface); }
.video-history-card:hover { border-color: #2867ed; transform: translateY(-1px); }
.video-history-card span, .video-history-card small { color: var(--muted); }
.video-history-card .video-history-kind { width: fit-content; padding: 3px 8px; border-radius: 999px; background: rgba(40, 103, 237, .14); color: #8eb1ff; font-size: .75rem; font-weight: 700; }
.video-history-actions { align-self: end; display: flex; gap: 7px; width: 100%; margin-top: 10px; }
.video-history-actions .button { display: inline-flex; flex: 0 0 calc((100% - 14px) / 3); align-items: center; justify-content: center; box-sizing: border-box; width: calc((100% - 14px) / 3); min-width: 0; height: 42px; min-height: 42px; margin: 0; padding: 0 6px; border: 1px solid #34425f; border-radius: 9px; background: #24314b; color: #fff; font-size: .78rem; line-height: 1.1; text-align: center; }
.video-history-actions .button:hover { border-color: #5475bd; background: #30405f; color: #fff; }
.video-history-actions .button.danger { border-color: #2867ed; background: #2867ed; color: #fff; }
.video-history-actions .button.danger:hover { border-color: #4b7ff0; background: #4b7ff0; }
.video-history-actions .button:disabled { border-color: #2b3549; background: #1d2739; color: #77839a; opacity: .8; cursor: not-allowed; }
.video-error { color: #c42b49; font-weight: 600; }
#video-final-result { display: grid; gap: 12px; margin-top: 20px; }
#video-final-result video { width: auto; max-width: 100%; max-height: 75vh; justify-self: start; }
#video-final-result .button { justify-self: start; }
.video-final-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 980px) { .video-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .video-project-fields { grid-template-columns: 1fr; } .video-storyboard-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 620px) { .video-create-grid, .video-lip-sync-options, .video-avatar-upload, .video-podcast-options, .video-podcast-participant, .video-storyboard-grid, .video-history-list { grid-template-columns: minmax(0, 1fr); } .video-create-grid .video-source-field, .video-podcast-participant h4, .video-podcast-participant > label:last-of-type, .video-podcast-avatar-preview { grid-column: auto; } .video-actions, .video-final-actions { flex-direction: column; } .video-actions .button, .video-final-actions .button { width: 100%; justify-content: center; } #video-final-result video { width: 100%; height: auto; } }
@media (max-width: 420px) { .video-history-actions { flex-direction: column; } .video-history-actions .button { flex-basis: auto; width: 100%; } .video-history-card { min-height: auto; } }