.batch-video-dialog { width: min(1180px, calc(100vw - 32px)); }
.batch-video-page { max-height: min(840px, calc(100vh - 32px)); overflow: auto; background: #f7fafc; }
.batch-video-page > header small, .batch-toolbar span, .batch-card header small, .batch-queue header small, .batch-empty { color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.5; }
.batch-video-page > header small { display: block; margin-top: 4px; }
.batch-toolbar, .batch-layout, .batch-queue-grid { display: grid; gap: 12px; }
.batch-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 120px auto; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.batch-toolbar label, .batch-setting-grid label { display: grid; gap: 5px; min-width: 0; }
.batch-toolbar select, .batch-setting-grid select, .batch-setting-grid input { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; color: var(--text); }
.batch-quota { display: grid; gap: 5px; min-height: 58px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbff; }
.batch-quota strong { color: var(--ink); font-size: 18px; line-height: 1; }
.batch-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(34, 185, 129, .22); border-radius: 8px; background: #f0fbf6; }
.batch-context[hidden] { display: none; }
.batch-context div, .batch-context strong, .batch-context span, .batch-context small { min-width: 0; }
.batch-context strong, .batch-context span { display: block; }
.batch-context strong { color: #176b4d; font-size: 13px; }
.batch-context span, .batch-context small { overflow-wrap: anywhere; color: #2c6a56; font-size: 12px; font-weight: 800; }
.batch-layout { grid-template-columns: minmax(220px, .72fr) minmax(220px, .78fr) minmax(240px, .82fr) minmax(220px, .6fr); align-items: start; }
.batch-card, .batch-phone-preview, .batch-queue { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(31, 45, 61, .06); }
.batch-card, .batch-phone-preview, .batch-queue { display: grid; gap: 12px; padding: 12px; }
.batch-card header, .batch-queue header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.batch-card header strong, .batch-queue header strong { color: var(--ink); font-size: 14px; }
.batch-template-list, .batch-materials [data-batch-materials], .batch-setting-grid, .batch-draft-list, [data-batch-draft-list] { display: grid; gap: 8px; }
.batch-template-tabs, .batch-template-filters { display: flex; align-items: center; gap: 8px; min-width: 0; }
.batch-template-tabs button, .batch-template-tabs span { min-height: 32px; border: 0; background: transparent; color: #526178; font-size: 12px; font-weight: 900; }
.batch-template-tabs .active { color: #335bff; }
.batch-template-filters .compact { flex: 1 1 auto; min-width: 0; }
.batch-template-filter-icon { flex: 0 0 34px !important; padding: 0 !important; }
.batch-template-list label, .batch-material-row, .batch-draft-row { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.batch-template-list label, .batch-material-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px; }
.batch-material-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.batch-material-tabs span { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 0 8px; border-radius: 8px; background: #f5f7ff; color: #47566f; font-size: 11px; font-weight: 900; line-height: 1; }
.batch-material-tabs .active { background: #edf2ff; color: #365dff; }
.batch-template-list input, .batch-material-row input { margin-top: 3px; accent-color: var(--cyan); }
.batch-template-list input:checked + span { color: #006e8c; }
.batch-template-list strong, .batch-template-list small, .batch-template-list em, .batch-material-row strong, .batch-material-row small, .batch-draft-row strong, .batch-draft-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.batch-template-list strong, .batch-material-row strong, .batch-draft-row strong { color: var(--ink); font-size: 13px; white-space: nowrap; }
.batch-template-list small, .batch-material-row small, .batch-draft-row small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.batch-template-list em { margin-top: 7px; color: #53657a; font-size: 12px; font-style: normal; line-height: 1.5; }
.batch-phone { display: grid; align-content: end; min-height: 360px; aspect-ratio: 9 / 16; max-height: 520px; padding: 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(10, 18, 30, .16), rgba(10, 18, 30, .78)), url("../aivideo_final_premium_site/assets/scenes/scene-business.webp") center / cover; color: #fff; box-shadow: inset 0 0 0 8px rgba(14, 22, 32, .9); }
.batch-phone > span, .batch-phone > small { color: rgba(255, 255, 255, .72); font-size: 11px; font-weight: 900; }
.batch-phone strong { margin-top: 8px; font-size: 20px; line-height: 1.2; }
.batch-phone p { margin: 10px 0; font-size: 13px; font-weight: 800; line-height: 1.5; }
.batch-queue-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr); }
.batch-draft-row { display: grid; gap: 5px; width: 100%; padding: 10px; color: inherit; text-align: left; }
.batch-draft-row.active { border-color: #74cbe8; background: var(--cyan-soft); }
.batch-progress-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbff; }
.batch-progress-card span { color: var(--muted); font-size: 11px; font-weight: 900; }
.batch-progress-card strong, .batch-progress-card p { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.batch-progress-card p { grid-column: 1 / -1; margin: 0; padding: 8px; border-radius: 8px; background: #fff1f0; color: #a13d33; }
.batch-failure-detail { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid rgba(180, 35, 24, .22); border-radius: 8px; background: #fff7f6; }
.batch-failure-detail header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.batch-failure-detail strong { color: #8a1f14; font-size: 13px; }
.batch-failure-detail p, .batch-failure-detail span, .batch-failure-detail small { margin: 0; overflow-wrap: anywhere; color: #7a271a; font-size: 12px; font-weight: 800; }
.batch-failure-detail div { display: grid; gap: 5px; }
.batch-failure-detail b { margin-right: 6px; color: #4d1d16; }
.batch-mobile-review { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid rgba(34, 185, 129, .22); border-radius: 8px; background: #f3fbf7; }
.batch-mobile-preview { display: grid; align-content: end; min-height: 220px; aspect-ratio: 9 / 16; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(5, 10, 18, .12), rgba(5, 10, 18, .82)), url("../aivideo_final_premium_site/assets/scenes/scene-industry.webp") center / cover; color: #fff; box-shadow: inset 0 0 0 7px rgba(14, 22, 32, .9); }
.batch-mobile-preview span, .batch-mobile-preview small { color: rgba(255, 255, 255, .72); font-size: 11px; font-weight: 900; }
.batch-mobile-preview strong { margin-top: 8px; overflow-wrap: anywhere; color: #fff; font-size: 18px; line-height: 1.2; }
.batch-mobile-review-body { display: grid; gap: 10px; }
.batch-mobile-review-body p { margin: 0; overflow-wrap: anywhere; color: #285f4b; font-size: 12px; font-weight: 800; line-height: 1.5; }
.batch-mobile-review-body div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.batch-publish-context { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid rgba(20, 132, 189, .2); border-radius: 8px; background: #f1f9fd; }
.batch-publish-context header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.batch-publish-context strong { color: #155f86; font-size: 13px; }
.batch-publish-context p, .batch-publish-context small { margin: 0; overflow-wrap: anywhere; color: #28576b; font-size: 12px; font-weight: 800; }
.batch-publish-context div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.batch-empty { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (max-width: 1080px) { .batch-toolbar, .batch-layout, .batch-queue-grid, .batch-context { grid-template-columns: 1fr; }
.batch-phone { justify-self: center; width: min(260px, 100%); }
}
@media (max-width: 620px) { .batch-mobile-review-body div, .batch-publish-context div { grid-template-columns: 1fr; }
.batch-mobile-preview { justify-self: center; width: min(220px, 100%); }
.batch-video-dialog { width: 100vw; max-height: 100vh; border-radius: 0; }
}
@media (min-width: 961px) { .batch-video-dialog { position: fixed; inset: 0 0 0 204px; width: auto; height: 100dvh; max-width: none; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 24px 0 0 24px; background: transparent; box-shadow: none; overflow: visible; }
.batch-video-dialog::backdrop { background: transparent; }
.batch-video-dialog::after { position: absolute; top: 100%; right: 0; left: 0; height: 188px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); content: ""; pointer-events: none; }
body:has(.batch-video-dialog[open]) .app-shell { grid-template-columns: 204px minmax(0, 1fr); height: 100vh; min-height: 0; max-height: 100vh; overflow: hidden; }
body:has(.batch-video-dialog[open]) .workspace { height: 100vh; min-height: 0; max-height: 100vh; overflow: hidden; }
body:has(.batch-video-dialog[open]) .sidebar { height: 100vh; min-height: 0; max-height: 100vh; gap: 20px; padding: 18px 18px 26px; }
body:has(.batch-video-dialog[open]) .brand { gap: 10px; padding: 8px 8px 16px; }
body:has(.batch-video-dialog[open]) .brand img { width: 32px; height: 32px; }
body:has(.batch-video-dialog[open]) .brand strong { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
body:has(.batch-video-dialog[open]) .brand { gap: 8px; padding: 0 6px 16px; }
body:has(.batch-video-dialog[open]) .brand .brand-logo-full { display: none !important; }
body:has(.batch-video-dialog[open]) .brand .brand-logo-emblem { display: block !important; content: url("assets/brand/logo-emblem.png"); width: 30px !important; height: 30px !important; object-fit: contain; filter: drop-shadow(0 0 14px rgba(39, 213, 255, .72)); }
body:has(.batch-video-dialog[open]) .brand strong { position: static !important; display: inline !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; color: #fff; font-size: 16px; font-weight: 900; line-height: 1; letter-spacing: 0; white-space: nowrap !important; text-overflow: clip; }
body:has(.batch-video-dialog[open]) .brand strong em { color: #fff; font-style: normal; font-weight: 900; }
body:has(.batch-video-dialog[open]) .nav a { height: 54px; gap: 13px; padding: 0 14px; font-size: 14px; }
body:has(.batch-video-dialog[open]) .side-card { position: relative; overflow: visible; margin-bottom: 64px; padding: 18px 14px 16px; }
body:has(.batch-video-dialog[open]) .side-visual { height: 148px; margin: -10px 0 14px; }
body:has(.batch-video-dialog[open]) .side-card > div:not(.side-visual) { display: grid; justify-items: center; gap: 0; text-align: center; }
body:has(.batch-video-dialog[open]) .side-card > div:not(.side-visual) span { font-size: 0; }
body:has(.batch-video-dialog[open]) .side-card > div:not(.side-visual) span::before { content: "星河 AIVideo"; color: #f8fbff; font-size: 14px; font-weight: 950; line-height: 1.25; }
body:has(.batch-video-dialog[open]) #sideEngineStatus { display: none; }
body:has(.batch-video-dialog[open]) #sideEngineCopy { margin-top: 6px; font-size: 0; text-align: center; }
body:has(.batch-video-dialog[open]) #sideEngineCopy::before { content: "商家短视频获客工厂"; display: block; color: #f8fbff; font-size: 12px; font-weight: 900; line-height: 1.45; white-space: nowrap; }
body:has(.batch-video-dialog[open]) #sideEngineCopy::after { content: "让每一次发布，都带来生意增长"; display: block; margin-top: 2px; color: rgba(235, 243, 252, .64); font-size: 11px; font-weight: 700; line-height: 1.45; }
body:has(.batch-video-dialog[open]) .side-card footer { position: absolute; top: calc(100% + 18px); left: 0; right: 0; margin: 0; padding: 0; border-top: 0; }
.batch-video-page { align-content: start; height: 100dvh; max-height: 100dvh; gap: 14px; padding: 20px 24px 26px; overflow: auto; border-radius: 24px 0 0 24px; background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); }
.batch-page-head, .batch-head-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.batch-page-head strong { color: #101828; font-size: 25px; font-weight: 950; letter-spacing: 0; }
.batch-page-head strong em, .batch-card header em, .batch-queue header em { color: #7c879a; font-style: normal; font-weight: 850; }
.batch-page-head small { display: block; margin-top: 6px; color: #667085; font-size: 14px; }
.batch-head-actions .notify-button { width: 34px; height: 38px; color: #111827; border-radius: 12px; background: transparent; box-shadow: none; }
.batch-head-actions .notify-button::before { width: 13px; height: 16px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 5px 5px; box-shadow: 0 12px 0 -10px currentColor, 0 17px 0 -15px currentColor; }
.batch-head-actions .notify-button::after { top: 0; right: 0; width: 15px; height: 15px; color: #fff; border: 2px solid #f4f8ff; background: #ff1f32; font-size: 9px; line-height: 1; }
.batch-head-actions .icon-close { flex: 0 0 auto; width: 34px; height: 34px; color: #475569; border-color: rgba(38, 60, 86, .12); border-radius: 10px; background: rgba(255, 255, 255, .82); box-shadow: 0 10px 22px rgba(31, 45, 61, .06); }
.batch-head-actions .icon-close:hover { color: #111827; border-color: rgba(51, 91, 255, .26); background: #fff; }
.batch-toolbar, .batch-context, .batch-video-page > footer { display: none; }
.batch-layout { display: grid; grid-template-columns: 180px 238px 306px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.batch-card, .batch-phone-preview, .batch-queue, .batch-metrics { border: 1px solid rgba(215, 224, 240, .82); border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 24px rgba(31, 45, 61, .045); }
.batch-card, .batch-phone-preview { height: 520px; min-height: 520px; padding: 12px; }
.batch-templates { grid-column: 1; grid-row: 1; }
.batch-materials { grid-column: 2; grid-row: 1; }
.batch-phone-preview { grid-column: 3; grid-row: 1; display: grid; place-items: center; background: transparent; border: 0; box-shadow: none; padding: 0; }
.batch-settings { grid-column: 4; grid-row: 1; }
.batch-card header, .batch-queue header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.batch-card header strong, .batch-queue header strong { color: #101828; font-size: 15px; font-weight: 950; }
.batch-card header small, .batch-queue header small { display: block; margin-top: 4px; color: #667085; font-size: 11px; font-weight: 850; }
.batch-card header .compact, .batch-queue header .compact { min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
.batch-queue header .compact { width: auto; }
.batch-reset-defaults { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: #667085; background: transparent; }
.batch-reset-defaults i { width: 13px; height: 13px; }
.batch-settings > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.batch-settings > header strong { min-width: 0; }
.batch-settings > header .batch-reset-defaults { width: auto; min-width: 0; min-height: 30px; padding: 0 8px; justify-self: end; white-space: nowrap; }
.batch-templates header { display: none; }
.batch-templates header strong { white-space: nowrap; }
.batch-templates header .compact { min-width: 66px; padding: 0 8px; font-size: 11px; }
.batch-template-tabs { gap: 24px; min-height: 38px; border-bottom: 1px solid rgba(225, 231, 244, .96); }
.batch-template-tabs button, .batch-template-tabs span { position: relative; min-height: 38px; padding: 0; color: #263656; font-size: 14px; font-weight: 950; }
.batch-template-tabs .active { color: #335bff; }
.batch-template-tabs .active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 999px; background: #335bff; content: ""; }
.batch-template-filters { gap: 8px; margin-top: -2px; }
.batch-template-filters .compact { min-height: 34px; border-radius: 8px; background: #fbfdff; color: #526178; font-size: 11px; }
.batch-template-filter-icon { flex-basis: 34px !important; font-size: 13px !important; }
.batch-materials header small { display: none; }
.batch-materials header { gap: 6px; }
.batch-materials header > div { flex: 0 0 auto; min-width: 0; }
.batch-materials header strong { white-space: nowrap; }
.batch-materials header .compact { width: 88px; min-height: 30px; padding: 0 6px; font-size: 11px; }
.batch-template-list { max-height: 406px; overflow: auto; }
.batch-template-list label { position: relative; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; min-height: 78px; padding: 8px; border-color: rgba(222, 228, 240, .95); border-radius: 12px; background: #fbfdff; }
.batch-template-list input { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; accent-color: #16c6a5; }
.batch-template-list img { width: 64px; height: 64px; border-radius: 9px; object-fit: cover; }
.batch-template-list strong { font-size: 12px; }
.batch-template-list small { color: #44516a; font-size: 10px; }
.batch-template-list em { display: inline-block; max-width: 100%; margin-top: 7px; overflow: hidden; padding: 4px 7px; border-radius: 6px; background: #f1f5ff; color: #6b76a8; font-size: 10px; font-weight: 900; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.batch-material-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: -1px 0 1px; }
.batch-material-tabs span { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 0 6px; border-radius: 8px; background: #f5f7ff; color: #47566f; font-size: 10.5px; font-weight: 900; line-height: 1; }
.batch-material-tabs .active { background: #edf2ff; color: #365dff; box-shadow: inset 0 0 0 1px rgba(76, 112, 255, .18); }
.batch-materials [data-batch-materials] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 334px; overflow: auto; }
.batch-material-row { position: relative; display: grid; min-height: 106px; overflow: hidden; padding: 0; border: 0; border-radius: 12px; background: #e8edf6; box-shadow: inset 0 0 0 1px rgba(222, 228, 240, .75); }
.batch-material-row input { position: absolute; top: 8px; right: 8px; z-index: 3; margin: 0; accent-color: #16c6a5; }
.batch-material-row img { width: 100%; height: 106px; object-fit: cover; }
.batch-material-row span { position: absolute; right: 7px; bottom: 7px; left: auto; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, .66); }
.batch-material-row strong, .batch-material-row small { color: #fff; }
.batch-material-row strong { display: none; }
.batch-material-row small { margin: 0; color: #fff; font-size: 0; line-height: 1; }
.batch-material-row small::after { content: "00:06"; font-size: 10px; font-weight: 950; }
.batch-material-row:nth-child(1) small::after { content: "00:02"; }
.batch-material-row:nth-child(3) small::after, .batch-material-row:nth-child(6) small::after { content: "00:15"; }
.batch-material-row:nth-child(4) small::after { content: "00:05"; }
.batch-phone { position: relative; width: 280px; min-height: 520px; max-height: none; padding: 44px 26px 28px; border: 8px solid #0d111a; border-radius: 36px; background: linear-gradient(180deg, rgba(8, 13, 22, .18) 0%, rgba(8, 13, 22, .08) 38%, rgba(8, 13, 22, .32) 100%), url("../aivideo_final_premium_site/assets/generated/pc06-batch-phone-drink-preview-v2.png") center / cover no-repeat, #16202a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 38px rgba(15, 23, 42, .28); }
.batch-phone::before { position: absolute; top: 12px; left: 50%; width: 72px; height: 18px; border-radius: 0 0 13px 13px; background: #0d111a; content: ""; transform: translateX(-50%); }
.batch-phone::after { position: absolute; right: 24px; top: 290px; display: grid; place-items: center; width: 72px; height: 72px; border: 5px solid rgba(255, 255, 255, .92); border-radius: 999px; background: radial-gradient(circle at center, #fffaf1 0 58%, #ffe2d6 59% 100%); color: #e2412c; content: "限时特惠\A¥19.9"; font-size: 10.5px; font-weight: 950; line-height: 1.05; text-align: center; white-space: pre; box-shadow: 0 12px 28px rgba(153, 43, 35, .28); }
.batch-phone > span { position: absolute; top: 52px; right: 20px; left: auto; display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, .92); color: rgba(255, 255, 255, .86); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); font-size: 0; }
.batch-phone > span::before { width: 0; height: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #1f2937; content: ""; }
.batch-phone > strong { position: absolute; top: 94px; left: 28px; right: 28px; max-width: none; margin: 0; color: #fff; font-size: 34px; font-weight: 950; line-height: 1.06; text-align: center; text-shadow: 0 3px 12px rgba(0, 0, 0, .35); }
.batch-phone-accent { position: absolute; top: 140px; left: 28px; right: 28px; color: #ffbf24; font-size: 30px; font-style: normal; font-weight: 950; line-height: 1.08; text-align: center; text-shadow: 0 3px 12px rgba(0, 0, 0, .35); }
.batch-phone-accent[hidden] { display: none; }
.batch-phone > p { position: absolute; top: 184px; left: 32px; right: 32px; margin: 0; color: #fff; font-size: 12px; font-weight: 900; text-align: center; text-shadow: 0 2px 9px rgba(0, 0, 0, .38); }
.batch-phone > strong, .batch-phone-accent, .batch-phone > p { display: block; }
.batch-phone > small { position: absolute; left: 28px; right: 28px; bottom: 66px; color: rgba(255, 255, 255, .84); text-align: center; }
.batch-phone-player { position: absolute; left: 27px; right: 27px; bottom: 26px; display: grid; grid-template-columns: 14px auto minmax(0, 1fr) 15px; gap: 8px; align-items: center; color: #fff; }
.batch-phone-player b { width: 11px; height: 13px; border-right: 4px solid currentColor; border-left: 4px solid currentColor; }
.batch-phone-player span { color: rgba(255, 255, 255, .9); font-size: 10px; font-weight: 900; white-space: nowrap; }
.batch-phone-player i { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .38); }
.batch-phone-player i::before { position: absolute; inset: 0 36% 0 0; border-radius: inherit; background: #fff; content: ""; }
.batch-phone-player i::after { position: absolute; top: 50%; left: 64%; width: 9px; height: 9px; border-radius: 999px; background: #fff; content: ""; transform: translate(-50%, -50%); }
.batch-phone-player em { position: relative; width: 15px; height: 15px; font-style: normal; }
.batch-phone-player em::before, .batch-phone-player em::after { position: absolute; width: 5px; height: 5px; border-color: currentColor; content: ""; }
.batch-phone-player em::before { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.batch-phone-player em::after { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.batch-setting-grid { gap: 5px; }
.batch-setting-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; margin: 0; padding: 0; border: 0; }
.batch-setting-row > span, .batch-setting-row legend { color: #263656; font-size: 10.8px; font-weight: 950; }
.batch-setting-row legend { grid-column: 1; grid-row: 1; padding: 0; }
.batch-inline-row, .batch-switch-row { grid-template-columns: 76px minmax(0, 1fr) 64px; }
.batch-ratio-options { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.batch-ratio-options label { display: block; min-width: 0; }
.batch-ratio-options input { position: absolute; opacity: 0; pointer-events: none; }
.batch-ratio-options span { display: grid; min-height: 24px; place-items: center; border: 1px solid rgba(215, 223, 238, .95); border-radius: 7px; background: #fbfdff; color: #4a5870; font-size: 10.5px; font-weight: 900; }
.batch-ratio-options label:has(input:checked) span { border-color: #61b7ff; background: #eef7ff; color: #225cff; box-shadow: inset 0 0 0 1px rgba(44, 102, 255, .18); }
.batch-range-control { display: grid; gap: 1px; }
.batch-range-control input { width: 100%; min-height: 10px; accent-color: #684cff; }
.batch-range-control small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); color: #8a94a8; font-size: 8.5px; font-weight: 850; }
.batch-range-control small b { font-weight: 850; }
.batch-range-control small b:nth-child(2) { text-align: center; }
.batch-range-control small b:last-child { text-align: right; }
.batch-setting-grid select, .batch-setting-grid input:not([type="range"]):not([type="radio"]):not([type="checkbox"]), .batch-fake-select { width: 100%; min-width: 0; min-height: 25px; border: 1px solid rgba(215, 223, 238, .95); border-radius: 7px; background: #fbfdff; color: #34405a; font-size: 10.5px; font-weight: 850; }
.batch-setting-grid select, .batch-setting-grid input:not([type="range"]):not([type="radio"]):not([type="checkbox"]) { padding: 0 9px; }
.batch-fake-select { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; padding: 0 8px; text-align: left; }
.batch-fake-select i { display: grid; width: 14px; height: 14px; place-items: center; border-radius: 4px; background: #667085; color: #fff; font-style: normal; font-size: 10px; }
.batch-fake-select img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.batch-fake-select em { margin-left: auto; color: #8a94a8; font-size: 8.5px; font-style: normal; font-weight: 850; }
.batch-inline-row .compact { min-height: 24px; padding: 0 6px; border-radius: 7px; font-size: 9.5px; }
.batch-switch { display: grid; justify-self: end; }
.batch-switch input { position: absolute; opacity: 0; pointer-events: none; }
.batch-switch span { position: relative; display: block; width: 32px; height: 18px; border-radius: 999px; background: #e3e9f5; box-shadow: inset 0 0 0 1px rgba(190, 202, 222, .9); }
.batch-switch span::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(31, 45, 61, .22); content: ""; transition: transform .18s ease; }
.batch-switch input:checked + span { background: #5d62ff; box-shadow: inset 0 0 0 1px rgba(82, 80, 255, .7); }
.batch-switch input:checked + span::after { transform: translateX(14px); }
.batch-settings .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin-top: 4px; border-radius: 10px; background: linear-gradient(90deg, #1c66ff, #7246ff 48%, #f148d1); font-size: 15px; box-shadow: 0 18px 34px rgba(86, 76, 255, .24); }
.batch-settings .primary-button i { width: 17px; height: 17px; }
.batch-queue { gap: 0; height: 314px; min-height: 314px; overflow: hidden; padding: 0; }
.batch-queue header { min-height: 58px; padding: 0 16px; }
.batch-queue header > div:last-child { display: flex; gap: 8px; }
.batch-queue-head, .batch-draft-row { display: grid; grid-template-columns: minmax(240px, 1fr) 96px 144px 96px 92px 112px 86px; gap: 10px; align-items: center; }
.batch-queue-head { min-height: 40px; padding: 0 18px; border-top: 1px solid rgba(232, 236, 246, .95); border-bottom: 1px solid rgba(232, 236, 246, .95); background: linear-gradient(180deg, #f8fbff, #f2f6fc); color: #556173; font-size: 11px; font-weight: 950; }
.batch-queue-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; height: 216px; overflow: hidden; }
[data-batch-draft-list] { gap: 0; height: 216px; min-height: 0; overflow: auto; }
[data-batch-progress] { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; min-height: 0; max-height: 132px; overflow: auto; padding: 10px 14px; border-top: 1px solid rgba(232, 236, 246, .95); background: #fbfdff; box-shadow: 0 -14px 26px rgba(31, 45, 61, .08); }
[data-batch-progress][hidden] { display: none; }
[data-batch-progress] .batch-progress-card { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; }
[data-batch-progress] .batch-publish-context { margin-top: 10px; }
[data-batch-progress] .batch-publish-context div { grid-template-columns: 1fr; }
[data-batch-progress] .batch-mobile-preview { min-height: 124px; aspect-ratio: auto; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 4px rgba(14, 22, 32, .86); }
[data-batch-progress] .batch-mobile-preview strong { font-size: 14px; line-height: 1.2; }
[data-batch-progress] .batch-mobile-preview span, [data-batch-progress] .batch-mobile-preview small { font-size: 10px; }
[data-batch-progress] .batch-mobile-review-body div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.batch-draft-row { width: 100%; min-height: 43px; padding: 4px 18px; border: 0; border-bottom: 1px solid rgba(218, 226, 242, .95); border-radius: 0; background: #fff; cursor: pointer; }
.batch-draft-row.active { background: #fbfdff; }
.batch-row-title { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: center; }
.batch-row-title b { color: #9aa4b2; font-size: 11px; }
.batch-row-title strong, .batch-row-title small, .batch-row-template em, .batch-row-template small, .batch-row-spec strong, .batch-row-spec small, .batch-row-eta strong, .batch-row-eta small, .batch-row-status strong, .batch-row-status small, .batch-row-actions em, .batch-row-actions strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-row-title strong { color: #182033; font-size: 12px; font-weight: 950; }
.batch-row-title small, .batch-row-template small, .batch-row-spec small, .batch-row-eta small, .batch-row-status small, .batch-row-actions em { color: #7c879a; font-size: 10px; font-weight: 850; }
.batch-row-title small, .batch-row-template small, .batch-row-spec small, .batch-row-status small, .batch-row-actions em { display: none; }
.batch-row-template { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.batch-row-template img, .batch-row-materials img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
.batch-row-template em { color: #263656; font-size: 11px; font-style: normal; font-weight: 900; }
.batch-row-materials { display: flex; }
.batch-row-materials img { margin-left: -8px; border: 2px solid #fff; }
.batch-row-materials img:first-child { margin-left: 0; }
.batch-row-spec strong, .batch-row-eta strong, .batch-row-status strong { color: #263656; font-size: 11px; font-weight: 950; }
.batch-row-status { display: grid; gap: 4px; }
.batch-row-status i { display: block; width: 88px; height: 4px; overflow: hidden; border-radius: 999px; background: #e6ebf5; }
.batch-row-status i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6548ff, #1f75ff); }
.batch-row-status.rendering strong { color: #4f46e5; }
.batch-row-status.rendering i b { background: linear-gradient(90deg, #6548ff, #1f75ff); }
.batch-row-status.pending strong { color: #667085; }
.batch-row-status.pending i b { background: #b7c2d6; }
.batch-row-status.ready i b { background: linear-gradient(90deg, #20c997, #16b978); }
.batch-row-actions { display: grid; gap: 4px; justify-items: end; }
.batch-row-actions strong { padding: 6px 10px; border: 1px solid rgba(215, 223, 238, .95); border-radius: 8px; background: #fff; color: #34405a; font-size: 11px; font-weight: 950; }
.batch-row-actions strong.queue-action-rendering { border-color: rgba(96, 91, 255, .28); background: #f5f6ff; color: #4f46e5; }
.batch-row-actions strong.queue-action-pending { color: #667085; }
.batch-row-actions strong.queue-action-ready { color: #138a5b; }
.batch-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; min-height: 88px; overflow: hidden; }
.batch-metrics article { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 14px 18px; border-right: 1px solid rgba(232, 236, 246, .95); }
.batch-metrics article:first-child { position: relative; padding-right: 86px; }
.batch-metrics article:first-child::before { position: absolute; top: 50%; right: 27px; z-index: 1; color: #283155; content: "85%"; font-size: 13px; font-weight: 950; transform: translateY(-50%); }
.batch-metrics article:first-child::after { position: absolute; top: 50%; right: 18px; width: 54px; height: 54px; border-radius: 999px; background: radial-gradient(circle at center, #fff 0 48%, transparent 49%), conic-gradient(#5d62ff 0 85%, #dce7ff 85% 100%); content: ""; transform: translateY(-50%); box-shadow: 0 10px 22px rgba(89, 94, 255, .16); }
.batch-metrics article:last-child { border-right: 0; }
.batch-metrics span { color: #5c667a; font-size: 12px; font-weight: 900; }
.batch-metrics strong { color: #101828; font-size: 26px; line-height: 1; }
.batch-metrics small { color: #7c879a; font-size: 11px; font-weight: 850; }
.batch-ai-tip { position: relative; grid-template-columns: minmax(0, 1fr) 56px; align-content: center; align-items: center; column-gap: 10px; padding: 12px 14px 12px 16px; background: radial-gradient(circle at 88% 55%, rgba(95, 111, 255, .18), transparent 28%), #fff; }
.batch-ai-tip span, .batch-ai-tip strong, .batch-ai-tip small { grid-column: 1; min-width: 0; }
.batch-ai-tip strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.2; }
.batch-ai-tip small { font-size: 10.5px; line-height: 1.35; }
.batch-ai-tip::after { grid-column: 2; grid-row: 1 / span 3; justify-self: end; width: 56px; height: 56px; background: url("../aivideo_final_premium_site/assets/generated/pc01-ai-robot.png") center / contain no-repeat; content: ""; }
}
@media (max-width: 1240px) and (min-width: 961px) { .batch-layout { grid-template-columns: 176px 240px 270px minmax(0, 1fr); gap: 12px; }
.batch-card, .batch-phone-preview { min-height: 492px; }
.batch-phone { width: 258px; min-height: 486px; }
.batch-queue-head, .batch-draft-row { grid-template-columns: minmax(200px, 1fr) 82px 116px 78px 82px 96px 72px; gap: 8px; }
[data-batch-progress] { padding: 10px; }
}