/* AI 视频生成模块样式 */
/* 整体宽度对齐 3D 创作（.page-container max-width:1200px），避免左右面板在宽屏被拉得过宽 */
.vg-page { max-width: 1200px; margin: 0 auto; }
.vg-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1rem; }
@media (max-width: 880px) { .vg-wrap { grid-template-columns: 1fr; } }
.vg-card { background: var(--card, #fff); border: 1px solid var(--border, #eee); border-radius: 16px; padding: 1.2rem; }
.vg-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.vg-tab { flex: 1; padding: .6rem; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: transparent; cursor: pointer; font-size: .9rem; color: var(--text-2, #666); transition: .15s; }
.vg-tab.active { background: var(--brand, #6d5efc); color: #fff; border-color: var(--brand, #6d5efc); }
.vg-field { margin-bottom: 1rem; }
.vg-field > label { display: block; font-size: .82rem; color: var(--text-2, #666); margin-bottom: .35rem; }
.vg-ta { width: 100%; min-height: 96px; padding: .7rem; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; font: inherit; resize: vertical; box-sizing: border-box; }
.vg-row { display: flex; gap: 1rem; }
.vg-row .vg-field { flex: 1; }
.vg-select { width: 100%; padding: .6rem; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; font: inherit; background: var(--card, #fff); }
.vg-drop { border: 1.5px dashed var(--border, #d1d5db); border-radius: 12px; padding: 1rem; text-align: center; cursor: pointer; color: var(--text-2, #888); transition: .15s; }
.vg-drop:hover { border-color: var(--brand, #6d5efc); color: var(--brand, #6d5efc); }
.vg-btn { width: 100%; padding: .85rem; border: none; border-radius: 12px; background: linear-gradient(135deg, #6d5efc, #9b5efc); color: #fff; font-size: .98rem; font-weight: 600; cursor: pointer; transition: .15s; }
.vg-btn:hover { opacity: .92; }
.vg-btn:disabled { opacity: .55; cursor: not-allowed; }
.vg-status { margin-top: .8rem; font-size: .85rem; min-height: 1.1rem; }
.vg-status.vg-ok { color: #16a34a; }
.vg-status.vg-err { color: #dc2626; }
.vg-h3 { margin: 0 0 .9rem; font-size: 1rem; }
.vg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; max-height: 70vh; overflow: auto; }
.vg-empty { color: var(--text-2, #999); font-size: .88rem; padding: 1.5rem; text-align: center; grid-column: 1 / -1; }
.vg-item { background: var(--bg-2, #f8f9fb); border-radius: 12px; padding: .6rem; }
.vg-thumb { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .85rem; color: #fff; background: #9ca3af; }
.vg-thumb-done { background: #16a34a; }
.vg-thumb-failed { background: #dc2626; padding: .6rem; line-height: 1.35; text-align: center; }
.vg-thumb-failed small { display: block; margin-top: .35rem; font-size: .7rem; opacity: .92; word-break: break-word; }
.vg-card-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.vg-dl, .vg-del, .vg-regen { flex: 1; text-align: center; padding: .4rem; border-radius: 8px; font-size: .82rem; text-decoration: none; border: 1px solid var(--border, #e5e7eb); background: var(--card, #fff); color: var(--text, #333); cursor: pointer; transition: .15s; }
.vg-regen:hover { border-color: var(--brand, #6d5efc); color: var(--brand, #6d5efc); }
.vg-dl { background: var(--brand, #6d5efc); color: #fff; border-color: var(--brand, #6d5efc); }
.vg-del.vg-del-armed { background: #dc2626; color: #fff; border-color: #dc2626; }
.vg-dl { background: var(--brand, #6d5efc); color: #fff; border-color: var(--brand, #6d5efc); }
.vg-meta { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; }
.vg-badge { font-size: .7rem; padding: .15rem .45rem; border-radius: 6px; background: rgba(109,94,252,.12); color: var(--brand, #6d5efc); }
.vg-cap { font-size: .8rem; color: var(--text-2, #666); margin-top: .4rem; line-height: 1.4; max-height: 2.8em; overflow: hidden; }