/* Vídeos: grade de miniaturas com estado em palavras; editor com cenas em lista e preview ao lado. */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.video-card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.video-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.video-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.video-thumb.is-square { aspect-ratio: 1; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; padding: 2px 7px; border-radius: 6px; }
.video-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.55); }
.video-info { display: flex; flex-direction: column; gap: 6px; padding: 2px 4px 4px; }
.video-info strong { font-weight: 600; font-size: 14px; line-height: 1.3; }
.video-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.video-info .progress { height: 5px; }
.video-action { align-self: flex-start; margin-top: 2px; }
.video-more > summary { cursor: pointer; list-style: none; margin: -4px 0 10px; }
.video-more > summary::-webkit-details-marker { display: none; }
.video-more > summary::before { content: '+ '; }
.video-more[open] > summary::before { content: '– '; }

.video-status { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.video-editor { grid-template-columns: minmax(0, 1fr) 380px; }
.video-player { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; border-radius: 16px; background: #000; }
.video-player.is-square, .scene-preview.is-square { aspect-ratio: 1; }
.scene-preview { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.scenes { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.scene-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-3); transition: border-color .12s, background .12s; }
.scene-row.is-current { border-color: var(--orange); background: var(--orange-soft); }
.scene-n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.scene-row.is-current .scene-n { background: var(--orange); color: var(--ink); }
.scene-fields .field { margin-bottom: 8px; }
.scene-fields .grid { gap: 0 10px; }
.scene-media { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.scene-media .input { flex: 1; min-width: 160px; }
.scene-dur { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.scene-media .input.dur { flex: none; width: 64px; }
.scene-thumb { width: 36px; height: 50px; border-radius: 8px; background: var(--surface-2) center/cover; flex: none; border: 1px solid var(--line); }
.video-done-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.video-done-row .select { flex: 1; min-width: 150px; }
/* sem a coluna lateral, o preview da cena vai para cima do roteiro (quem edita precisa ver o resultado); o resto segue abaixo */
@media (max-width: 1200px) { .video-editor { grid-template-columns: 1fr; } .video-editor .editor-side { display: contents; } .video-editor .editor-preview { order: -1; } .video-editor .editor-preview .video-player, .video-editor .scene-preview { max-width: 260px; } }
@media (max-width: 560px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }