body.video-lab-page {
    --images-sidebar-gap: 1rem;
    --images-sidebar-width: 320px;
    --images-navbar-height: 62px;
    --images-panel-radius: 12px;
    --images-panel-shadow: 4px 0 16px color-mix(in srgb, var(--color-bg-inverse) 30%, transparent);
    overflow: hidden;
    background: transparent;
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-deep) 22%, transparent), color-mix(in srgb, var(--color-bg-deep) 22%, transparent)),
        radial-gradient(circle at 18% 2%, color-mix(in srgb, var(--color-brand-primary) 17%, transparent), transparent 32%),
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-deep) 14%, transparent), transparent),
        url('/static/site/vl/img/bg-dark.png?v=20260228-4');
    background-size: auto, auto, auto, auto, 780px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-position: center;
}

body.video-lab-page::before,
body.video-lab-page::after {
    content: "";
    position: fixed;
    top: var(--images-navbar-height);
    bottom: 0;
    width: var(--images-sidebar-gap);
    background: transparent;
    pointer-events: none;
    z-index: 45;
}

body.video-lab-page::before {
    left: 0;
}

body.video-lab-page::after {
    right: 0;
}

body.video-lab-page .app-layout {
    height: calc(100dvh - var(--images-navbar-height));
    position: relative;
    background: transparent;
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-deep) 22%, transparent), color-mix(in srgb, var(--color-bg-deep) 22%, transparent)),
        radial-gradient(circle at 18% 2%, color-mix(in srgb, var(--color-brand-primary) 17%, transparent), transparent 32%),
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-deep) 14%, transparent), transparent),
        url('/static/site/vl/img/bg-dark.png?v=20260228-4');
    background-size: auto, auto, auto, auto, 780px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-position: center;
}

body.video-lab-page .app-layout::before,
body.video-lab-page .app-layout::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: transparent;
    z-index: 45;
}

body.video-lab-page .app-layout::before {
    top: 0;
    left: 0;
    right: 0;
    height: var(--images-sidebar-gap);
}

body.video-lab-page .app-layout::after {
    top: 0;
    bottom: 0;
    left: calc(
        var(--images-sidebar-gap) +
        var(--video-lab-workbench-rail-width) +
        var(--video-lab-workbench-rail-gap) +
        var(--images-sidebar-width)
    );
    width: var(--images-sidebar-gap);
}

body.video-lab-page .video-lab-sidebar-shell {
    width: var(--images-sidebar-width);
    margin: var(--images-sidebar-gap);
    flex-shrink: 0;
    align-self: flex-start;
    height: calc(100% - (var(--images-sidebar-gap) * 2));
    transition: width 0.24s ease, margin 0.24s ease, opacity 0.2s ease, transform 0.24s ease;
    transform-origin: left center;
}

body.video-lab-page .video-lab-sidebar {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--images-panel-radius);
    box-shadow: var(--images-panel-shadow);
    overflow: hidden;
}

body.video-lab-page .main-content-area {
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    /* Match rail/sidebar bottom inset (they use margin) so all 3 columns end aligned. */
    margin-bottom: var(--images-sidebar-gap);
    transition: transform 0.28s ease, opacity 0.28s ease;
}

body.video-lab-page .page-layout {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: var(--images-sidebar-gap) !important;
    /* Bottom gap now lives on .main-content-area margin (viewport-level) to keep
       the scroll frame aligned with rail/sidebar; inner padding would double it. */
    padding-bottom: 0 !important;
}

body.video-lab-page .media-tab-content-spaced {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.video-lab-page .workspace-topbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 0 0.8rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.video-lab-page .workspace-content.workspace-content-empty {
    display: flex;
    margin-top: var(--images-sidebar-gap);
}

body.video-lab-page .workspace-content {
    margin-top: 0;
}

body.video-lab-page.video-lab-project-page .workspace-content {
    margin-top: var(--images-sidebar-gap);
}

body.video-lab-page .media-tab-content-spaced .empty-state {
    width: 100%;
    flex: 1;
    margin-top: 0;
}

body.video-lab-page .category-sidebar-footer {
    border-top: 1px solid var(--color-border);
    padding: 0.75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    background: var(--color-bg-card);
    flex-shrink: 0;
    margin-top: auto;
    min-height: 65px;
    align-items: center;
}

body.video-lab-page .category-sidebar-footer .sidebar-action-btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
    font-size: 0.86rem;
    padding: 0.5rem;
}

body.video-lab-page .video-lab-sidebar .tree-node-content.active {
    background: var(--color-brand-primary-15);
}

body.video-lab-page .video-lab-sidebar .tree-node-content:hover {
    background: var(--color-bg-card-hover);
}

body.video-lab-page .video-lab-sidebar .tree-node-content.active:hover {
    background: var(--color-brand-primary-15);
}

body.video-lab-page .video-lab-sidebar .dropdown-custom {
    width: 100%;
}

body.video-lab-page .video-lab-sidebar .dropdown-custom-menu a {
    text-decoration: none;
}

body.video-lab-page .video-lab-workbench-shell.is-sidebar-collapsed .video-lab-sidebar-shell {
    width: 0;
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-0.5rem);
}

html.video-lab-prefers-collapsed body.video-lab-page .video-lab-sidebar-shell {
    width: 0;
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-0.5rem);
}

body.video-lab-page .video-lab-workbench-shell.is-sidebar-collapsed .app-layout::after {
    opacity: 0;
}

html.video-lab-prefers-collapsed body.video-lab-page .app-layout::after {
    opacity: 0;
}

body.video-lab-page .video-lab-workbench-shell.is-sidebar-collapsed .page-layout {
    padding-left: var(--images-sidebar-gap) !important;
}

html.video-lab-prefers-collapsed body.video-lab-page .page-layout {
    padding-left: var(--images-sidebar-gap) !important;
}

body.video-lab-page.video-lab-project-page .page-layout {
    padding-left: var(--images-sidebar-gap) !important;
}

body.video-lab-page.video-lab-project-page .app-layout::after {
    display: block;
    opacity: 0;
}

body.video-lab-page .video-lab-empty-state {
    background: var(--color-bg-card);
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 4));
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-note {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal {
    width: 792px;
    max-width: 95vw;
    max-height: min(88dvh, 780px);
    border: 0;
    box-shadow: 0 24px 64px color-mix(in srgb, var(--color-bg-inverse) 42%, transparent);
    overflow: hidden;
    --video-lab-settings-surface: var(--color-bg-input);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal:has(.video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field) {
    height: 95dvh;
    max-height: 95dvh;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal:has(.video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field) .modal-header,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal:has(.video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field) .modal-footer {
    flex: 0 0 auto;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .modal-header {
    align-items: flex-start;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-brand-primary-15) 72%, transparent), transparent 62%),
        var(--color-bg-card);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-title-line {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-title-line h2 {
    margin: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-subtitle {
    margin: 0.3rem 0 0;
    color: var(--color-success);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-subtitle-context {
    display: block;
    margin-top: 0.18rem;
    color: var(--color-text-secondary);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-subtitle-context[hidden] {
    display: none !important;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
    overflow: auto;
    padding-top: 0.75rem;
    padding-bottom: 2rem;
    scroll-padding-bottom: 2rem;
    background: var(--video-lab-settings-surface);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-main:has(.video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field) {
    flex: 1 1 auto;
    gap: 1rem;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
    scroll-padding-bottom: 1rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-scopebar,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profilebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-scope-btn,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profile-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 4rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-scope-btn span,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profile-btn span {
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-scope-btn strong,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profile-btn strong {
    margin-top: 0.28rem;
    max-width: 100%;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-scope-btn:hover,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profile-btn:hover {
    border-color: var(--color-border-focus);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-scope-btn.is-active,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profile-btn.is-active {
    border-color: color-mix(in srgb, var(--color-brand-primary) 62%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 12%, var(--color-bg-card));
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-panel,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profile-panel {
    min-width: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-panel.is-active:has(.video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-panel[hidden],
:is(body.video-lab-page, body.settings-page) .video-lab-settings-profile-panel[hidden] {
    display: none !important;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-mode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 88%, transparent);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-mode-row > .video-lab-settings-mode-dropdown {
    margin: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-mode-row:has(.dropdown-custom.open) {
    position: relative;
    z-index: 900;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebox--inline {
    justify-content: center;
    margin: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar[hidden] {
    display: none !important;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn {
    --video-lab-rail-accent: var(--color-brand-primary);
    --video-lab-rail-accent-soft: var(--color-brand-primary-15);
    --video-lab-rail-accent-border: var(--color-brand-primary-30);
    --video-lab-rail-accent-shadow: var(--color-brand-primary-20);
    position: relative;
    min-width: 42px;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    line-height: 0;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-step-icon {
    width: 16px;
    height: 16px;
    color: currentColor;
    fill: currentColor;
    stroke: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-step-icon use {
    fill: currentColor;
    stroke: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[data-videolab-settings-module="input"] {
    --video-lab-rail-accent: var(--color-brand-primary);
    --video-lab-rail-accent-soft: var(--color-brand-primary-15);
    --video-lab-rail-accent-border: var(--color-brand-primary-30);
    --video-lab-rail-accent-shadow: var(--color-brand-primary-20);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[data-videolab-settings-module="scriptwriter"] {
    --video-lab-rail-accent: var(--color-info);
    --video-lab-rail-accent-soft: var(--color-info-15);
    --video-lab-rail-accent-border: var(--color-info-30);
    --video-lab-rail-accent-shadow: var(--color-info-25);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[data-videolab-settings-module="voice"] {
    --video-lab-rail-accent: var(--color-success);
    --video-lab-rail-accent-soft: var(--color-success-15);
    --video-lab-rail-accent-border: var(--color-success-30);
    --video-lab-rail-accent-shadow: var(--color-success-25);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[data-videolab-settings-module="images"] {
    --video-lab-rail-accent: var(--color-brand-secondary);
    --video-lab-rail-accent-soft: var(--color-brand-secondary-15);
    --video-lab-rail-accent-border: var(--color-brand-secondary-30);
    --video-lab-rail-accent-shadow: var(--color-brand-secondary-25);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[data-videolab-settings-module="video_clips"] {
    --video-lab-rail-accent: var(--color-info);
    --video-lab-rail-accent-soft: var(--color-info-15);
    --video-lab-rail-accent-border: var(--color-info-30);
    --video-lab-rail-accent-shadow: var(--color-info-25);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[data-videolab-settings-module="audio"] {
    --video-lab-rail-accent: var(--color-success);
    --video-lab-rail-accent-soft: var(--color-success-15);
    --video-lab-rail-accent-border: var(--color-success-30);
    --video-lab-rail-accent-shadow: var(--color-success-25);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[data-videolab-settings-module="export"] {
    --video-lab-rail-accent: var(--color-warning);
    --video-lab-rail-accent-soft: var(--color-warning-15);
    --video-lab-rail-accent-border: var(--color-warning-30);
    --video-lab-rail-accent-shadow: var(--color-warning-25);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn.is-active::before {
    display: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn:hover:not([disabled]),
:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn:focus-visible:not([disabled]) {
    color: var(--color-text-primary);
    background: var(--color-bg-card-hover);
    border-color: var(--color-border-light);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn.is-active {
    --video-lab-rail-accent: var(--color-brand-primary);
    --video-lab-rail-accent-soft: var(--color-brand-primary-15);
    --video-lab-rail-accent-border: var(--color-brand-primary-30);
    --video-lab-rail-accent-shadow: var(--color-brand-primary-20);
    color: var(--video-lab-rail-accent);
    background: var(--video-lab-rail-accent-soft);
    border-color: var(--video-lab-rail-accent-border);
    box-shadow:
        inset 0 0 0 1px var(--video-lab-rail-accent-shadow);
}

.video-lab-audio-style-select-group {
    margin: 0;
    min-width: 0;
}

.video-lab-audio-style-select-group:has(.dropdown-custom.open) {
    position: relative;
    z-index: 350;
}

.video-lab-audio-style-select-group .input-icon-group {
    align-items: stretch;
    gap: 0.5rem;
}

.video-lab-audio-style-config-wrap {
    flex: 1;
    min-width: 0;
    margin: 0;
    --input-label-surface: var(--color-bg-input);
    overflow: visible;
}

.video-lab-audio-style-config-wrap .input-label-text {
    /* Above the OPEN dropdown's z-index:500 — when the style dropdown opens it gets a
       relative z-index:500 stacking context, which (without this) paints the toggle
       OVER this floating «Стиль видео» label. Keep the label on top so it stays visible. */
    z-index: 600;
    border-radius: 0.35rem;
    box-shadow: 0 0 0 2px var(--color-bg-input);
}

.video-lab-audio-style-config-wrap .video-lab-audio-dropdown {
    margin: 0;
    width: 100%;
    min-width: 0;
}

.video-lab-audio-style-config-wrap .dropdown-custom-toggle {
    min-height: var(--input-height);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-lab-audio-style-config-wrap .dropdown-custom-toggle::after {
    flex: 0 0 16px;
    margin-left: 0.75rem;
}

.video-lab-audio-style-manage-btn {
    width: var(--input-height);
    min-width: var(--input-height);
    height: var(--input-height);
    min-height: var(--input-height);
    border-radius: var(--radius-md);
}

/* The «style guide» glyph sits a touch smaller inside the 24×24 box than the other gear
   icons — scale the Settings style-gear icon up ~15% so it reads at the same weight. */
body.video-lab-page [data-videolab-settings-style-manager-open] svg {
    transform: scale(1.15);
}


.video-lab-audio-style-manage-btn svg {
    width: 20px;
    height: 20px;
}

.video-lab-style-manager-modal {
    --video-lab-style-preview-width: 340px;
    --video-lab-style-editor-gap: 1rem;
    width: min(95vw, 1680px);
    height: min(95vh, 920px);
    max-height: 95vh;
}

.video-lab-style-manager-modal [hidden] {
    display: none !important;
}

.video-lab-style-manager-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.95fr);
    gap: 1rem;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 12px;
}

.video-lab-style-manager-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.video-lab-style-manager-item {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text);
    padding: 0.7rem 0.8rem;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.video-lab-style-manager-item-switch {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 3rem;
}

.video-lab-style-manager-item-switch .form-check-input {
    cursor: pointer;
}

.video-lab-style-manager-item:hover {
    background: var(--color-bg-card-hover);
    border-color: var(--color-border-light);
}

/* Selected style = green (mirrors the .is-selected card pattern, success swapped for
   brand) so the active preset reads as «chosen», not just hovered. Placed after :hover
   (equal specificity) so an active item stays green even while hovered. */
.video-lab-style-manager-item.is-active {
    border-color: color-mix(in srgb, var(--color-success) 48%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-card));
}

.video-lab-style-manager-item.is-disabled {
    opacity: 0.58;
}

.video-lab-style-manager-item-copy,
.video-lab-style-manager-item-copy strong,
.video-lab-style-manager-item-copy span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-lab-style-manager-item-copy strong {
    font-size: 0.92rem;
    color: var(--color-text-primary);
}

.video-lab-style-manager-item-copy span {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.video-lab-style-manager-large-preview,
.video-lab-style-manager-preview-slot {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 22%, color-mix(in srgb, white 28%, transparent), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--color-brand-primary) 28%, transparent), color-mix(in srgb, var(--color-brand-secondary) 16%, transparent));
}

.video-lab-style-manager-large-preview {
    width: 100%;
    min-height: 116px;
    aspect-ratio: 16 / 5;
    border-radius: var(--radius-md);
}

.video-lab-style-manager-preview-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 86px;
    border-radius: var(--radius-md);
    cursor: default;
    transition: transform var(--transition-fast);
}

.video-lab-style-manager-preview-slot.is-filled {
    background: var(--color-bg-input);
}

.video-lab-style-manager-preview-slot.is-filled:hover {
    transform: translateY(-1px);
}

.video-lab-style-manager-preview-slot.is-filled::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.video-lab-style-manager-preview-slot.is-filled:hover::after {
    opacity: 1;
}

.video-lab-style-manager-preview-slot.is-empty {
    border: 1px dashed color-mix(in srgb, var(--color-border) 82%, transparent);
    border-style: dashed;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-brand-primary) 16%, transparent), color-mix(in srgb, var(--color-brand-secondary) 10%, transparent)),
        var(--color-bg-input);
}

.video-lab-style-manager-preview-placeholder {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.72;
}

.video-lab-style-manager-preview-slot-label {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    z-index: 3;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.35rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.video-lab-style-manager-preview-model-badge {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 4;
    max-width: min(70%, 12rem);
    padding: 0.24rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 52%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    color: var(--color-text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-bg-inverse) 28%, transparent);
    pointer-events: none;
}

.video-lab-style-manager-large-preview::after {
    content: "";
    position: absolute;
    inset: auto 10% 12% 10%;
    height: 28%;
    border-radius: 999px 999px 0 0;
    background: color-mix(in srgb, white 18%, transparent);
}

.video-lab-style-manager-hover-preview .video-lab-style-manager-preview-model-badge {
    top: 0.75rem;
    right: 0.75rem;
    max-width: min(36%, 18rem);
    padding: 0.34rem 0.75rem;
    font-size: 0.82rem;
}

.video-lab-style-manager-large-preview img,
.video-lab-style-manager-preview-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-lab-style-preview--cinematic-neutral {
    background:
        radial-gradient(circle at 72% 22%, var(--style-preview-cinematic-1), transparent 18%),
        linear-gradient(135deg, var(--style-preview-cinematic-2), var(--style-preview-cinematic-3));
}

.video-lab-style-preview--storybook-warm {
    background:
        radial-gradient(circle at 32% 24%, var(--style-preview-storybook-1), transparent 22%),
        linear-gradient(135deg, var(--style-preview-storybook-2), var(--style-preview-storybook-3));
}

.video-lab-style-preview--clay-editorial {
    background:
        radial-gradient(circle at 34% 34%, var(--style-preview-clay-1), transparent 24%),
        linear-gradient(135deg, var(--style-preview-clay-2), var(--style-preview-clay-3));
}

.video-lab-style-preview--vector-editorial {
    background:
        linear-gradient(135deg, var(--style-preview-vector-1) 0 44%, var(--style-preview-vector-2) 44% 64%, var(--style-preview-vector-3) 64% 100%);
}

.video-lab-style-preview--miniature-diorama {
    background:
        radial-gradient(circle at 58% 28%, var(--style-preview-miniature-1), transparent 18%),
        linear-gradient(145deg, var(--style-preview-miniature-2), var(--style-preview-miniature-3));
}

.video-lab-style-preview--documentary-3d {
    background:
        radial-gradient(circle at 68% 26%, var(--style-preview-documentary-1), transparent 20%),
        linear-gradient(135deg, var(--style-preview-documentary-2), var(--style-preview-documentary-3));
}

.video-lab-style-preview--graphic-shadow {
    background:
        linear-gradient(135deg, var(--style-preview-graphic-1) 0 46%, var(--style-preview-graphic-2) 46% 64%, var(--style-preview-graphic-3) 64% 100%);
}

.video-lab-style-preview--user-auto {
    background:
        radial-gradient(circle at 30% 28%, var(--style-preview-user-auto-1), transparent 24%),
        linear-gradient(135deg, var(--style-preview-user-auto-2), var(--style-preview-user-auto-3));
}

.video-lab-style-manager-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, var(--video-lab-style-preview-width));
    gap: var(--video-lab-style-editor-gap);
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.video-lab-style-manager-editor-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    padding-top: 0.5rem;
}

.video-lab-style-manager-hover-preview {
    position: absolute;
    inset: 12px calc(var(--video-lab-style-preview-width) + var(--video-lab-style-editor-gap) + 12px) 12px 12px;
    z-index: 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-input);
    display: grid;
    place-items: center;
    box-shadow: none;
}

.video-lab-style-manager-hover-preview[hidden] {
    display: none !important;
}

.video-lab-style-manager-hover-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: var(--color-bg-input);
}

.video-lab-style-manager-preview-column {
    min-width: 0;
    width: min(var(--video-lab-style-preview-width), 100%);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    overflow-y: auto;
    padding-right: 0;
    margin-right: 0;
    justify-self: end;
}

.video-lab-style-manager-modal.is-creating-new-style .video-lab-style-manager-editor {
    grid-template-columns: 1fr;
}

.video-lab-style-manager-modal.is-creating-new-style .video-lab-style-manager-preview-column {
    display: none;
}

.video-lab-style-manager-description {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
    margin-top: -0.2rem;
}

.video-lab-style-manager-name-field {
    margin: 0;
}

.video-lab-style-manager-prompt-field {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    margin: 0;
}

.video-lab-style-manager-prompt {
    min-height: 0;
    height: 100% !important;
    flex: 1 1 auto;
    resize: none !important;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-stagebar .video-lab-workbench-rail-btn[disabled] {
    opacity: 0.46;
    cursor: default;
    pointer-events: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-profilebar {
    margin-bottom: 1rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-profilebar[hidden] {
    display: none !important;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-grid:has(.video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field) {
    flex: 1 1 auto;
    grid-template-rows: repeat(3, auto) minmax(0, 1fr);
    height: auto;
    min-height: 0;
    padding-bottom: 1rem;
    box-sizing: border-box;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-grid:has(.dropdown-custom.open) {
    z-index: 900;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-module-panel.is-active {
    display: contents;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-module-panel[hidden] {
    display: none !important;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-grid > .input-label,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-grid > .dropdown-custom,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-grid > .range-input-label,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-field {
    margin: 0;
    min-width: 0;
}

/* PROMPT-MODEL-1: DEMO-images-model + its fallback toggle share one full-width row;
   the LLM prompt-model field drops to the row below at one column (~50%, same as the
   DEMO-images-model). The images panel is display:contents, so the row spans the
   parent 2-col settings grid and the prompt field then flows into col 1 of a new row. */
:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
    min-width: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-custom {
    width: 100%;
    min-width: 0;
    z-index: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-custom.open {
    position: relative;
    z-index: 1000;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-grid > .dropdown-custom.open {
    z-index: 1000;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-custom-menu {
    position: absolute;
    inset: auto 0 auto 0;
    top: calc(100% + 0.45rem);
    width: 100%;
    margin-top: 0;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    background: var(--color-bg-card);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--color-bg-inverse) 34%, transparent);
    z-index: 1000;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-custom.open .dropdown-custom-menu {
    display: block;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .input-label,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-floating,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .range-input-label {
    --input-label-surface: var(--video-lab-settings-surface);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-custom-toggle,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-floating .dropdown-custom-toggle,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .switch-setting-box,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .form-control,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .form-input {
    background: var(--video-lab-settings-surface);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .dropdown-floating-label,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .input-label-text,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .video-lab-input-counter,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal .range-value-label {
    background: var(--video-lab-settings-surface);
    border-radius: 0.35rem;
    box-shadow: 0 0 0 2px var(--video-lab-settings-surface);
    z-index: 2;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-field .input-icon-group {
    align-items: stretch;
    gap: 0.5rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-field:has(.dropdown-custom.open) {
    position: relative;
    z-index: 1000;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap {
    flex: 1;
    min-width: 0;
    margin: 0;
    --input-label-surface: var(--video-lab-settings-surface);
    overflow: visible;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .video-lab-settings-dropdown {
    margin: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .input-label-text,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .video-lab-settings-model-count-badge {
    z-index: 2;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .dropdown-custom.open {
    z-index: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .dropdown-custom.open .dropdown-custom-menu {
    z-index: 3;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .dropdown-custom-toggle {
    min-height: var(--input-height);
    min-width: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .dropdown-custom-toggle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-config-wrap .dropdown-custom-toggle::after {
    flex: 0 0 16px;
    margin-left: 0.75rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal-open-field {
    cursor: pointer;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-voice-field {
    grid-column: 1 / 2;
    grid-row: 1;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-voice-volume-range {
    grid-column: 2 / 3;
    grid-row: 1;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-clip-volume-range {
    grid-column: 2 / 3;
    grid-row: 2;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal-display {
    min-height: var(--input-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--video-lab-settings-surface);
    color: var(--color-text-primary);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal-display__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-open-hint {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-primary);
    opacity: 0.78;
    pointer-events: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-open-hint svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal-open-field:hover .video-lab-settings-modal-display,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal-open-field:focus-visible .video-lab-settings-modal-display {
    border-color: color-mix(in srgb, var(--color-brand-primary) 62%, var(--color-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal-open-field:hover .video-lab-settings-open-hint,
:is(body.video-lab-page, body.settings-page) .video-lab-settings-modal-open-field:focus-visible .video-lab-settings-open-hint {
    opacity: 1;
    color: var(--color-text-primary);
    transform: translateX(4px);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    color: var(--color-brand-primary) !important;
    pointer-events: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-field .input-icon-action {
    width: var(--input-height);
    min-width: var(--input-height);
    height: var(--input-height);
    padding: 0;
    border-radius: var(--radius-md);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-model-field .input-icon-action svg {
    width: 20px;
    height: 20px;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-nested-modal-overlay {
    position: fixed;
    z-index: 1300;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-nested-modal-overlay:not(.active) {
    display: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-nested-modal-overlay.active {
    display: flex;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-switch-wrap .switch-setting-box {
    background: var(--video-lab-settings-surface);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-switch-wrap .switch-setting-box:hover {
    border-color: var(--color-brand-primary);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-switch-wrap--with-icon {
    flex: 1;
    min-width: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-range .range-control:hover {
    border-color: var(--color-brand-primary);
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__control:hover:not([open]) {
    border-color: var(--color-brand-primary);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-inline-note {
    margin: 0.45rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    line-height: 1.4;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-half-range {
    min-width: 0;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-textarea-field {
    grid-column: 1 / -1;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field {
    display: flex;
    flex-direction: column;
    grid-row: 4 / -1;
    align-self: stretch;
    height: auto;
    min-height: clamp(10rem, calc(95dvh - 42rem), 20rem);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-textarea-field .video-lab-input-counter {
    position: absolute;
    top: 0;
    right: 0.75rem;
    transform: translateY(-50%);
    background: var(--video-lab-settings-surface);
    padding: 0 0.5rem;
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-textarea {
    min-height: 8.5rem;
    resize: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-module-panel.is-active:not([hidden])[data-videolab-settings-module-panel$=".input"] .video-lab-settings-textarea-field .video-lab-settings-textarea {
    flex: 1 1 auto;
    height: auto;
    min-height: clamp(10rem, calc(95dvh - 42rem), 20rem);
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field {
    grid-column: 1 / -1;
    min-width: 0;
    position: relative;
    padding-top: 0;
}

/* Extra breathing room above a specific accordion field (e.g. image instructions after the
   model picker row) — additive to the grid gap. */
:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field.video-lab-settings-field-gap-top {
    margin-top: 0.5rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__control {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--video-lab-settings-surface);
    overflow: hidden;
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-prompt-textarea-field .video-lab-floating-accordion-field__control {
    background: color-mix(in srgb, var(--video-lab-settings-surface) 92%, var(--color-bg-deep));
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__label {
    position: absolute;
    top: 0;
    left: 0.75rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1.5rem);
    padding: 0 0.5rem;
    background: var(--video-lab-settings-surface);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

:is(body.video-lab-page, body.settings-page) .video-lab-prompt-textarea-field .video-lab-floating-accordion-field__label {
    background: color-mix(in srgb, var(--video-lab-settings-surface) 92%, var(--color-bg-deep));
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__control[open] {
    border-color: color-mix(in srgb, var(--color-brand-primary) 34%, var(--color-border));
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__summary::-webkit-details-marker {
    display: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__text {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.2;
}

:is(body.video-lab-page, body.settings-page) .video-lab-prompt-textarea-field .video-lab-floating-accordion-field__summary {
    align-items: center;
    min-height: 4rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-prompt-textarea-field .video-lab-floating-accordion-field__text {
    align-items: center;
}

:is(body.video-lab-page, body.settings-page) .video-lab-prompt-textarea-field .video-lab-floating-accordion-field__description {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.3;
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__chevron {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239494a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform var(--transition-fast);
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__control[open] .video-lab-floating-accordion-field__chevron {
    transform: rotate(180deg);
}

:is(body.video-lab-page, body.settings-page) .video-lab-floating-accordion-field__input {
    min-height: 7rem;
    max-height: 16rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-compact-prompt-textarea.form-control {
    display: block;
    width: 100%;
    min-height: 8rem;
    margin: 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--video-lab-settings-surface) 78%, var(--color-bg-deep));
    resize: none;
    box-shadow: none;
}

:is(body.video-lab-page, body.settings-page) .video-lab-compact-prompt-textarea.form-control:focus {
    border-top-color: color-mix(in srgb, var(--color-brand-primary) 55%, var(--color-border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-brand-primary) 28%, transparent);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-defaults-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-inheritance-card {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-inheritance-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 1px solid var(--color-border-focus);
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-inheritance-card strong {
    display: block;
    margin-top: 0.65rem;
    color: var(--color-text-primary);
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-inheritance-card p {
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-inheritance-card.is-active {
    border-color: color-mix(in srgb, var(--color-success) 58%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-card));
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

:is(body.video-lab-page, body.settings-page) .video-lab-settings-footer > button {
    justify-content: center;
    width: 100%;
    min-width: 0;
}

body.video-lab-page .is-hidden {
    display: none !important;
}

body.video-lab-page .video-lab-delete-subtitle {
    margin: 0.25rem 0 0;
    white-space: nowrap;
}

body.video-lab-page .project-delete-modal-note {
    border: 1px solid var(--color-error-30);
    background: var(--color-error-10);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

body.video-lab-page .project-delete-modal-note strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 1rem;
}

body.video-lab-page .project-delete-modal-note p {
    margin: 0.45rem 0 0;
}

body.video-lab-page .project-delete-modal-note-secondary {
    color: var(--color-text-secondary);
}

body.video-lab-page .project-delete-preview {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.55rem;
}

body.video-lab-page .project-delete-preview-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 0.6rem;
    text-align: center;
}

body.video-lab-page .project-delete-preview-content {
    display: grid;
    gap: 0.6rem;
}

body.video-lab-page .project-delete-list-title {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-primary);
    padding: 0 0.1rem;
}

body.video-lab-page .project-delete-preview-list {
    display: grid;
    gap: 0.4rem;
}

body.video-lab-page .video-lab-delete-lore-option {
    margin-top: 0.2rem;
}

body.video-lab-page .video-lab-delete-lore-option .checkbox-setting-box {
    height: auto;
    align-items: center;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
}

body.video-lab-page .video-lab-delete-lore-option .form-check {
    align-items: center;
    margin: 0;
}

body.video-lab-page .video-lab-delete-lore-option .form-check-label {
    display: grid;
    gap: 0.2rem;
}

body.video-lab-page .video-lab-delete-lore-option .form-check-label strong {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}

body.video-lab-page .video-lab-delete-lore-option .form-check-label small {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

body.video-lab-page .video-lab-delete-lore-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.1rem;
    color: var(--color-info);
    font-size: 0.8rem;
    line-height: 1.4;
}

body.video-lab-page .video-lab-delete-lore-protected {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 34%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-info-10) 72%, var(--color-bg-card));
}

body.video-lab-page .video-lab-delete-lore-protected-head {
    display: grid;
    gap: 0.22rem;
}

body.video-lab-page .video-lab-delete-lore-protected-head strong {
    color: var(--color-text-primary);
    font-size: 0.92rem;
}

body.video-lab-page .video-lab-delete-lore-protected-head p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
}

body.video-lab-page .video-lab-delete-lore-protected-list {
    display: grid;
    gap: 0.45rem;
}

body.video-lab-page .video-lab-delete-lore-protected-row {
    display: grid;
    gap: 0.18rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
}

body.video-lab-page .video-lab-delete-lore-protected-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

body.video-lab-page .video-lab-delete-lore-protected-row-head strong {
    color: var(--color-text-primary);
    font-size: 0.88rem;
}

body.video-lab-page .video-lab-delete-lore-protected-row-head span {
    color: var(--color-info);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

body.video-lab-page .video-lab-delete-lore-protected-row p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

body.video-lab-page .video-lab-delete-lore-protected-row small {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    line-height: 1.4;
}

body.video-lab-page .project-delete-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.58rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
}

body.video-lab-page .project-delete-preview-row-label {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

body.video-lab-page .project-delete-preview-row-value {
    color: var(--color-text-primary);
    font-weight: 600;
}

body.video-lab-page .video-lab-modal-subtitle {
    margin: 0.3rem 0 0;
    color: var(--color-success);
    font-size: 1.05rem;
}

body.video-lab-page #videoLabCreateProjectModal {
    --video-lab-create-field-radius: var(--radius-md);
    --video-lab-audio-upload-surface: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-input));
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-mode-block {
    margin-bottom: 0.2rem;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-mode-btn,
body.video-lab-page #videoLabCreateProjectModal .file-upload-container,
body.video-lab-page #videoLabCreateProjectModal .video-lab-create-style-manage-btn,
body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-settings-btn {
    border-radius: var(--video-lab-create-field-radius);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-mode-btn {
    min-height: var(--input-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-input);
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-mode-btn:hover {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 32%, var(--color-border));
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-mode-btn.is-active {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 46%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-bg-input));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-context-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.25fr);
    align-items: stretch;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-style-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--input-height);
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-style-group .dropdown-custom {
    min-width: 0;
    width: 100%;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-style-group .dropdown-custom-toggle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-style-manage-btn {
    width: var(--input-height);
    min-width: var(--input-height);
    height: var(--input-height);
    min-height: var(--input-height);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-create-style-manage-btn svg {
    width: 20px;
    height: 20px;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group[hidden] {
    display: none;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group > label {
    top: -8px;
    left: 13px;
    margin: 0;
    padding: 0.02rem 0.5rem;
    border-radius: var(--video-lab-create-field-radius);
    background: var(--video-lab-audio-upload-surface);
    box-shadow: none;
    color: var(--color-warning);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-container {
    --video-lab-audio-upload-border: color-mix(in srgb, var(--color-brand-primary) 34%, var(--color-border));
    border: 1.5px dashed var(--video-lab-audio-upload-border);
    background: var(--video-lab-audio-upload-surface);
    background-clip: padding-box;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-container::before {
    content: none;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group.is-warning > label {
    color: var(--color-warning);
    background: var(--video-lab-audio-upload-surface);
    box-shadow: none;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group.is-warning .file-upload-container {
    --video-lab-audio-upload-border: color-mix(in srgb, var(--color-warning) 72%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 22%, transparent);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group:not(.is-warning):has(.file-upload-display.has-files) .file-upload-container {
    --video-lab-audio-upload-border: color-mix(in srgb, var(--color-brand-primary) 46%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-bg-input));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group:not(.is-warning):has(.file-upload-display.has-files) > label {
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-bg-input));
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-display.has-files {
    background-color: transparent;
    border-color: transparent;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-display {
    min-height: 64px;
    padding: 0.6rem 0.9rem;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 30%, var(--color-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
    color: var(--color-brand-primary);
    flex-shrink: 0;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-copy strong {
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-copy span {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    line-height: 1.3;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-display.has-files {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem 0.85rem;
    padding: 0.55rem 0.9rem;
    min-height: 0;
    text-align: left;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-display.has-files > span:first-child {
    flex: 1 1 100%;
    min-width: 0;
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-display.has-files .file-count,
body.video-lab-page #videoLabCreateProjectModal .video-lab-audio-upload-group .file-upload-display.has-files .file-size {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.2;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-field[hidden] {
    display: none;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 0.85rem;
    align-items: stretch;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-display {
    margin: 0;
    position: relative;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-display input {
    padding-right: 3rem;
    cursor: pointer;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-open-hint {
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-primary);
    opacity: 0.78;
    pointer-events: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-open-hint svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-display:hover .video-lab-transcription-open-hint,
body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-display:focus-within .video-lab-transcription-open-hint {
    opacity: 1;
    color: var(--color-text-primary);
    transform: translate(4px, -50%);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-settings-btn {
    width: 56px;
    min-width: 56px;
    height: var(--input-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-bg-input));
    color: var(--color-brand-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-settings-btn:hover,
body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-settings-btn:focus-visible {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 68%, var(--color-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
    outline: none;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-settings-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

body.video-lab-page #videoLabCreateProjectModal .video-lab-transcription-field.is-warning .video-lab-transcription-settings-btn {
    border-color: color-mix(in srgb, var(--color-warning) 72%, var(--color-border));
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

body.video-lab-page .video-lab-audio-setup-progress-panel {
    width: 100%;
}

body.video-lab-page .video-lab-audio-setup-progress-copy {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}

body.video-lab-page .video-lab-audio-setup-progress-copy p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    line-height: 1.3;
}

body.video-lab-page #videoLabCreateProjectModal .lang-flag {
    display: inline-flex;
    width: 1.25rem;
    justify-content: center;
}

body.video-lab-page .dropdown-custom-item.is-disabled {
    color: var(--color-text-disabled);
    opacity: 0.52;
    cursor: not-allowed;
    pointer-events: none;
}

body.video-lab-page .dropdown-custom-item.is-disabled:hover {
    background: transparent;
}

body.video-lab-page .dropdown-custom-item.is-disabled::after {
    display: none;
}

body.video-lab-page #videoLabCreateProjectModal .modal-main {
    position: relative;
    overflow: visible;
    z-index: 2;
}

body.video-lab-page #videoLabCreateProjectModal .modal-footer {
    position: relative;
    z-index: 1;
}

body.video-lab-page #videoLabCreateProjectModal .dropdown-custom.open {
    position: relative;
    z-index: 500;
}

body.video-lab-page #videoLabCreateProjectModal .dropdown-custom-menu {
    z-index: 500;
    max-height: min(280px, 34vh);
    overflow-y: auto;
}

body.video-lab-page #videoLabCreateProjectModal .dropdown-custom.is-disabled .dropdown-custom-toggle {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    opacity: 0.72;
}

body.video-lab-page .video-lab-list-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-md);
}

body.video-lab-page .video-lab-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

body.video-lab-page .video-lab-list-head h1 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 28px;
}

body.video-lab-page .video-lab-list-head p {
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-audio-setup-banner {
    display: flex;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 24%, var(--color-border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--color-info) 10%, var(--color-bg-card));
    box-shadow: var(--shadow-md);
}

body.video-lab-page .video-lab-audio-setup-banner[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-audio-setup-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

body.video-lab-page .video-lab-audio-setup-banner-copy strong {
    color: var(--color-text-primary);
    font-size: 1rem;
}

body.video-lab-page .video-lab-audio-setup-banner-copy p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-step-head-tools--static,
body.video-lab-page .video-lab-preview-card .video-lab-step-head-tools--static {
    display: inline-flex;
    position: static;
    transform: none;
    margin-left: auto;
}

body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-step-main-card,
body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-step-preview {
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
}

body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-audio-setup-card {
    position: sticky;
    top: var(--images-sidebar-gap);
    align-self: start;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
}

body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-step-card-head p,
body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-preview-card-head p {
    display: none;
}

body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-step-preview {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 1rem;
    position: sticky;
    top: var(--images-sidebar-gap);
    align-self: start;
    height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    min-height: 0;
}

body.video-lab-page .video-lab-audio-setup-grid {
    grid-template-rows: auto auto auto auto minmax(12rem, 1fr);
    row-gap: 0.75rem;
    align-content: start;
}

body.video-lab-page .video-lab-audio-dropdown .dropdown-custom-toggle {
    background: var(--color-bg-input);
}

body.video-lab-page .video-lab-audio-setup-card .video-lab-step-card-main {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0.5rem;
}

/* Match the script title field: let the project-name input keep the natural
   .form-input height (~44px) instead of forcing var(--input-height) (54px), so the
   audio title is the same height as the script title. */
body.video-lab-page .video-lab-audio-title-field .form-input {
    min-height: 0;
    height: auto;
}

body.video-lab-page .video-lab-audio-source-field {
    --video-lab-audio-source-surface: color-mix(in srgb, var(--color-brand-primary) 4%, var(--color-bg-card));
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 5.15rem;
    height: auto;
    flex: 0 0 auto;
    padding: 0.7rem 0.9rem;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px dashed color-mix(in srgb, var(--color-brand-primary) 34%, var(--color-border));
    border-radius: 16px;
    background: var(--video-lab-audio-source-surface);
}

body.video-lab-page .video-lab-audio-source-summary-field {
    --video-lab-audio-source-surface: color-mix(in srgb, var(--color-brand-primary) 4%, var(--color-bg-card));
    min-height: auto;
}

body.video-lab-page .video-lab-audio-source-summary-field .input-label-text {
    border-radius: var(--radius-md);
    background: var(--video-lab-audio-source-surface);
}

body.video-lab-page .video-lab-audio-source-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 11%, transparent);
    color: var(--color-brand-primary);
    flex-shrink: 0;
}

body.video-lab-page .video-lab-audio-source-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

body.video-lab-page .video-lab-audio-source-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

body.video-lab-page .video-lab-audio-source-copy strong {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body.video-lab-page .video-lab-audio-source-copy span {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

body.video-lab-page .video-lab-audio-text-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

body.video-lab-page .video-lab-audio-text-card .video-lab-scriptwriter-main {
    min-height: 0;
    overflow: hidden;
    padding-top: 0.5rem;
    padding-bottom: 0.85rem;
}

body.video-lab-page .video-lab-step-workspace--audio-setup .video-lab-audio-text-card.video-lab-voice-card {
    min-height: 0;
    max-height: none;
    align-self: stretch;
    gap: 0 !important;
}

body.video-lab-page .video-lab-audio-additional-field {
    min-height: auto !important;
    height: 100%;
    min-height: 100% !important;
    align-self: start;
    margin-bottom: 0 !important;
}

/* Audio additional-prompt field: keep the NATURAL row-gap above (do NOT pull it up
   with a negative margin). Its top «label» floats up ~half its height into the gap;
   the natural 1.15rem gap leaves the label clearing the audio-track block above by
   ~0.5rem. A negative margin made the label overlap the block. Bottom gap is the
   card's 0.5rem padding-bottom (the field fills via its height:100%). */

body.video-lab-page .video-lab-audio-additional-field .video-lab-form-textarea {
    min-height: 100%;
    height: 100%;
    resize: none;
}

body.video-lab-page .video-lab-audio-script-copy {
    padding-top: 0.5rem;
    padding-bottom: 0;
}

body.video-lab-page .video-lab-audio-setup-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center;
}

body.video-lab-page .video-lab-audio-setup-footer > * {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
}

body.video-lab-page .video-lab-audio-setup-footer > .video-lab-step-action-primary {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    justify-content: center;
}

body.video-lab-page .video-lab-audio-preview-panel {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

body.video-lab-page .video-lab-audio-player-shell {
    --audio-volume-ratio: 1;
    background: var(--color-bg-card);
}

body.video-lab-page .video-lab-audio-player-shell .video-lab-voice-player-volume input[type="range"] {
    width: 86px;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-brand-primary) 92%, white 5%) 0 calc(var(--audio-volume-ratio) * 100%),
            color-mix(in srgb, var(--color-border) 82%, transparent) calc(var(--audio-volume-ratio) * 100%) 100%
        );
}

body.video-lab-page .video-lab-audio-player-shell .video-lab-voice-player-volume input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-brand-primary) 82%, white 5%);
    background: white;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-bg-inverse) 24%, transparent);
}

body.video-lab-page .video-lab-audio-player-shell .video-lab-voice-player-volume input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

body.video-lab-page .video-lab-audio-player-shell .video-lab-voice-player-volume input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-brand-primary) 82%, white 5%);
    background: white;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-bg-inverse) 24%, transparent);
    cursor: pointer;
}

body.video-lab-page .video-lab-project-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: var(--images-sidebar-gap);
}

body.video-lab-page .video-lab-project-sidebar {
    display: flex;
    flex-direction: column;
}

body.video-lab-page .video-lab-project-sidebar-header h2 {
    margin: 0;
}

body.video-lab-page .video-lab-project-sidebar-header p {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
}

body.video-lab-page .video-lab-project-sidebar-run {
    padding: 0 0.85rem 0.9rem;
    border-bottom: 1px dashed var(--color-border);
}

body.video-lab-page .video-lab-project-sidebar-run-label {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

body.video-lab-page .video-lab-project-sidebar-run-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-bg-card) 82%, transparent);
}

body.video-lab-page .video-lab-project-sidebar-run-pill span {
    color: var(--color-text-primary);
    font-weight: 600;
}

body.video-lab-page .video-lab-project-sidebar-run-pill strong {
    color: var(--color-success);
    font-size: 0.92rem;
    text-transform: lowercase;
}

body.video-lab-page .video-lab-project-step-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.8rem 0.8rem 0;
    overflow-y: auto;
}

body.video-lab-page .video-lab-project-step-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.78rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

body.video-lab-page .video-lab-project-step-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-brand-primary) 46%, var(--color-border));
}

body.video-lab-page .video-lab-project-step-card.is-disabled {
    opacity: 0.56;
    pointer-events: none;
}

body.video-lab-page .video-lab-project-step-card.is-disabled:hover {
    transform: none;
    border-color: var(--color-border);
}

body.video-lab-page .video-lab-project-step-card.is-active {
    border-color: color-mix(in srgb, var(--color-brand-primary) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary-10) 70%, var(--color-bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

body.video-lab-page .video-lab-project-step-number {
    display: inline-flex;
    width: 2.65rem;
    height: 2.65rem;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--color-bg-sunken);
    color: var(--color-brand-primary);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

body.video-lab-page .video-lab-project-step-icon {
    width: 1.22rem;
    height: 1.22rem;
    display: block;
    overflow: visible;
    fill: currentColor;
    stroke: none;
}

body.video-lab-page .video-lab-project-step-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

body.video-lab-page .video-lab-project-step-copy strong {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    line-height: 1.2;
}

body.video-lab-page .video-lab-project-step-copy span {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    line-height: 1.3;
}

body.video-lab-page .video-lab-project-step-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

body.video-lab-page .video-lab-project-step-dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, white 4%, transparent);
}

body.video-lab-page .video-lab-project-step-card.is-completed .video-lab-project-step-dot,
body.video-lab-page .video-lab-project-step-card.is-active .video-lab-project-step-dot {
    background: var(--color-success);
    border-color: var(--color-success);
}

body.video-lab-page .video-lab-project-step-card.is-running .video-lab-project-step-dot {
    background: var(--color-info);
    border-color: var(--color-info);
}

body.video-lab-page .video-lab-project-step-card.is-awaiting_confirmation .video-lab-project-step-dot {
    background: var(--color-warning);
    border-color: var(--color-warning);
}

body.video-lab-page .video-lab-project-step-card.is-failed .video-lab-project-step-dot {
    background: var(--color-error);
    border-color: var(--color-error);
}

body.video-lab-page .video-lab-project-sidebar-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

body.video-lab-page .video-lab-project-page .app-layout::after {
    display: none;
}

body.video-lab-page .video-lab-project-page .video-lab-workbench-shell.is-sidebar-collapsed .app-layout::after {
    display: block;
}

html.video-lab-prefers-collapsed body.video-lab-page.video-lab-project-page .app-layout::after {
    display: block;
}

body.video-lab-page .video-lab-step-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: start;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
}

body.video-lab-page .video-lab-step-workspace--lore {
    display: grid;
    grid-template-columns: minmax(0, var(--images-sidebar-width)) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100%;
}

body.video-lab-page .video-lab-lore-panel {
    width: min(var(--images-sidebar-width), 100%);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--images-panel-radius);
    background: var(--color-bg-input);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

body.video-lab-page .video-lab-lore-right-area {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(var(--images-sidebar-width), 1fr) minmax(0, var(--images-sidebar-width));
    gap: 1.2rem;
    align-items: stretch;
    min-height: 0;
    height: 100%;
}

body.video-lab-page .video-lab-lore-right-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
    height: 100%;
}

body.video-lab-page .video-lab-lore-panel-head {
    position: relative;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-lore-panel-head .sidebar-header-row {
    display: block;
}

body.video-lab-page .video-lab-lore-panel-head .video-lab-brief-head-actions {
    position: absolute;
    top: 50%;
    right: 1.45rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
}

body.video-lab-page .video-lab-lore-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

body.video-lab-page .video-lab-lore-model-row {
    padding: 0.85rem 0.85rem 0.35rem;
}

body.video-lab-page .video-lab-lore-divider {
    margin: 0;
}

body.video-lab-page .video-lab-lore-tree {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0.5rem 0 0.5rem;
}

body.video-lab-page .video-lab-lore-type-btn {
    width: 100%;
    border: 0;
    text-align: left;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

body.video-lab-page .video-lab-lore-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 0.85rem 1rem;
}

body.video-lab-page .video-lab-lore-card {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: stretch;
    gap: 0.9rem;
    padding: 0;
    min-height: 84px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
    overflow: hidden;
}

body.video-lab-page .video-lab-lore-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-brand-primary) 36%, var(--color-border));
}

body.video-lab-page .video-lab-lore-card.is-selected {
    border-color: color-mix(in srgb, var(--color-brand-primary) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary-10) 72%, var(--color-bg-card));
}

body.video-lab-page .video-lab-lore-card.character {
    --lore-card-accent: color-mix(in srgb, var(--lore-tone-0) 96%, transparent);
}

body.video-lab-page .video-lab-lore-card.location {
    --lore-card-accent: color-mix(in srgb, var(--lore-tone-1) 96%, transparent);
}

body.video-lab-page .video-lab-lore-card.item {
    --lore-card-accent: color-mix(in srgb, var(--lore-tone-3) 96%, transparent);
}

body.video-lab-page .video-lab-lore-card-thumb {
    position: relative;
    width: 78px;
    min-height: 82px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    border-right: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-bg-card) 92%, transparent), color-mix(in srgb, var(--color-bg-card-hover) 72%, transparent)),
        repeating-linear-gradient(
            -45deg,
            transparent 0 10px,
            color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 10px 14px
        );
    flex-shrink: 0;
}

body.video-lab-page .video-lab-lore-card-thumb.has-image {
    border-right-color: color-mix(in srgb, var(--color-border) 76%, transparent);
    background: transparent;
}

body.video-lab-page .video-lab-lore-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    transform: scale(1.1);
    transform-origin: left center;
    display: block;
}

body.video-lab-page .video-lab-lore-card-thumb.is-empty {
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, white 10%, transparent) 0%, transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--color-bg-card-hover) 76%, transparent), color-mix(in srgb, var(--color-bg-card) 88%, transparent));
}

body.video-lab-page .video-lab-lore-card-thumb.is-empty::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lore-card-accent, var(--color-brand-primary)) 16%, transparent) 0%, transparent 64%),
        repeating-linear-gradient(
            -45deg,
            transparent 0 10px,
            color-mix(in srgb, var(--lore-card-accent, var(--color-brand-primary)) 14%, transparent) 10px 14px
        );
    opacity: 0.9;
}

body.video-lab-page .video-lab-lore-card-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

body.video-lab-page .video-lab-lore-card-thumb-placeholder-icon {
    width: 24px;
    height: 24px;
    color: color-mix(in srgb, var(--lore-card-accent, var(--color-brand-primary)) 84%, white 16%);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--lore-card-accent, var(--color-brand-primary)) 26%, transparent));
}

body.video-lab-page .video-lab-lore-card-thumb-placeholder-icon use {
    stroke: currentColor;
}

body.video-lab-page .video-lab-lore-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.85rem 0.95rem 0.85rem 0;
}

body.video-lab-page .video-lab-lore-card-copy strong {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    line-height: 1.2;
}

body.video-lab-page .video-lab-lore-card-copy span {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

body.video-lab-page .video-lab-lore-card-status {
    flex-shrink: 0;
}

body.video-lab-page .video-lab-lore-image-card {
    display: block;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-lore-image-card-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: var(--images-panel-radius);
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-bg-card) 92%, transparent), color-mix(in srgb, var(--color-bg-card-hover) 72%, transparent)),
        repeating-linear-gradient(
            -45deg,
            transparent 0 10px,
            color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 10px 14px
        );
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
}

body.video-lab-page .video-lab-lore-preview-regenerate {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 3;
    background: color-mix(in srgb, var(--color-bg-page) 78%, var(--color-bg-deep));
    border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-bg-inverse) 28%, transparent);
    backdrop-filter: blur(10px);
}

body.video-lab-page .video-lab-lore-preview-regenerate[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-lore-image-card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

body.video-lab-page .video-lab-lore-image-card-placeholder {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    filter: saturate(0.96) brightness(0.98);
}

body.video-lab-page .video-lab-lore-image-card.has-image .video-lab-lore-image-card-placeholder {
    display: none;
}

body.video-lab-page .video-lab-lore-image-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1rem 0.9rem;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-bg-inverse) 16%, transparent) 12%, color-mix(in srgb, var(--color-bg-inverse) 82%, transparent) 100%);
}

body.video-lab-page .video-lab-lore-image-card:not(.has-image) .video-lab-lore-image-card-caption {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-inverse) 4%, transparent) 0%, color-mix(in srgb, var(--color-bg-inverse) 30%, transparent) 18%, color-mix(in srgb, var(--color-bg-inverse) 88%, transparent) 100%);
}

body.video-lab-page .video-lab-lore-image-card-caption strong {
    color: var(--color-text-on-accent);
    font-size: 1rem;
    line-height: 1.2;
}

body.video-lab-page .video-lab-lore-image-card-caption span {
    display: -webkit-box;
    color: color-mix(in srgb, white 82%, transparent);
    font-size: 0.82rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

body.video-lab-page .video-lab-lore-mini-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 1rem;
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch;
}

body.video-lab-page .video-lab-lore-mini-card {
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--images-panel-radius);
    background: var(--color-bg-input);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.video-lab-page .video-lab-lore-mini-card-head {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
}

body.video-lab-page .video-lab-lore-mini-card-head h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.96rem;
}

body.video-lab-page .video-lab-lore-mini-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.95rem;
    min-height: 0;
    overflow-y: auto;
}

body.video-lab-page .video-lab-lore-side-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--images-panel-radius);
    background: var(--color-bg-input);
    box-shadow: var(--shadow-md);
    min-height: 100%;
    height: 100%;
    padding: 1rem;
}

body.video-lab-page .video-lab-lore-side-card--graph {
    padding: 0;
    overflow: hidden;
    min-height: 0;
    height: auto;
    align-self: start;
}

body.video-lab-page .video-lab-lore-side-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
}

body.video-lab-page .video-lab-lore-side-card--graph .video-lab-lore-side-card-body {
    padding: 0;
    overflow: hidden;
}

body.video-lab-page .video-lab-lore-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

body.video-lab-page .video-lab-lore-detail-topline {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

body.video-lab-page .video-lab-lore-detail-type {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-lore-side-card h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.08rem;
    line-height: 1.25;
    min-width: 0;
}

body.video-lab-page .video-lab-lore-detail-head .video-lab-brief-head-actions {
    flex-shrink: 0;
}

body.video-lab-page .video-lab-lore-side-card p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

body.video-lab-page .video-lab-lore-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: auto;
}

body.video-lab-page .video-lab-lore-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
}

body.video-lab-page .video-lab-lore-detail-stat strong {
    color: var(--color-text-primary);
    font-size: 1rem;
}

body.video-lab-page .video-lab-lore-detail-stat span {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

body.video-lab-page .video-lab-lore-note {
    padding: 0.75rem 0.82rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
    color: var(--color-text-primary);
    font-size: 0.86rem;
    line-height: 1.45;
}

body.video-lab-page .video-lab-lore-note.is-empty {
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-lore-card-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.48rem;
    background: color-mix(in srgb, var(--color-border) 82%, transparent);
    overflow: hidden;
    z-index: 2;
}

body.video-lab-page .video-lab-lore-card-progress-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -38%;
    width: 38%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-brand-secondary) 35%, transparent);
    animation: video-lab-lore-card-progress-slide 2.45s ease-in-out infinite alternate;
}

@keyframes video-lab-lore-card-progress-slide {
    from {
        left: -13%;
    }
    to {
        left: 75%;
    }
}

body.video-lab-page .video-lab-lore-note--state {
    position: relative;
    padding-left: 1rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-brand-primary-10) 44%, var(--color-bg-card)), color-mix(in srgb, var(--color-bg-card-hover) 90%, transparent));
}

body.video-lab-page .video-lab-lore-note--state::before {
    content: '';
    position: absolute;
    left: 0.42rem;
    top: 0.82rem;
    bottom: 0.82rem;
    width: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand-primary) 64%, white 6%);
}

body.video-lab-page .video-lab-lore-note--relation {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

body.video-lab-page .video-lab-lore-note--relation span {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

body.video-lab-page .video-lab-lore-graph-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    height: 100%;
}

body.video-lab-page .video-lab-lore-graph-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
    border-radius: inherit;
    overflow: hidden;
    padding: 1rem 0.9rem 1.25rem;
    background: var(--color-bg-input);
    border: none;
    box-shadow: none;
}

body.video-lab-page .video-lab-lore-graph-stage::before {
    display: none;
}

body.video-lab-page .video-lab-lore-graph-lines {
    position: absolute;
    inset: 1rem 0.9rem 1.25rem;
    width: calc(100% - 1.8rem);
    height: calc(100% - 2.25rem);
    overflow: visible;
    pointer-events: none;
}

body.video-lab-page .video-lab-lore-graph-thread {
    fill: none;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-dasharray: 5 4;
    stroke-dashoffset: 0;
    animation: video-lab-lore-thread-flow 9.5s linear infinite;
    opacity: 0.92;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lore-tone-0) 34%, transparent));
}

body.video-lab-page .video-lab-lore-graph-thread.tone-0 { stroke: color-mix(in srgb, var(--lore-tone-0) 92%, transparent); }
body.video-lab-page .video-lab-lore-graph-thread.tone-1 { stroke: color-mix(in srgb, var(--lore-tone-1) 92%, transparent); }
body.video-lab-page .video-lab-lore-graph-thread.tone-2 { stroke: color-mix(in srgb, var(--lore-tone-2) 92%, transparent); }
body.video-lab-page .video-lab-lore-graph-thread.tone-3 { stroke: color-mix(in srgb, var(--lore-tone-3) 92%, transparent); }
body.video-lab-page .video-lab-lore-graph-thread.tone-4 { stroke: color-mix(in srgb, var(--lore-tone-4) 92%, transparent); }
body.video-lab-page .video-lab-lore-graph-thread.character { stroke: color-mix(in srgb, var(--lore-tone-0) 96%, transparent); }
body.video-lab-page .video-lab-lore-graph-thread.location { stroke: color-mix(in srgb, var(--lore-tone-1) 96%, transparent); }
body.video-lab-page .video-lab-lore-graph-thread.item { stroke: color-mix(in srgb, var(--lore-tone-3) 96%, transparent); }

body.video-lab-page .video-lab-lore-graph-node {
    position: absolute;
    left: var(--node-x);
    top: var(--node-y);
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

body.video-lab-page .video-lab-lore-graph-node-avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, white 0%, var(--lore-avatar-placeholder) 100%);
    border: 2px solid color-mix(in srgb, var(--color-border-light) 92%, transparent);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--color-bg-inverse) 20%, transparent);
    will-change: transform, filter, box-shadow;
    animation: video-lab-lore-node-breathe 5.8s ease-in-out infinite;
    animation-delay: var(--node-delay, 0s);
    pointer-events: auto;
    cursor: pointer;
    transition: box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

body.video-lab-page .video-lab-lore-graph-node.tone-0 .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-0) 88%, transparent); }
body.video-lab-page .video-lab-lore-graph-node.tone-1 .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-1) 88%, transparent); }
body.video-lab-page .video-lab-lore-graph-node.tone-2 .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-2) 88%, transparent); }
body.video-lab-page .video-lab-lore-graph-node.tone-3 .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-3) 88%, transparent); }
body.video-lab-page .video-lab-lore-graph-node.tone-4 .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-4) 88%, transparent); }
body.video-lab-page .video-lab-lore-graph-node.character .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-0) 90%, transparent); }
body.video-lab-page .video-lab-lore-graph-node.location .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-1) 90%, transparent); }
body.video-lab-page .video-lab-lore-graph-node.item .video-lab-lore-graph-node-avatar { border-color: color-mix(in srgb, var(--lore-tone-3) 90%, transparent); }

body.video-lab-page .video-lab-lore-graph-node--selected {
    z-index: 3;
}

body.video-lab-page .video-lab-lore-graph-node--selected .video-lab-lore-graph-node-avatar {
    width: 66px;
    height: 66px;
    border-color: color-mix(in srgb, var(--graph-accent, var(--color-brand-primary)) 82%, white 18%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-bg-inverse) 34%, transparent), 0 0 0 6px color-mix(in srgb, var(--graph-accent, var(--color-brand-primary)) 14%, transparent), 0 0 18px color-mix(in srgb, var(--graph-accent, var(--color-brand-primary)) 24%, transparent);
}

body.video-lab-page .video-lab-lore-graph-node:not(.video-lab-lore-graph-node--selected) .video-lab-lore-graph-node-avatar {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--color-bg-inverse) 18%, transparent);
}

body.video-lab-page .video-lab-lore-graph-node-avatar.is-placeholder {
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, white 16%, transparent) 0%, transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--color-bg-card-hover) 76%, transparent), color-mix(in srgb, var(--color-bg-card) 88%, transparent));
}

body.video-lab-page .video-lab-lore-graph-node-avatar.is-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--graph-accent, var(--color-brand-primary)) 18%, transparent) 0%, transparent 64%),
        repeating-linear-gradient(
            -45deg,
            transparent 0 10px,
            color-mix(in srgb, var(--graph-accent, var(--color-brand-primary)) 14%, transparent) 10px 14px
        );
    opacity: 0.9;
}

body.video-lab-page .video-lab-lore-graph-node-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    transform: scale(1.1);
    transform-origin: left center;
    display: block;
    transition: transform 0.22s ease, filter 0.22s ease;
}

body.video-lab-page .video-lab-lore-graph-node-avatar:not(.is-placeholder) {
    border-color: transparent;
}

body.video-lab-page .video-lab-lore-graph-node-avatar:not(.is-placeholder)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, white 4%, transparent), color-mix(in srgb, white 14%, transparent));
    opacity: 0;
    transition: opacity 0.22s ease;
}

body.video-lab-page .video-lab-lore-graph-node:hover .video-lab-lore-graph-node-avatar:not(.is-placeholder) {
    box-shadow: 0 14px 24px color-mix(in srgb, var(--color-bg-inverse) 24%, transparent);
    filter: brightness(1.03) saturate(1.04);
}

body.video-lab-page .video-lab-lore-graph-node:hover .video-lab-lore-graph-node-avatar:not(.is-placeholder) img {
    transform: scale(1.16);
}

body.video-lab-page .video-lab-lore-graph-node:hover .video-lab-lore-graph-node-avatar:not(.is-placeholder)::after {
    opacity: 1;
}

body.video-lab-page .video-lab-lore-graph-node-avatar > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 1.05rem;
}

body.video-lab-page .video-lab-lore-graph-node-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
}

body.video-lab-page .video-lab-lore-graph-node-placeholder-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 23px;
    height: 23px;
    transform: translate(-50%, -50%);
    color: color-mix(in srgb, var(--graph-accent, var(--color-brand-primary)) 84%, white 16%);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--graph-accent, var(--color-brand-primary)) 26%, transparent));
}

body.video-lab-page .video-lab-lore-graph-node--selected .video-lab-lore-graph-node-placeholder-icon {
    width: 27px;
    height: 27px;
}

body.video-lab-page .video-lab-lore-graph-node-placeholder-icon use {
    stroke: currentColor;
}

body.video-lab-page .video-lab-lore-graph-node-label {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112px;
    max-width: 112px;
    z-index: 4;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    text-align: center;
    color: var(--color-text-primary);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.24;
    text-shadow: 0 1px 8px color-mix(in srgb, var(--color-bg-inverse) 45%, transparent);
    pointer-events: auto;
    cursor: pointer;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.video-lab-page .video-lab-lore-graph-node.character {
    --graph-accent: color-mix(in srgb, var(--lore-tone-0) 96%, transparent);
}

body.video-lab-page .video-lab-lore-graph-node.location {
    --graph-accent: color-mix(in srgb, var(--lore-tone-1) 96%, transparent);
}

body.video-lab-page .video-lab-lore-graph-node.item {
    --graph-accent: color-mix(in srgb, var(--lore-tone-3) 96%, transparent);
}

@keyframes video-lab-lore-thread-dash {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

@keyframes video-lab-lore-thread-flow {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.86;
    }
    50% {
        opacity: 0.96;
    }
    100% {
        stroke-dashoffset: -36;
        opacity: 0.86;
    }
}

@keyframes video-lab-lore-node-breathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: saturate(1) brightness(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.035);
        filter: saturate(1.06) brightness(1.03);
    }
}

body.video-lab-page .video-lab-lore-empty-state {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-align: center;
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-lore-empty-state svg {
    width: 1.9rem;
    height: 1.9rem;
    color: var(--color-brand-primary);
    fill: currentColor;
}

body.video-lab-page .video-lab-lore-empty-state h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1rem;
}

@media (max-width: 1440px) {
    body.video-lab-page .video-lab-step-workspace--lore {
        grid-template-columns: minmax(0, 1fr);
    }

    body.video-lab-page .video-lab-lore-panel {
        width: 100%;
    }

    body.video-lab-page .video-lab-lore-right-area {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

body.video-lab-page .video-lab-lore-list {
    min-height: 0;
}

body.video-lab-page .video-lab-lore-panel-footer {
    display: block;
    padding: 0.85rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
}

body.video-lab-page .video-lab-model-field {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    min-width: 0;
    margin: 0;
}

body.video-lab-page .video-lab-model-field.input-label:first-child,
body.video-lab-page .video-lab-model-field.input-label:last-child {
    margin-top: 0;
    margin-bottom: 0;
}

body.video-lab-page .video-lab-model-field .input-label-text:not(.input-label-text--tr):not(.input-label-text--br) {
    /* Floating-label styling (uppercase/spaced) is for the field title only — NOT the
       design-system select's corner slots (coef/provider), which keep their canonical
       mixed-case look so the provider reads «VeoNonStop», not a loud «VEONONSTOP». */
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.video-lab-page .video-lab-model-field--plain {
    gap: 0;
}

body.video-lab-page .video-lab-model-field--plain .input-label-text:not(.input-label-text--tr):not(.input-label-text--br) {
    /* The --plain variant hides the floating label, but NOT the design-system select's
       corner slots (coef top-right / provider bottom-right) — keep those visible. */
    display: none;
}

body.video-lab-page .video-lab-model-field .dropdown-custom {
    width: 100%;
}

body.video-lab-page .video-lab-model-dropdown .dropdown-custom-toggle {
    min-height: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 0.94rem;
    line-height: 1.2;
    box-shadow: none;
}

body.video-lab-page .video-lab-model-dropdown:hover .dropdown-custom-toggle,
body.video-lab-page .video-lab-model-dropdown.open .dropdown-custom-toggle,
body.video-lab-page .video-lab-model-dropdown .dropdown-custom-toggle:focus-visible {
    border-color: var(--color-brand-primary);
}

body.video-lab-page .video-lab-model-dropdown .dropdown-custom-menu {
    min-width: 100%;
    margin-top: 0.4rem;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

body.video-lab-page .video-lab-model-dropdown.dropdown-open-up .dropdown-custom-menu {
    margin-top: 0;
    margin-bottom: 0.4rem;
}

body.video-lab-page .video-lab-model-dropdown .dropdown-custom-item {
    color: var(--color-text-primary);
}

body.video-lab-page .video-lab-lore-panel-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

body.video-lab-page .video-lab-lore-panel-actions > button {
    width: 100%;
    justify-content: center;
}

body.video-lab-page .video-lab-step-main-card,
body.video-lab-page .video-lab-preview-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--images-panel-radius);
    background: var(--color-bg-input);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    min-height: 100%;
    min-width: 0;
}

body.video-lab-page .video-lab-step-card-head,
body.video-lab-page .video-lab-preview-card-head {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 63px;
    min-height: 63px;
    padding: 0 1.45rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
}

body.video-lab-page .video-lab-step-card-head > div,
body.video-lab-page .video-lab-preview-card-head > div {
    display: flex;
    align-items: center;
    min-height: 100%;
}

body.video-lab-page .video-lab-step-card-heading {
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center;
    gap: 0.18rem;
    min-width: 0;
}

body.video-lab-page .video-lab-step-head-tools {
    display: none;
    position: absolute;
    top: 50%;
    right: 1.45rem;
    transform: translateY(-50%);
    align-items: center;
    gap: 0.5rem;
    z-index: 24;
}

body.video-lab-page .video-lab-head-icon-btn {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 42%, transparent);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body.video-lab-page .video-lab-head-icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Filled (solid) icon variants — opt-in via `class="icon-filled"` on the
 * <svg> element OR by referencing a known filled symbol via <use>. The
 * default rule above forces `fill: none; stroke: currentColor` which is
 * correct for stroke icons (icon-zap, icon-eye, …) but kills the geometry
 * of filled icons (icon-clapperboard-*, icon-folder-workbench-*, icon-video-frame).
 * Restore the proper fill/no-stroke posture for these. */
body.video-lab-page .video-lab-head-icon-btn svg.icon-filled,
body.video-lab-page .video-lab-head-icon-btn svg:has(use[href*="icon-video-frame"]),
body.video-lab-page .video-lab-head-icon-btn svg:has(use[href*="icon-clapperboard"]),
body.video-lab-page .video-lab-head-icon-btn svg:has(use[href*="icon-folder-workbench"]),
body.video-lab-page .video-lab-head-icon-btn svg:has(use[href*="icon-album-workbench"]) {
    fill: currentColor;
    stroke: none;
    /* Filled icons read clearer at slightly larger size. */
    width: 18px;
    height: 18px;
}

body.video-lab-page .video-lab-debug-indicator {
    color: var(--color-info);
    border-color: color-mix(in srgb, var(--color-info) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
}

body.video-lab-page .video-lab-debug-indicator:hover {
    color: color-mix(in srgb, var(--color-info) 88%, white 12%);
    border-color: color-mix(in srgb, var(--color-info) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 20%, transparent);
}

body.video-lab-page .video-lab-lock-indicator-icon--unlock {
    display: none;
}

body.video-lab-page .video-lab-lock-indicator {
    display: none;
}

body.video-lab-page .video-lab-lock-indicator:hover {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-border-light) 94%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 68%, transparent);
}

body.video-lab-page .video-lab-lock-indicator:active {
    transform: translateY(-50%) scale(0.96);
}

body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-head-tools,
body.video-lab-page .video-lab-step-workspace.is-editing .video-lab-step-head-tools {
    display: inline-flex;
}

body.video-lab-page #step-input.video-lab-step-workspace.is-busy .video-lab-step-head-tools,
body.video-lab-page .video-lab-step-workspace--scriptwriter.is-busy .video-lab-head-icon-btn {
    display: none !important;
}

body.video-lab-page .video-lab-step-workspace--visuals .video-lab-step-head-tools {
    display: inline-flex;
    position: static;
    transform: none;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-lock-indicator {
    display: inline-flex;
}

body.video-lab-page .video-lab-step-workspace.is-editing .video-lab-lock-indicator {
    display: none;
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

body.video-lab-page .video-lab-step-workspace.is-editing .video-lab-lock-indicator:hover {
    color: color-mix(in srgb, var(--color-success) 88%, white 12%);
    border-color: color-mix(in srgb, var(--color-success) 54%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 24%, transparent);
}

body.video-lab-page .video-lab-step-workspace.is-editing .video-lab-lock-indicator-icon--lock {
    display: none;
}

body.video-lab-page .video-lab-step-workspace.is-editing .video-lab-lock-indicator-icon--unlock {
    display: block;
}

body.video-lab-page #videoLabDebugJsonModal .modal-container,
body.video-lab-page #videoLabScriptwriterDebugModal .modal-container {
    width: min(980px, calc(100vw - 2.5rem));
}

body.video-lab-page .video-lab-debug-json {
    margin: 0;
    min-height: 16rem;
    max-height: min(66dvh, 42rem);
    overflow: auto;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

body.video-lab-page .video-lab-debug-modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

body.video-lab-page .video-lab-debug-modal-footer > .neon-btn-purple,
body.video-lab-page .video-lab-debug-modal-footer > .neon-btn-teal {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: center;
}

body.video-lab-page .video-lab-step-card-head h2,
body.video-lab-page .video-lab-preview-card-head h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

body.video-lab-page .video-lab-step-card-head p,
body.video-lab-page .video-lab-preview-card-head p {
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

body.video-lab-page .video-lab-scriptwriter-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem 1.45rem 1.2rem;
    background: var(--color-bg-input);
    overflow: hidden;
}

body.video-lab-page .video-lab-script-copy {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -1.45rem;
    padding-right: 1.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

body.video-lab-page .video-lab-script-copy::-webkit-scrollbar {
    width: 8px;
}

body.video-lab-page .video-lab-script-copy::-webkit-scrollbar-track {
    background: transparent;
}

body.video-lab-page .video-lab-script-copy::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

body.video-lab-page .video-lab-script-copy::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

body.video-lab-page .video-lab-scriptwriter-revision-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0;
    background: var(--color-bg-input);
    border-top: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
    flex: 0 0 18rem;
    min-height: 18rem;
}

body.video-lab-page .video-lab-scriptwriter-revision-panel[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-scriptwriter-revision-field {
    margin: 0;
    padding: 0;
    --input-label-surface: var(--color-bg-input);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

body.video-lab-page .video-lab-scriptwriter-revision-textarea {
    min-height: 0;
    height: 100%;
    width: 100%;
    flex: 1 1 auto;
    resize: none;
    border-radius: 0;
}

body.video-lab-page .video-lab-scriptwriter-revision-field:hover {
    border-color: transparent;
}

body.video-lab-page .video-lab-step-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    grid-column: 1 / -1;
}

body.video-lab-page .video-lab-step-action-row[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-step-action-row > .video-lab-step-action-primary,
body.video-lab-page .video-lab-step-action-row > .video-lab-step-action-secondary {
    flex: 1 1 0;
}

/* A hidden action button must collapse out of the 2-col grid: the `[hidden]`
   attribute alone loses to `.neon-btn-*{display:inline-flex}` (equal specificity,
   author > UA), so an inert «Подтвердить»/«Продолжить» would otherwise leak in and
   overflow the fixed-height footer. Mirrors the row-level rule above. */
body.video-lab-page .video-lab-step-action-row > [hidden] {
    display: none !important;
}

/* Scriptwriter default actions hold a variable count of buttons (1 on a fresh
   failure, 2 when «Продолжить» or «Подтвердить» joins «Сгенерировать»). Flex (vs
   the fixed 2-col grid) lets the visible ones share full width and a lone button
   stretch — scoped to this row so the visuals/exporters grids are untouched. */
body.video-lab-page [data-scriptwriter-default-actions].video-lab-step-action-row {
    display: flex;
}

body.video-lab-page .video-lab-step-card-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.45rem 1.2rem;
    background: var(--color-bg-input);
}

body.video-lab-page .video-lab-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto minmax(7.5rem, 1fr);
    column-gap: 1rem;
    row-gap: 1.15rem;
    grid-auto-flow: row;
    align-items: start;
    flex: 1 1 auto;
    min-height: 100%;
}

body.video-lab-page .video-lab-step-card-main .dropdown-custom {
    width: 100%;
    min-width: 0;
}

body.video-lab-page .video-lab-step-card-main .dropdown-custom.open {
    position: relative;
    z-index: 500;
}

body.video-lab-page .video-lab-step-card-main .input-label,
body.video-lab-page .video-lab-step-card-main .video-lab-chip-field,
body.video-lab-page .video-lab-step-card-main .range-input-label,
body.video-lab-page .video-lab-brief-panel,
body.video-lab-page .video-lab-clarification-textarea {
    --input-label-surface: var(--color-bg-input);
}

body.video-lab-page .video-lab-form-grid > .input-label,
body.video-lab-page .video-lab-form-grid > .video-lab-chip-field,
body.video-lab-page .video-lab-form-grid > .dropdown-custom,
body.video-lab-page .video-lab-form-grid > .range-input-label {
    margin: 0;
    align-self: start;
}

body.video-lab-page .video-lab-step-card-main .input-label .switch-setting-box {
    background: var(--input-label-surface);
}

body.video-lab-page .video-lab-step-card-main .input-label:hover .switch-setting-box {
    border-color: var(--color-brand-primary);
}

body.video-lab-page .video-lab-form-grid > .input-label:first-child {
    margin-top: 0;
}

body.video-lab-page .video-lab-form-span-2 {
    grid-column: 1 / -1;
}

body.video-lab-page .video-lab-static-field {
    display: flex;
    align-items: center;
    min-height: var(--input-height);
}

body.video-lab-page .video-lab-input-counter {
    position: absolute;
    top: 0;
    right: 0.75rem;
    transform: translateY(-50%);
    background: var(--input-label-surface);
    padding: 0 0.5rem;
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

body.video-lab-page .video-lab-input-counter.is-warning {
    color: var(--color-warning);
}

body.video-lab-page .video-lab-input-counter.is-error {
    color: var(--color-error);
}

body.video-lab-page .video-lab-step-card-main .video-lab-static-field {
    background: var(--color-bg-input);
}

body.video-lab-page .video-lab-story-field {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Script brief field: 1rem gap above (offset the 1.15rem grid row-gap down to 1rem)
   + 0.5rem below via the form padding. Scoped with :not(.video-lab-audio-additional-field)
   so it never bleeds into the audio-setup additional-prompt field (also a story-field).
   Needs the grid-child selector to outweigh `.video-lab-form-grid > .input-label { margin:0 }`. */
body.video-lab-page .video-lab-form-grid > .video-lab-story-field:not(.video-lab-audio-additional-field) {
    /* 1.5rem gap above (row-gap 1.15rem + 0.35rem) so BOTH floating labels in this gap
       clear each other: the LLM field's bottom «provider» label (overhangs down) and
       this field's top «label + counter» (overhangs up). 1rem was too tight → they
       touched. stretch + min-height:0/height:auto so the POSITIVE top margin SHRINKS
       the field from the top (textarea absorbs) and the bottom stays anchored to the
       footer's 0.5rem padding — base min-height:100% would otherwise overflow it down. */
    align-self: stretch;
    min-height: 0;
    height: auto;
    margin-top: calc(1.5rem - 1.15rem);
}

body.video-lab-page #videoLabInputForm {
    /* 1rem so the «Доп. инструкции» toggle (sits on the textarea's bottom border and
       overhangs ~half its height) clears the footer instead of touching it. */
    padding-bottom: 1rem;
}

body.video-lab-page .video-lab-story-field .input-label-text,
body.video-lab-page .video-lab-story-field .video-lab-input-counter {
    background: var(--color-bg-input);
}

body.video-lab-page .video-lab-form-textarea {
    flex: 1 1 auto;
    min-height: 4.5rem;
    resize: none;
}

body.video-lab-page .video-lab-extra-instructions-btn {
    position: absolute;
    bottom: 0;
    right: 0.75rem;
    transform: translateY(50%);
    background: var(--color-bg-input);
    padding: 0 0.4rem 0 0.25rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    z-index: 1;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

body.video-lab-page .video-lab-extra-instructions-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-extra-instructions-btn:hover {
    color: var(--color-brand-primary);
}

body.video-lab-page .video-lab-extra-instructions-btn.is-active {
    color: var(--color-brand-primary);
}

body.video-lab-page .video-lab-step-card-main .dropdown-custom-toggle,
body.video-lab-page .video-lab-step-card-main .dropdown-floating .dropdown-custom-toggle {
    background: var(--color-bg-input);
}

body.video-lab-page .video-lab-step-card-main .dropdown-floating-label {
    background: var(--color-bg-input);
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-step-card-main .dropdown-custom-menu {
    z-index: 500;
}

body.video-lab-page .video-lab-llm-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    min-height: var(--input-height);
}

/* Reserve the 2nd column ONLY when the «connect LLM» gear is actually visible (server-rendered
   shown only when there are NO models). Previously this keyed off .is-warning, but .is-warning now
   also flags a SELECTED-but-unavailable model (route down) while models still exist → the gear is
   hidden, so reserving its column squeezed the dropdown to ~190px and crushed «Claude Opus 4.8» to
   «Cla…». Drive the column off the gear's presence so the picker keeps full width when it's hidden. */
body.video-lab-page .video-lab-llm-field:has(.video-lab-llm-settings-btn:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) var(--input-height);
}

body.video-lab-page .video-lab-form-grid > .video-lab-llm-field {
    width: 100%;
}

/* DS-LLM-1: the design-system select label is a <label> wrapped in the
   [data-videolab-llm-select] bridge div, so it is NOT a blockified grid item
   (unlike the showcase, where it is a direct grid child). Force block + full
   width so the 4 corner slots (--tl title / --tr coef / --br provider) resolve
   against the full field box and land at the right edge instead of collapsing
   onto the top-left. Pairs with forms_modifiers.css being loaded on this page. */
body.video-lab-page [data-videolab-llm-select] > .input-label--select {
    display: block;
    width: 100%;
}

body.video-lab-page .video-lab-llm-field .dropdown-floating,
body.video-lab-page .video-lab-llm-field .dropdown-floating:first-child,
body.video-lab-page .video-lab-llm-field .dropdown-floating:last-child {
    margin-top: 0;
    margin-bottom: 0;
}

body.video-lab-page .video-lab-llm-field.is-warning .dropdown-floating-label {
    margin: 0;
    padding: 0.02rem 0.5rem;
    border-radius: var(--radius-md);
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-input));
    box-shadow: none;
}

body.video-lab-page .video-lab-llm-field.is-warning .dropdown-custom-toggle {
    color: color-mix(in srgb, var(--color-warning) 82%, white);
    background:
        linear-gradient(180deg, var(--color-warning-15), color-mix(in srgb, var(--color-warning) 8%, var(--input-label-surface)));
}

body.video-lab-page .video-lab-llm-field.is-warning .dropdown-custom-toggle::after {
    transform: rotate(-90deg);
    opacity: 0.92;
}

body.video-lab-page .video-lab-llm-settings-btn {
    box-sizing: border-box;
    width: var(--input-height);
    min-width: var(--input-height);
    height: var(--input-height);
    min-height: var(--input-height);
    max-height: var(--input-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    border-radius: var(--radius-md);
}

body.video-lab-page .video-lab-llm-settings-btn[hidden] {
    display: none;
}

body.video-lab-page .video-lab-llm-settings-btn svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

body.video-lab-page .video-lab-llm-field .dropdown-custom-toggle {
    min-height: var(--input-height);
}

body.video-lab-page .video-lab-step-card-main .lang-flag {
    display: inline-flex;
    width: 1.25rem;
    justify-content: center;
}

body.video-lab-page .video-lab-step-card-main .range-input-label {
    margin-top: 0;
}

body.video-lab-page .video-lab-step-card-main .range-control {
    background: var(--color-bg-input);
}

body.video-lab-page .video-lab-step-card-main .range-min,
body.video-lab-page .video-lab-step-card-main .range-max {
    font-size: 0.72rem;
}

body.video-lab-page .video-lab-brief-card {
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    max-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
}

body.video-lab-page .video-lab-scriptwriter-card,
body.video-lab-page .video-lab-scriptwriter-support-card,
body.video-lab-page .video-lab-voice-card,
body.video-lab-page .video-lab-voice-chunks-card {
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    max-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
}

body.video-lab-page .video-lab-scriptwriter-card.is-confirmed,
body.video-lab-page .video-lab-scriptwriter-support-card.is-confirmed {
    border-color: color-mix(in srgb, var(--color-success) 42%, var(--color-border));
    box-shadow: 0 18px 42px color-mix(in srgb, var(--color-bg-inverse) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-success) 18%, transparent);
}

body.video-lab-page .video-lab-brief-status {
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: 0.01em;
}

body.video-lab-page .video-lab-brief-status.is-attention.dot::before {
    animation: badge-pulse 2s ease-in-out infinite;
}

/* Routed (EL v2 / Minimax) voiceover cost chip: required / available tts_chars.
   Neutral by default; turns red (.is-insufficient) when the wallet can't cover it. */
body.video-lab-page .video-lab-voice-chars-chip[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-voice-chars-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg-card-hover) 60%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

body.video-lab-page .video-lab-voice-chars-chip .video-lab-voice-chars-sep {
    color: var(--color-text-muted);
    opacity: 0.7;
}

body.video-lab-page .video-lab-voice-chars-chip.is-insufficient {
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 55%, transparent);
    background: color-mix(in srgb, var(--color-error) 14%, transparent);
}

/* Voice footer carries Confirm + Regenerate + the routed chars chip on one row.
   Flex (vs the shared 2-col grid) lets the two buttons share the width while the
   chip sits auto-width on the right; height 36px matches the neon-btn next to it. */
body.video-lab-page .video-lab-step-workspace--voice .video-lab-step-action-row {
    display: flex;
}

body.video-lab-page .video-lab-voice-chars-chip--footer {
    flex: 0 0 auto;
    height: 36px;
    align-self: center;
}

body.video-lab-page .video-lab-brief-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.video-lab-page .video-lab-brief-confirm-btn {
    min-height: 34px;
    padding: 0.36rem 0.9rem;
    font-size: 0.84rem;
}

body.video-lab-page .video-lab-brief-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.9rem 1.2rem;
    background: var(--color-bg-input);
    overflow-y: auto;
    overflow-x: hidden;
}

body.video-lab-page .video-lab-brief-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

body.video-lab-page .video-lab-voice-chunk-copy {
    color: var(--color-text-primary);
    font-size: 0.88rem;
    line-height: 1.45;
    white-space: pre-line;
    word-break: break-word;
}

body.video-lab-page .video-lab-voice-player-wrap audio {
    width: 100%;
    max-width: 100%;
}

body.video-lab-page .video-lab-voice-card,
body.video-lab-page .video-lab-voice-chunks-card {
    gap: 0.9rem;
}

body.video-lab-page .video-lab-step-workspace--voice .video-lab-voice-card {
    position: sticky;
    top: var(--images-sidebar-gap);
    align-self: start;
    gap: 0.9rem;
}

body.video-lab-page .video-lab-step-workspace--voice .video-lab-step-preview {
    position: static;
    top: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
}

body.video-lab-page .video-lab-voice-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin-top: 0;
}

body.video-lab-page .video-lab-voice-preview-panel--side {
    flex: 0 0 auto;
    padding-top: 0;
    border-top: none;
}

body.video-lab-page .video-lab-voice-selector-panel {
    padding: 0;
    margin-bottom: 0.7rem;
}

body.video-lab-page .video-lab-voice-selector-panel:last-child {
    margin-bottom: 0;
}

body.video-lab-page .video-lab-voice-selector-panel-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--images-panel-radius);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    background: color-mix(in srgb, var(--color-bg-input) 60%, transparent);
    /* surface that the corner warning labels (input-label-text--tl/tr) use to «cut»
       the top border line — solid input-bg so the labels read cleanly on the frame. */
    --input-label-surface: var(--color-bg-input);
}

body.video-lab-page .video-lab-voice-selector-panel-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-brand-primary);
    opacity: 0.5;
}

body.video-lab-page .video-lab-voice-selector-panel-icon svg {
    width: 100%;
    height: 100%;
}

body.video-lab-page .video-lab-voice-selector-panel-inner .video-lab-voice-selected-summary {
    flex: 1;
    min-width: 0;
}

body.video-lab-page .video-lab-voice-soft-hint {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    color: var(--color-warning);
    margin-left: 0.25rem;
}

/* Inline variant — sits next to the name, inherits its font size/weight */
body.video-lab-page .video-lab-voice-soft-hint--inline {
    font-size: inherit;
    font-weight: inherit;
    color: var(--color-warning);
    white-space: nowrap;
}

/* Soft warnings as corner labels on the panel border (design-system input-label
   pattern): short hint top-LEFT (tl), long sentence top-RIGHT (tr), warning-toned.
   Applies to ALL providers incl. yoyo — render is keyed on voice_warning_soft. */
body.video-lab-page .video-lab-voice-warn-label.input-label-text--tl,
body.video-lab-page .video-lab-voice-warn-label.input-label-text--tr {
    color: var(--color-warning);
    font-weight: 500;
}

body.video-lab-page .video-lab-voice-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

body.video-lab-page .video-lab-voice-preview-head strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.2;
}

body.video-lab-page .video-lab-voice-preview-head p {
    margin: 0.22rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
}

body.video-lab-page .video-lab-voice-preview-meta {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-voice-script-panel {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.45rem;
    padding-right: 1.45rem;
}

body.video-lab-page .video-lab-voice-script-copy {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
}

body.video-lab-page .video-lab-voice-chunks-flat {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    background: transparent;
    gap: 0.8rem;
    overflow-y: auto;
}

body.video-lab-page .video-lab-voice-empty-state {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.6rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    border-radius: var(--images-panel-radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-input) 40%, transparent), color-mix(in srgb, var(--color-bg-card) 20%, transparent)),
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 0 10px,
            transparent 10px 20px
        );
    overflow: hidden;
}

body.video-lab-page .video-lab-voice-empty-state::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top center, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 58%);
    opacity: 0.85;
}

body.video-lab-page .video-lab-voice-empty-state-icon,
body.video-lab-page .video-lab-voice-empty-state-copy,
body.video-lab-page .video-lab-voice-empty-state-btn {
    position: relative;
    z-index: 1;
}

body.video-lab-page .video-lab-voice-empty-state-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 24%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 12%, var(--color-bg-card));
    color: color-mix(in srgb, var(--color-brand-primary) 78%, white 10%);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-bg-inverse) 18%, transparent);
}

body.video-lab-page .video-lab-voice-empty-state-icon svg {
    width: 34px;
    height: 34px;
    display: block;
}

body.video-lab-page .video-lab-voice-empty-state-copy {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 29rem;
    text-align: center;
}

body.video-lab-page .video-lab-voice-empty-state-copy strong {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.25;
}

body.video-lab-page .video-lab-voice-empty-state-copy p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    line-height: 1.52;
}

body.video-lab-page .video-lab-voice-empty-state-btn {
    min-width: 220px;
}

body.video-lab-page .video-lab-script-copy-empty {
    min-height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-input) 88%, transparent);
    color: var(--color-text-secondary);
    text-align: center;
}

body.video-lab-page .video-lab-voice-script-chunk {
    padding: 0.88rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-input) 94%, transparent);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

body.video-lab-page .video-lab-voice-script-chunk--chunk-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.video-lab-page .video-lab-voice-script-chunk.is-active {
    border-color: color-mix(in srgb, var(--color-brand-primary) 42%, var(--color-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 16%, transparent);
    background: color-mix(in srgb, var(--color-brand-primary) 9%, var(--color-bg-input));
}

body.video-lab-page .video-lab-voice-script-chunk-head,
body.video-lab-page .video-lab-voice-chunk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}

body.video-lab-page .video-lab-voice-script-chunk-head strong,
body.video-lab-page .video-lab-voice-chunk-head strong {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    line-height: 1.25;
}

body.video-lab-page .video-lab-voice-chunk-head .video-lab-voice-chunk-title--green {
    color: var(--color-success) !important;
}

body.video-lab-page .video-lab-voice-chunk-head .video-lab-voice-chunk-title--blue {
    color: color-mix(in srgb, var(--color-brand-primary), white 30%) !important;
}

body.video-lab-page .video-lab-voice-chunk-head .video-lab-voice-chunk-title--red {
    color: var(--color-error) !important;
}

body.video-lab-page .video-lab-voice-chunk-head .video-lab-voice-chunk-title--yellow {
    color: color-mix(in srgb, var(--color-warning) 82%, white 18%) !important;
}

body.video-lab-page .video-lab-voice-script-chunk-head span,
body.video-lab-page .video-lab-voice-chunk-head span {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-voice-script-chunk-body {
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    line-height: 1.58;
    white-space: pre-wrap;
    word-break: break-word;
}

body.video-lab-page .video-lab-voice-word {
    border-radius: 1px;
    padding: 0.01em 0 0.12em;
    transition: background-color 0.22s linear, color 0.22s linear, opacity 0.28s linear;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-word.is-active {
    background: color-mix(in srgb, var(--color-brand-primary) 62%, transparent);
    color: var(--color-text-on-accent);
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-word.is-trail-1 {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
    color: color-mix(in srgb, var(--color-text-on-accent) 56%, var(--color-text-primary) 44%);
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-word.is-trail-2 {
    background: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
    color: color-mix(in srgb, var(--color-text-on-accent) 64%, var(--color-text-primary) 36%);
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-word.is-trail-3 {
    background: color-mix(in srgb, var(--color-brand-primary) 28%, transparent);
    color: color-mix(in srgb, var(--color-text-on-accent) 72%, var(--color-text-primary) 28%);
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-word.is-trail-4 {
    background: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
    color: color-mix(in srgb, var(--color-text-on-accent) 84%, var(--color-text-primary) 16%);
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-word.is-trail-5 {
    background: color-mix(in srgb, var(--color-brand-primary) 52%, transparent);
    color: var(--color-text-on-accent);
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-chunk-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.7rem;
}

body.video-lab-page .video-lab-voice-chunk-status-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

body.video-lab-page .video-lab-voice-chunk-badge {
    flex-shrink: 0;
}

body.video-lab-page .video-lab-voice-chunk-status-side {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-voice-chunk-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.65rem;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: default;
}

body.video-lab-page .video-lab-voice-chunk-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

body.video-lab-page .video-lab-voice-chunk-char-chip {
    width: auto;
    min-width: 96px;
    padding: 0 0.7rem;
    cursor: default;
}

body.video-lab-page .video-lab-voice-chunk-play-icon {
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-voice-chunk-play-icon:hover:not(:disabled) {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-border-light) 94%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 68%, transparent);
}

body.video-lab-page .video-lab-voice-chunk-play-icon-svg {
    width: 16px;
    height: 16px;
    fill: currentColor !important;
    stroke: none !important;
}

body.video-lab-page .video-lab-voice-chunk-play-icon-svg--pause {
    display: none;
}

body.video-lab-page .video-lab-voice-chunk-play-icon.is-playing {
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

body.video-lab-page .video-lab-voice-chunk-play-icon.is-playing:hover:not(:disabled) {
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 54%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 22%, transparent);
}

body.video-lab-page .video-lab-voice-chunk-play-icon.is-playing .video-lab-voice-chunk-play-icon-svg--play {
    display: none;
}

body.video-lab-page .video-lab-voice-chunk-play-icon.is-playing .video-lab-voice-chunk-play-icon-svg--pause {
    display: block;
}

body.video-lab-page .video-lab-voice-chunk-regenerate-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* AUDIO-SAVE-1: per-chunk save icons (audio + subtitles). Reuse the chip box
 * (.video-lab-voice-chunk-chip) and base icon-btn; only mirror the play-icon
 * hover affordance so the save chips feel identical to play/regenerate. */
body.video-lab-page .video-lab-voice-chunk-download-icon {
    color: var(--color-text-secondary);
    text-decoration: none;
}

body.video-lab-page .video-lab-voice-chunk-download-icon:hover {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-border-light) 94%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 68%, transparent);
}

body.video-lab-page .video-lab-voice-chunk-copy {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.54;
    white-space: pre-wrap;
    word-break: break-word;
}

body.video-lab-page .video-lab-voice-script-chunk--chunk-card .video-lab-voice-player-shell,
body.video-lab-page .video-lab-voice-script-chunk--chunk-card .video-lab-lore-note {
    margin-top: 0.7rem;
}

body.video-lab-page .video-lab-voice-player-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.72rem 0.92rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-bg-card) 96%, transparent);
}

body.video-lab-page .video-lab-voice-player-shell--preview {
    padding: 0.82rem 1rem;
}

body.video-lab-page .video-lab-voice-player-shell audio {
    display: none;
}

body.video-lab-page .video-lab-voice-player-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: color-mix(in srgb, var(--color-text-primary) 94%, white 6%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: transform var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

body.video-lab-page .video-lab-voice-player-btn:hover:not(:disabled) {
    color: white;
    transform: scale(1.03);
}

body.video-lab-page .video-lab-voice-player-btn:disabled {
    cursor: not-allowed;
    opacity: 0.42;
    box-shadow: none;
}

body.video-lab-page .video-lab-voice-player-icon {
    width: 20px;
    height: 20px;
}

body.video-lab-page .video-lab-voice-player-icon--pause {
    display: none;
}

body.video-lab-page .video-lab-voice-player-shell.is-playing .video-lab-voice-player-icon--play {
    display: none;
}

body.video-lab-page .video-lab-voice-player-shell.is-playing .video-lab-voice-player-icon--pause {
    display: block;
}

body.video-lab-page .video-lab-voice-player-progress {
    position: relative;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border) 82%, transparent);
    cursor: pointer;
}

body.video-lab-page .video-lab-voice-player-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-brand-primary) 92%, white 5%), color-mix(in srgb, var(--color-brand-secondary) 68%, var(--color-brand-primary) 32%));
}

body.video-lab-page .video-lab-voice-player-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    border: 2px solid color-mix(in srgb, var(--color-brand-primary) 82%, white 5%);
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-bg-inverse) 24%, transparent);
}

body.video-lab-page .video-lab-voice-player-time {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.38rem;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.video-lab-page .video-lab-voice-player-time [data-audio-current] {
    color: var(--color-text-primary);
}

body.video-lab-page .video-lab-voice-player-volume {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 116px;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-voice-player-volume svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

body.video-lab-page .video-lab-voice-player-volume input[type="range"] {
    width: 86px;
    accent-color: color-mix(in srgb, var(--color-brand-primary) 88%, white 5%);
}

body.video-lab-page .video-lab-step-workspace--visuals .video-lab-visuals-script-card {
    position: sticky;
    top: var(--images-sidebar-gap);
    align-self: start;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    min-height: 0;
}

body.video-lab-page .video-lab-step-workspace--visuals .video-lab-step-preview {
    position: static;
    top: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    overflow: hidden;
}

body.video-lab-page .video-lab-step-head-tools--static {
    display: inline-flex;
    position: static;
    transform: none;
    margin-left: auto;
}

body.video-lab-page .video-lab-step-workspace--assembler,
body.video-lab-page .video-lab-step-workspace--exporters {
    min-height: 0;
    align-items: start;
}

body.video-lab-page .video-lab-step-workspace--assembler .video-lab-assembler-card,
body.video-lab-page .video-lab-step-workspace--exporters .video-lab-exporters-card {
    position: sticky;
    top: var(--images-sidebar-gap);
    align-self: start;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
}

body.video-lab-page .video-lab-step-workspace--assembler .video-lab-step-preview,
body.video-lab-page .video-lab-step-workspace--exporters .video-lab-step-preview {
    position: static;
    top: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    overflow: hidden;
}

body.video-lab-page .video-lab-step-workspace--assembler .video-lab-preview-card,
body.video-lab-page .video-lab-step-workspace--exporters .video-lab-preview-card {
    flex: 1 1 auto;
    min-height: 0;
}

body.video-lab-page .video-lab-exporters-progress-panel {
    flex: 0 0 auto;
    padding: 0;
}

body.video-lab-page .video-lab-voice-progress-slot:not([hidden]) {
    margin-bottom: 0.7rem;
}

body.video-lab-page .video-lab-inline-progress-panel[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-audio-player-shell[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-input-progress-panel,
body.video-lab-page .video-lab-scriptwriter-progress-panel {
    width: 100%;
}

body.video-lab-page #step-input.video-lab-step-workspace .video-lab-step-preview,
body.video-lab-page .video-lab-step-workspace--scriptwriter .video-lab-step-preview {
    position: sticky;
    top: var(--images-sidebar-gap);
    align-self: start;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    min-height: calc(100dvh - var(--images-navbar-height) - (var(--images-sidebar-gap) * 2));
    overflow: hidden;
}

body.video-lab-page #step-input.video-lab-step-workspace.is-busy .video-lab-step-preview,
body.video-lab-page .video-lab-step-workspace--scriptwriter.is-busy .video-lab-step-preview {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 1rem;
}

body.video-lab-page #step-input.video-lab-step-workspace .video-lab-brief-card,
body.video-lab-page .video-lab-step-workspace--scriptwriter .video-lab-scriptwriter-support-card {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: 100%;
}

body.video-lab-page .video-lab-assembler-main,
body.video-lab-page .video-lab-exporters-main {
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

body.video-lab-page .video-lab-exporters-target-head p,
body.video-lab-page .video-lab-exporters-path {
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
    /* Kill browser default <p> 16px margin — it pushed the dashed meta line
     * down and broke vertical centering inside the target card. */
    margin: 0;
}

body.video-lab-page .video-lab-assembler-preview-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

body.video-lab-page .video-lab-assembler-brief-panel,
body.video-lab-page .video-lab-exporters-brief-panel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    padding: 1rem 1.45rem 1.2rem;
    overflow: auto;
}

body.video-lab-page .video-lab-assembler-preview-card .video-lab-preview-card-head > div,
body.video-lab-page .video-lab-exporters-preview-card .video-lab-preview-card-head > div {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.18rem;
}

body.video-lab-page .video-lab-assembler-preview-meta,
body.video-lab-page .video-lab-assembler-scene-meta,
body.video-lab-page .video-lab-exporters-target-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.video-lab-page .video-lab-assembler-chip {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: default;
}

body.video-lab-page .video-lab-assembler-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

body.video-lab-page .video-lab-assembler-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 32%, var(--color-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

body.video-lab-page .video-lab-assembler-link:hover {
    border-color: color-mix(in srgb, var(--color-info) 48%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 16%, transparent);
    color: var(--color-text-primary);
}

body.video-lab-page .video-lab-assembler-scene-list,
body.video-lab-page .video-lab-exporters-target-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

body.video-lab-page .video-lab-exporters-target-list {
    flex: 1 1 auto;
    min-height: 0;
}

body.video-lab-page .video-lab-assembler-scene-head,
body.video-lab-page .video-lab-exporters-target-head,
body.video-lab-page .video-lab-exporters-target-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

body.video-lab-page .video-lab-exporters-target-head {
    align-items: center;
}

body.video-lab-page .video-lab-exporters-target-actions {
    align-items: center;
    margin-top: auto;
}

body.video-lab-page .video-lab-exporters-target-actions > .neon-btn-green,
body.video-lab-page .video-lab-exporters-target-actions > .neon-btn-teal,
body.video-lab-page .video-lab-exporters-target-actions > a.neon-btn-teal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex: 1 1 0;
    text-decoration: none;
}

body.video-lab-page .video-lab-exporters-target-card,
body.video-lab-page .video-lab-assembler-scene-card {
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-bg-input) 94%, transparent);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

body.video-lab-page .video-lab-exporters-target-card:hover,
body.video-lab-page .video-lab-assembler-scene-card:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 7%, var(--color-bg-input));
}

body.video-lab-page .video-lab-exporters-target-head strong,
body.video-lab-page .video-lab-assembler-scene-head strong {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    line-height: 1.25;
}

body.video-lab-page .video-lab-exporters-path {
    margin-top: -0.15rem;
    word-break: break-word;
}

body.video-lab-page .video-lab-exporters-stack,
body.video-lab-page .video-lab-exporters-console-shell {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
    height: 100%;
    padding: 1rem;
}

body.video-lab-page .video-lab-exporters-stack {
    padding: 0;
    overflow: auto;
}

body.video-lab-page .video-lab-exporters-overview-lines .video-lab-brief-line-label {
    flex-basis: 7.1rem;
}

body.video-lab-page .video-lab-exporters-section {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-bg-card) 90%, transparent);
}

body.video-lab-page .video-lab-exporters-package-actions {
    display: flex;
    margin-top: 0.9rem;
}

body.video-lab-page .video-lab-exporters-package-actions > .neon-btn-teal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

body.video-lab-page .video-lab-exporters-target-card {
    cursor: pointer;
}

body.video-lab-page .video-lab-exporters-target-card.is-selected {
    border-color: color-mix(in srgb, var(--color-brand-primary) 44%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 12%, var(--color-bg-input));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
}

body.video-lab-page .video-lab-settings-gear-btn,
.video-lab-settings-gear-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 0.4rem; padding: 0.15rem; width: 1.4rem; height: 1.4rem;
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-text-secondary); border-radius: 4px;
    vertical-align: middle;
}
body.video-lab-page .video-lab-settings-gear-btn:hover,
.video-lab-settings-gear-btn:hover { color: var(--color-text); background: var(--color-bg-input); }
body.video-lab-page .video-lab-settings-gear-btn svg,
.video-lab-settings-gear-btn svg { width: 100%; height: 100%; }

/* CapCut status row. The dashed separator stretches edge-to-edge of the
 * parent target card (card already has ~1rem inner padding, so we cancel
 * it with negative margins, then re-pad the text only). */
body.video-lab-page .video-lab-exporters-capcut-meta {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-border) 75%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    opacity: 0.9;
}

body.video-lab-page .video-lab-exporters-capcut-meta code {
    font-family: var(--font-mono, "SF Mono", Menlo, monospace);
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    background: color-mix(in srgb, var(--color-bg-input) 70%, transparent);
    border-radius: 4px;
    color: var(--color-text);
}

/* Legacy capcut-title-row / capcut-badge styles removed — the "Готов" pill
 * was redundant (status is already in the dashed meta line + console). */

body.video-lab-page .video-lab-exporters-target-card--static {
    cursor: default;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

/* Hover-highlight: each target card lights up its own border on hover so the
 * user can see Videobot and CapCut as separately interactive zones. */
body.video-lab-page .video-lab-exporters-target-card--static:hover {
    border-color: color-mix(in srgb, var(--color-brand-primary) 70%, var(--color-border));
    background: color-mix(in srgb, var(--color-bg-input) 92%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 25%, transparent);
}

/* owner 2026-06-22: a TIER-LOCKED card hovers with a WARNING (amber) outline, not the
 * brand-purple one - purple reads as "available", amber matches the «Нужен тариф» badge.
 * Higher specificity (2 attrs) + later source than the --static:hover rule above. */
body.video-lab-page [data-capcut-card][data-capcut-locked="1"]:hover {
    border-color: color-mix(in srgb, var(--color-warning) 70%, var(--color-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 25%, transparent);
}

/* owner 2026-06-22: hovering ANYWHERE on the locked card lifts/lights the «Нужен тариф»
 * badge too (not just hovering the pill itself) - the whole block reads as one
 * upgrade affordance. Mirrors the a.badge-warning:hover styles below. */
body.video-lab-page [data-capcut-card][data-capcut-locked="1"]:hover a.badge-warning {
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    transform: translateY(-1px);
}

body.video-lab-page .video-lab-exporters-target-card--static .video-lab-exporters-target-head {
    /* Center the icon row vertically against the (now compact) title + description.
     * flex-start used to pin the icons to the top, which after we removed the
     * <p> 16px margin-bottom left a visible gap underneath them. */
    align-items: center;
}

body.video-lab-page .video-lab-exporters-target-card--static .video-lab-exporters-target-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

body.video-lab-page .video-lab-exporters-target-icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    /* No more align-self:flex-start / margin-top — the parent centers us now. */
}

body.video-lab-page .video-lab-exporters-action-ibtn,
body.video-lab-page a.video-lab-exporters-action-ibtn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    text-decoration: none;
}

body.video-lab-page .video-lab-exporters-action-ibtn:not([disabled]):hover,
body.video-lab-page .video-lab-exporters-action-ibtn:not([disabled]):focus-visible,
body.video-lab-page a.video-lab-exporters-action-ibtn:hover,
body.video-lab-page a.video-lab-exporters-action-ibtn:focus-visible {
    border-color: color-mix(in srgb, var(--color-brand-secondary) 44%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-secondary) 16%, transparent);
    color: color-mix(in srgb, var(--color-brand-secondary) 78%, white 22%);
    transform: translateY(-1px);
}

body.video-lab-page .video-lab-exporters-action-ibtn[disabled] {
    opacity: 0.46;
    cursor: default;
}

body.video-lab-page .video-lab-exporters-action-ibtn svg {
    width: 16px;
    height: 16px;
}

body.video-lab-page .video-lab-export-preview-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    background: var(--color-bg-inverse);
    box-shadow: none;
}

body.video-lab-page .video-lab-export-preview-main {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: var(--color-bg-inverse);
    overflow: hidden;
}

body.video-lab-page .video-lab-export-preview-player {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: var(--color-bg-inverse);
    object-fit: contain;
}

body.video-lab-page .video-lab-export-preview-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, white 18%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-inverse) 62%, transparent);
    color: var(--color-text-on-accent);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

body.video-lab-page .video-lab-export-preview-close:hover,
body.video-lab-page .video-lab-export-preview-close:focus-visible {
    border-color: color-mix(in srgb, white 34%, transparent);
    background: color-mix(in srgb, var(--color-bg-inverse) 78%, transparent);
    transform: translateY(-1px);
}

body.video-lab-page .video-lab-export-preview-close svg {
    width: 18px;
    height: 18px;
}

body.video-lab-page .video-lab-step-workspace--exporters .video-lab-step-card-footer {
    display: flex;
    grid-template-columns: minmax(0, 1fr);
}

body.video-lab-page .video-lab-exporters-footer-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

body.video-lab-page .video-lab-exporters-footer-row > .neon-btn-teal,
body.video-lab-page .video-lab-exporters-footer-row > .neon-btn-blue,
body.video-lab-page .video-lab-exporters-footer-row > a.neon-btn-blue {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

body.video-lab-page .video-lab-exporters-console-shell {
    flex: 1 1 auto;
    padding: 0 1rem 1rem;
    overflow: hidden;
}

body.video-lab-page .video-lab-exporters-console-surface {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg-input);
    /* Header already has border-bottom; surface must NOT add its own border-top
     * or the two adjacent 1px borders read as a fat double line. */
    margin: 0 -1rem 0;
}

body.video-lab-page .video-lab-exporters-progress-shell {
    margin: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.72rem;
}

body.video-lab-page .video-lab-exporters-progress-shell .video-lab-exporters-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    grid-column: 1 / -1;
}

body.video-lab-page .video-lab-exporters-progress-meta strong {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.35;
}

body.video-lab-page .video-lab-exporters-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

body.video-lab-page .video-lab-exporters-progress-head strong {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.35;
}

body.video-lab-page .video-lab-exporters-progress-head span {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

body.video-lab-page .video-lab-exporters-progress-track {
    position: relative;
    grid-column: 1 / -1;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border) 72%, transparent);
    cursor: default;
}

body.video-lab-page .video-lab-exporters-progress-fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-brand-primary) 86%, white), color-mix(in srgb, var(--color-success) 82%, white));
}

body.video-lab-page .video-lab-exporters-progress-thumb {
    display: none;
}

body.video-lab-page .video-lab-exporters-console-list {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: auto;
    padding: 0.7rem 0;
    scroll-behavior: auto;
    overscroll-behavior: contain;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

body.video-lab-page .video-lab-exporters-console-list::-webkit-scrollbar {
    width: 8px;
}

body.video-lab-page .video-lab-exporters-console-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
}

body.video-lab-page .video-lab-exporters-console-line {
    display: grid;
    grid-template-columns: calc(4.7rem + 2px) minmax(0, 1fr);
    gap: 0;
    align-items: start;
    padding: 0.28rem 0.58rem 0.28rem 0.9rem;
    position: relative;
}

body.video-lab-page .video-lab-exporters-console-line.is-selected::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background: var(--color-brand-primary-15);
    pointer-events: none;
    z-index: 0;
}

body.video-lab-page .video-lab-exporters-console-line.is-level-warning {
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    border-left: 3px solid var(--color-warning);
    padding-left: calc(0.9rem - 3px);
}

body.video-lab-page .video-lab-exporters-console-line.is-level-warning .video-lab-exporters-console-line-body strong {
    color: var(--color-warning);
}

body.video-lab-page .video-lab-exporters-console-line.is-level-error,
body.video-lab-page .video-lab-exporters-console-line.is-level-critical {
    background: color-mix(in srgb, var(--color-error) 14%, transparent);
    border-left: 3px solid var(--color-error);
    padding-left: calc(0.9rem - 3px);
}

body.video-lab-page .video-lab-exporters-console-line.is-level-error .video-lab-exporters-console-line-body strong,
body.video-lab-page .video-lab-exporters-console-line.is-level-critical .video-lab-exporters-console-line-body strong {
    color: var(--color-error);
}

body.video-lab-page .video-lab-exporters-console-line.is-level-success {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    border-left: 3px solid var(--color-success);
    padding-left: calc(0.9rem - 3px);
}

body.video-lab-page .video-lab-exporters-console-line.is-level-success .video-lab-exporters-console-line-body strong {
    color: var(--color-success);
}

/* Danger accent inside a console message ("удалил", "deleted", "failed", …).
 * Wins over level-specific strong colors (success/warning/error/info) via
 * !important — this is intentional: the accented word must read red even in
 * a green success line ("Пользователь удалил CapCut-драфт" emitted as info). */
/* Danger accent inside a console message ("удалил", "deleted", "failed", …).
 * Only the COLOR is overridden — font-size/family/weight/style all inherit
 * from the surrounding <strong> so the accented word reads as part of the
 * same line, just red. !important is required to beat level-specific
 * strong colors (success/warning/error). */
body.video-lab-page .video-lab-exporters-console-line-body .console-accent-danger,
body.video-lab-page .video-lab-exporters-console-line.is-selected .video-lab-exporters-console-line-body .console-accent-danger,
body.video-lab-page .video-lab-exporters-console-line.is-level-success .video-lab-exporters-console-line-body strong .console-accent-danger,
body.video-lab-page .video-lab-exporters-console-line.is-level-warning .video-lab-exporters-console-line-body strong .console-accent-danger,
body.video-lab-page .video-lab-exporters-console-line.is-level-error .video-lab-exporters-console-line-body strong .console-accent-danger,
body.video-lab-page .video-lab-exporters-console-line.is-level-critical .video-lab-exporters-console-line-body strong .console-accent-danger,
body.video-lab-page .console-accent-danger {
    color: var(--color-error) !important;
}

/* Export Console header: title + actions row (the trash-clear button). */
body.video-lab-page .video-lab-exporters-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.video-lab-page .video-lab-exporters-console-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Trash button uses the design-system muted danger variant
 * (neon-btn-red neon-btn--icon-only neon-btn--muted neon-btn--sm) — no
 * per-component overrides needed. See /dev/design/buttons → Muted Icon-only. */

body.video-lab-page .video-lab-exporters-console-line-no,
body.video-lab-page .video-lab-exporters-console-line-body {
    position: relative;
    z-index: 1;
}

body.video-lab-page .video-lab-exporters-console-line-no {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--color-text-tertiary);
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: left;
    letter-spacing: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.video-lab-page .video-lab-exporters-console-time {
    display: block;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

body.video-lab-page .video-lab-exporters-console-date {
    display: block;
    color: var(--color-text-tertiary);
    font-size: 0.68rem;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

body.video-lab-page .video-lab-exporters-console-line.is-selected .video-lab-exporters-console-line-no,
body.video-lab-page .video-lab-exporters-console-line.is-selected .video-lab-exporters-console-line-body strong {
    color: var(--color-text-primary);
}

body.video-lab-page .video-lab-exporters-console-line.is-selected .video-lab-exporters-console-time,
body.video-lab-page .video-lab-exporters-console-line.is-selected .video-lab-exporters-console-date {
    color: var(--color-text-tertiary);
}

body.video-lab-page .video-lab-exporters-console-line-body {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
    margin-top: -1px;
}

body.video-lab-page .video-lab-exporters-console-line-body strong {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.34;
    font-weight: 700;
    margin-top: calc(-0.04rem - 1px);
}

body.video-lab-page .video-lab-exporters-console-line-body span {
    color: var(--color-text-tertiary);
    font-size: 0.76rem;
    line-height: 1.4;
}

body.video-lab-page .video-lab-exporters-console-input-shell {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-input) 18%, transparent), color-mix(in srgb, var(--color-bg-card) 34%, var(--color-bg-input))),
        color-mix(in srgb, var(--color-bg-card) 32%, var(--color-bg-input));
    backdrop-filter: blur(10px);
}

body.video-lab-page .video-lab-exporters-console-prompt {
    color: var(--color-brand-primary);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

body.video-lab-page .video-lab-exporters-console-input.form-control {
    height: 3rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.84rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

body.video-lab-page .video-lab-exporters-console-input.form-control:focus {
    box-shadow: none;
}

body.video-lab-page .video-lab-exporters-progress-percent {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

body.video-lab-page .video-lab-assembler-empty-state,
body.video-lab-page .video-lab-exporters-empty-state {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    flex-direction: column;
    gap: 0.45rem;
    align-items: stretch;
    justify-content: flex-start;
    min-height: max(12rem, 100%);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

body.video-lab-page .video-lab-assembler-empty-state strong,
body.video-lab-page .video-lab-exporters-empty-state strong {
    color: var(--color-text-primary);
    font-size: 1rem;
}

body.video-lab-page .video-lab-assembler-empty-state p,
body.video-lab-page .video-lab-exporters-empty-state p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

body.video-lab-page .video-lab-visuals-script-panel {
    min-height: 0;
    padding: 1rem 1.45rem 1.2rem;
    overflow: hidden;
}

body.video-lab-page .video-lab-visuals-script-note {
    width: 100%;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

body.video-lab-page .video-lab-visuals-action-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
}

body.video-lab-page .video-lab-visuals-model-field {
    display: block;
    min-width: 0;
    gap: 0;
    line-height: normal;
    align-self: center;
}

body.video-lab-page .video-lab-visuals-action-row > .video-lab-step-action-primary,
body.video-lab-page .video-lab-visuals-action-row > .video-lab-step-action-secondary {
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-action-row > .video-lab-visuals-model-field,
body.video-lab-page .video-lab-visuals-action-row > .video-lab-step-action-primary,
body.video-lab-page .video-lab-visuals-action-row > .video-lab-step-action-secondary {
    min-height: 40px;
    height: 40px;
    flex: 1 1 0;
    width: 100%;
}

body.video-lab-page .video-lab-visuals-model-field .video-lab-model-dropdown,
body.video-lab-page .video-lab-visuals-model-field .video-lab-model-dropdown .dropdown-custom-toggle,
body.video-lab-page .video-lab-visuals-model-field .video-lab-model-dropdown .select-trigger {
    height: 100%;
}

/* Clamp BOTH the legacy dropdown-toggle AND the design-system select trigger to the footer
   row height — otherwise the taller .select-trigger overflows the 40px wrap and the provider
   sub-line (hangs below the field border) sinks under the footer divider. */
body.video-lab-page .video-lab-visuals-model-field .video-lab-model-dropdown .dropdown-custom-toggle,
body.video-lab-page .video-lab-visuals-model-field .video-lab-model-dropdown .select-trigger {
    min-height: 40px;
    height: 40px;
    border-radius: 8px;
}

body.video-lab-page .video-lab-visuals-scope-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-card-hover) 38%, transparent);
}

body.video-lab-page .video-lab-visuals-action-row .video-lab-visuals-scope-btn {
    flex: 1 1 0;
}

body.video-lab-page .video-lab-visuals-scope-btn {
    min-height: 30px;
    padding: 0.35rem 0.72rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

body.video-lab-page .video-lab-visuals-scope-btn:hover:not(:disabled) {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 30%, var(--color-border));
}

body.video-lab-page .video-lab-visuals-scope-btn.is-active {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 46%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
}

body.video-lab-page .video-lab-visuals-scope-btn:disabled {
    cursor: default;
    opacity: 0.92;
}

body.video-lab-page .video-lab-visuals-action-row > .video-lab-step-action-primary,
body.video-lab-page .video-lab-visuals-action-row > .video-lab-step-action-secondary {
    width: 100%;
}

body.video-lab-page .video-lab-visuals-action-row > button[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-step-workspace--visuals .video-lab-step-main-card {
    overflow: visible;
}

body.video-lab-page .video-lab-step-workspace--visuals .video-lab-step-card-head {
    border-top-left-radius: var(--images-panel-radius);
    border-top-right-radius: var(--images-panel-radius);
    overflow: hidden;
}

body.video-lab-page .video-lab-step-workspace--visuals .video-lab-step-card-footer {
    display: grid;
    height: 65px;
    min-height: 65px;
    padding: 0 1.5rem;
    align-items: center;
    border-bottom-left-radius: var(--images-panel-radius);
    border-bottom-right-radius: var(--images-panel-radius);
}

body.video-lab-page .video-lab-step-workspace--visuals .video-lab-step-card-footer .video-lab-step-action-row {
    margin: 0;
    align-items: center;
}

body.video-lab-page .video-lab-visuals-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-shrink: 0;
    /* The regenerate-all button's count-badge floats above its top edge; this row sits
       flush against the step-preview's overflow:hidden top, which would clip the badge.
       A small top breathing-room lets the badge overlay fully without clipping (the whole
       row shifts together — meta+tools stay aligned; the icon inside the button is
       untouched). */
    margin-top: 0.5rem;
}

body.video-lab-page .video-lab-visuals-scope-switch--board {
    min-height: 36px;
}

body.video-lab-page .video-lab-visuals-scope-switch--board .video-lab-visuals-scope-btn {
    min-width: 64px;
}

body.video-lab-page .video-lab-visuals-board-meta[data-visuals-meta],
body.video-lab-page .video-lab-step-preview--visuals .video-lab-visuals-board-tools {
    display: none !important;
}

body.video-lab-page .video-lab-visuals-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

body.video-lab-page .video-lab-visuals-mode-btn[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-visuals-mode-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-visuals-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

body.video-lab-page .video-lab-visuals-mode-btn {
    min-height: 36px;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--images-panel-radius);
    background: color-mix(in srgb, var(--color-bg-card) 90%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

body.video-lab-page .video-lab-visuals-mode-btn:hover:not(:disabled) {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 34%, var(--color-border));
}

body.video-lab-page .video-lab-visuals-mode-btn.is-active {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 44%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
}

body.video-lab-page .video-lab-visuals-mode-btn:disabled {
    cursor: default;
    opacity: 0.92;
}

body.video-lab-page .video-lab-visuals-mode-icon-btn {
    position: relative;
    /* The base mode-btn sets no justify-content (defaults flex-start) → an icon-only
       button would left-align its glyph. Center it so the ↺ sits dead-centre and the
       absolute count-badge (below) never appears to "shift" it. */
    justify-content: center;
    width: 36px;
    min-width: 36px;
    padding: 0;
    /* Count-badge overflows the top-right corner; let it sit ON TOP of neighbours
       instead of sinking under the toolbar row above it. */
    overflow: visible;
}

body.video-lab-page .video-lab-visuals-mode-icon-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-visuals-board-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 32px;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-visuals-board-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-board-regenerate-failed {
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-visuals-board-regenerate-failed span {
    position: absolute;
    top: -0.36rem;
    right: -0.36rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--color-error);
    color: white;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    /* Overlay badge: ride above siblings (never sink under the toolbar) and stay a pure
       overlay — pointer-events off so it never eats the button's click. */
    z-index: 4;
    pointer-events: none;
}

body.video-lab-page .video-lab-visuals-board {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

body.video-lab-page .video-lab-visuals-board::-webkit-scrollbar {
    width: 8px;
}

body.video-lab-page .video-lab-visuals-board::-webkit-scrollbar-track {
    background: transparent;
}

body.video-lab-page .video-lab-visuals-board::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

body.video-lab-page .video-lab-visuals-board::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

body.video-lab-page .video-lab-visuals-board.is-empty {
    overflow: hidden;
}

body.video-lab-page .video-lab-visuals-empty-state {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
    border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    border-radius: var(--images-panel-radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-input) 40%, transparent), color-mix(in srgb, var(--color-bg-card) 20%, transparent)),
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 0 10px,
            transparent 10px 20px
        );
    overflow: hidden;
}

body.video-lab-page .video-lab-visuals-empty-state::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top center, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 58%);
    opacity: 0.85;
}

body.video-lab-page .video-lab-visuals-progress-panel {
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
}

body.video-lab-page .video-lab-visuals-progress-panel[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-visuals-progress-copy {
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-progress-meta {
    align-items: flex-start;
}

body.video-lab-page .video-lab-visuals-progress-meta .video-lab-visuals-progress-percent {
    flex-shrink: 0;
}

body.video-lab-page .video-lab-visuals-progress-copy strong,
body.video-lab-page .video-lab-visuals-progress-meta strong {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.35;
}

body.video-lab-page .video-lab-visuals-progress-copy p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
}

body.video-lab-page .video-lab-visuals-progress-percent {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

body.video-lab-page .video-lab-visuals-progress-track {
    margin: 0;
}

body.video-lab-page .video-lab-visuals-progress-fill {
    inset: 0 auto 0 0;
    width: 0;
    transition: width var(--transition-fast);
}

body.video-lab-page .video-lab-visuals-unit.video-lab-visuals-unit--compact {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    min-height: 144px;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-bg-card);
}

body.video-lab-page .video-lab-visuals-compact-media {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 256px;
    min-height: 144px;
    background: var(--color-bg-page);
}

body.video-lab-page .video-lab-visuals-compact-media-top {
    position: absolute;
    top: 0.42rem;
    left: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
}

body.video-lab-page .video-lab-visuals-header-action {
    color: var(--color-info);
    border-color: color-mix(in srgb, var(--color-info) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
}

body.video-lab-page .video-lab-visuals-header-action:hover:not(:disabled) {
    color: color-mix(in srgb, var(--color-info) 88%, white 12%);
    border-color: color-mix(in srgb, var(--color-info) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 20%, transparent);
}

body.video-lab-page .video-lab-visuals-header-action:disabled {
    cursor: default;
    opacity: 0.52;
}

body.video-lab-page .video-lab-visuals-thumb-info-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
}

body.video-lab-page .video-lab-visuals-thumb-info-btn svg {
    width: 14px;
    height: 14px;
}

body.video-lab-page .video-lab-visuals-header-status {
    max-width: 100%;
}

body.video-lab-page .video-lab-visuals-compact-status {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.video-lab-page .video-lab-visuals-thumb-status-chip {
    max-width: min(100%, 220px);
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 26px;
    padding: 0.18rem 0.62rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.15;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

body.video-lab-page .video-lab-visuals-thumb-status-chip::before {
    content: '';
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor;
    flex: 0 0 auto;
}

body.video-lab-page .video-lab-visuals-thumb-status-chip--yellow {
    background: color-mix(in srgb, var(--color-bg-page) 78%, var(--color-warning-15) 22%);
    color: var(--color-warning);
    border-color: var(--color-warning-30);
}

body.video-lab-page .video-lab-visuals-thumb-status-chip--blue {
    background: color-mix(in srgb, var(--color-bg-page) 72%, var(--color-info-15) 28%);
    color: var(--color-info);
    border-color: var(--color-info-30);
}

body.video-lab-page .video-lab-visuals-thumb-status-chip--red {
    background: var(--color-error-15);
    color: var(--color-error);
    border-color: var(--color-error-30);
}

body.video-lab-page .video-lab-visuals-thumb-status-chip--green {
    background: color-mix(in srgb, var(--color-bg-page) 75%, transparent);
    color: var(--color-success);
    border-color: var(--color-success-30);
}

body.video-lab-page .video-lab-visuals-compact-thumb {
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    min-height: 144px;
    height: 144px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-input) 72%, transparent), color-mix(in srgb, var(--color-bg-card) 82%, transparent)),
        radial-gradient(circle at top center, color-mix(in srgb, var(--color-brand-primary) 12%, transparent), transparent 60%);
    overflow: hidden;
}

body.video-lab-page .video-lab-visuals-compact-thumb::after,
body.video-lab-page .video-lab-visuals-unit-media--clip::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

body.video-lab-page .video-lab-visuals-compact-thumb.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-input) 40%, transparent), color-mix(in srgb, var(--color-bg-card) 20%, transparent)),
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 0 10px,
            transparent 10px 20px
        );
}

body.video-lab-page .video-lab-visuals-compact-thumb.is-processing::after,
body.video-lab-page .video-lab-visuals-unit-media--clip.is-processing::after {
    opacity: 1;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-info) 18%, transparent), color-mix(in srgb, var(--color-bg-card) 76%, transparent)),
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--color-info) 10%, transparent) 0 10px,
            transparent 10px 20px
        );
}

body.video-lab-page .video-lab-visuals-compact-thumb.is-empty::after,
body.video-lab-page .video-lab-visuals-compact-thumb.is-missing_source::after,
body.video-lab-page .video-lab-visuals-unit-media--clip.is-missing_source::after {
    opacity: 1;
    background: radial-gradient(circle at top center, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 58%);
}

body.video-lab-page .video-lab-visuals-compact-thumb.is-failed::after,
body.video-lab-page .video-lab-visuals-unit-media--clip.is-failed::after {
    opacity: 1;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-error) 16%, transparent), color-mix(in srgb, var(--color-bg-card) 80%, transparent)),
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--color-error) 10%, transparent) 0 10px,
            transparent 10px 20px
        );
}

body.video-lab-page .video-lab-visuals-compact-thumb.is-awaiting_clip::after,
body.video-lab-page .video-lab-visuals-unit-media--clip.is-awaiting_clip::after {
    opacity: 1;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary) 16%, transparent), color-mix(in srgb, var(--color-bg-card) 80%, transparent)),
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--color-brand-primary) 10%, transparent) 0 10px,
            transparent 10px 20px
        );
}

body.video-lab-page .video-lab-visuals-compact-thumb.is-missing_source,
body.video-lab-page .video-lab-visuals-unit-media--clip.is-missing_source {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-input) 40%, transparent), color-mix(in srgb, var(--color-bg-card) 20%, transparent)),
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 0 10px,
            transparent 10px 20px
        );
}

body.video-lab-page .video-lab-visuals-compact-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-bg-page);
}

body.video-lab-page .video-lab-visuals-play-badge {
    position: absolute;
    inset: auto auto 0.7rem 0.7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-bg-card) 76%, color-mix(in srgb, var(--color-bg-inverse) 34%, transparent));
    color: var(--color-text-primary);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-bg-inverse) 22%, transparent);
    backdrop-filter: blur(8px);
}

body.video-lab-page .video-lab-visuals-play-badge svg {
    width: 18px;
    height: 18px;
}

body.video-lab-page .video-lab-visuals-compact-thumb-label {
    position: relative;
    z-index: 1;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.35;
}

body.video-lab-page .video-lab-visuals-compact-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.56rem;
    background: var(--color-bg-card);
}

body.video-lab-page .video-lab-visuals-compact-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem;
    margin-top: auto;
}

body.video-lab-page .video-lab-visuals-compact-foot-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: wrap;
}

body.video-lab-page .video-lab-visuals-compact-foot-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-visuals-unit--compact .video-lab-visuals-unit-meta-chip {
    min-width: 0;
    width: auto;
    padding: 0 0.58rem;
    flex: 0 0 auto;
}

body.video-lab-page .video-lab-visuals-unit-model-chip {
    max-width: min(360px, 45vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.video-lab-page .video-lab-visuals-compact-media-model {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    max-width: calc(100% - 1rem);
    padding: 0.16rem 0.5rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-bg-page) 0%, var(--color-border) 60%);
    background: color-mix(in srgb, var(--color-bg-page) 62%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

body.video-lab-page .video-lab-visuals-expand-toggle svg {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

body.video-lab-page .video-lab-visuals-expand-toggle.is-expanded svg {
    transform: translateY(-1px);
}

body.video-lab-page .video-lab-visuals-unit--expanded-from-compact {
    border-color: color-mix(in srgb, var(--color-brand-primary) 26%, var(--color-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
}

body.video-lab-page .video-lab-visuals-unit--expanded-from-compact .video-lab-visuals-unit-media {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.video-lab-page .video-lab-visuals-compact-copy {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 0.05rem;
}

body.video-lab-page .video-lab-visuals-unit {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    border-radius: var(--images-panel-radius);
    background: color-mix(in srgb, var(--color-bg-input) 94%, transparent);
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-unit-media {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    position: relative;
}

body.video-lab-page .video-lab-visuals-unit-media-top {
    position: absolute;
    top: 0.52rem;
    left: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
}

body.video-lab-page .video-lab-visuals-unit-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: transparent;
}

body.video-lab-page .video-lab-visuals-unit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-unit-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.7rem;
}

body.video-lab-page .video-lab-visuals-unit-status-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-unit-status-side {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-visuals-unit-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

body.video-lab-page .video-lab-visuals-unit-meta-chip {
    width: auto;
    min-width: 96px;
    padding: 0 0.7rem;
    cursor: default;
}

body.video-lab-page .video-lab-visuals-unit-ms {
    font-size: 0.8em;
    opacity: 0.75;
    position: relative;
    top: 0.08em;
    letter-spacing: -0.01em;
}

body.video-lab-page .video-lab-visuals-unit-head-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-unit-head strong {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.22;
    min-width: 0;
}

body.video-lab-page .video-lab-visuals-unit-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.7rem;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: default;
}

body.video-lab-page .video-lab-visuals-unit-regenerate-icon {
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-visuals-expand-toggle {
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-visuals-expand-toggle:hover:not(:disabled),
body.video-lab-page .video-lab-visuals-unit-regenerate-icon:hover:not(:disabled) {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-border-light) 94%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 68%, transparent);
}

body.video-lab-page .video-lab-visuals-unit--clip .video-lab-visuals-compact-thumb img,
body.video-lab-page .video-lab-visuals-unit-media--clip img {
    object-fit: cover;
}

body.video-lab-page .video-lab-visuals-unit-submeta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-visuals-unit-script {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

body.video-lab-page .video-lab-visuals-unit-purpose {
    color: var(--color-text-secondary);
    font-size: 0.83rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

body.video-lab-page .video-lab-visuals-unit-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

body.video-lab-page .video-lab-visuals-unit-section {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding: 0.68rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-card) 80%, transparent);
}

body.video-lab-page .video-lab-visuals-unit-section-label {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-visuals-unit-prompt {
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

body.video-lab-page .video-lab-visuals-unit-json {
    margin: 0;
    padding: 0.62rem 0.72rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-bg-input) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

body.video-lab-page .video-lab-visuals-regenerate-modal {
    width: min(1280px, calc(100vw - 2rem));
    height: min(95vh, calc(100vh - 1rem));
    max-height: min(95vh, calc(100vh - 1rem));
}

body.video-lab-page .video-lab-visuals-regenerate-modal .modal-header,
body.video-lab-page .video-lab-visuals-regenerate-modal .modal-footer {
    flex: 0 0 auto;
}

body.video-lab-page .video-lab-visuals-regenerate-modal .modal-main {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow: hidden;
    min-height: 0;
}

body.video-lab-page .video-lab-visuals-regenerate-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

body.video-lab-page .video-lab-visuals-regenerate-primary-column,
body.video-lab-page .video-lab-visuals-regenerate-aside-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
}

body.video-lab-page .video-lab-visuals-regenerate-primary-column > .input-label:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.video-lab-page .video-lab-visuals-regenerate-aside-column > .video-lab-visuals-regenerate-notes-grid,
body.video-lab-page .video-lab-visuals-regenerate-aside-column > .video-lab-visuals-regenerate-negative-wrap {
    min-height: 0;
}

body.video-lab-page .video-lab-visuals-regenerate-aside-column > .video-lab-visuals-regenerate-negative-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body.video-lab-page .video-lab-visuals-regenerate-header {
    position: relative;
    align-items: flex-start;
    padding-right: 4.25rem;
    min-height: 88px;
}

body.video-lab-page .video-lab-visuals-regenerate-header .close-button {
    position: absolute;
    top: 18px;
    right: 24px;
}

body.video-lab-page .video-lab-visuals-regenerate-head-main {
    min-width: 0;
    max-width: min(46%, 420px);
}

body.video-lab-page .video-lab-visuals-regenerate-head-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

body.video-lab-page .video-lab-visuals-regenerate-head-center .video-lab-visuals-regenerate-mode-tabs {
    pointer-events: auto;
}

body.video-lab-page .video-lab-visuals-regenerate-head-main p {
    margin: 0;
    margin-top: 0.45rem;
}

body.video-lab-page .video-lab-visuals-regenerate-mode-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

body.video-lab-page .video-lab-visuals-regenerate-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    min-width: 0;
    padding: 0.38rem 0.88rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
    box-shadow: none;
    transform: none;
    appearance: none;
}

body.video-lab-page .video-lab-visuals-regenerate-mode-tab.is-active {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 16%, var(--color-bg-input));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

body.video-lab-page .video-lab-visuals-regenerate-mode-tab:hover:not(:disabled),
body.video-lab-page .video-lab-visuals-regenerate-mode-tab:focus-visible {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-brand-primary) 36%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-bg-card));
    box-shadow: none;
    transform: none;
    outline: none;
}

body.video-lab-page .video-lab-visuals-regenerate-mode-tab:disabled {
    opacity: 0.6;
    cursor: default;
}

body.video-lab-page .video-lab-visuals-regenerate-layout {
    display: contents;
}

body.video-lab-page .video-lab-visuals-regenerate-shell .input-label,
body.video-lab-page .video-lab-visuals-regenerate-controls-grid .input-label,
body.video-lab-page .video-lab-visuals-regenerate-controls-grid .dropdown-custom,
body.video-lab-page .video-lab-visuals-regenerate-notes-grid .input-label {
    margin: 0;
}

body.video-lab-page .video-lab-visuals-regenerate-prompt-field.form-control {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    resize: none;
    overflow-y: auto;
    line-height: 1.58;
    color: var(--color-text-primary);
    font-size: 0.84rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    text-overflow: clip;
    white-space: pre-wrap;
    word-break: break-word;
}

body.video-lab-page .video-lab-visuals-regenerate-shell .video-lab-input-counter {
    background: var(--input-label-surface);
}

body.video-lab-page .video-lab-visuals-regenerate-shell .input-label.is-active .input-label-text {
    color: var(--color-brand-primary);
}

body.video-lab-page .video-lab-visuals-regenerate-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

body.video-lab-page .video-lab-visuals-regenerate-controls-grid .dropdown-floating {
    margin: 0;
}

body.video-lab-page .video-lab-visuals-regenerate-controls-grid .video-lab-visuals-regenerate-model-dropdown {
    width: 100%;
}

body.video-lab-page .video-lab-visuals-regenerate-controls-grid .video-lab-visuals-regenerate-model-dropdown .dropdown-custom-toggle {
    min-height: 54px;
    height: 54px;
    padding: 1rem;
    background: var(--input-label-surface);
    border-radius: var(--radius-md);
}

body.video-lab-page .video-lab-visuals-regenerate-controls-grid .video-lab-visuals-regenerate-model-dropdown .dropdown-floating-label {
    background: var(--input-label-surface);
}

body.video-lab-page .video-lab-visuals-regenerate-controls-grid .video-lab-visuals-regenerate-model-dropdown .dropdown-custom-menu {
    z-index: 500;
}

body.video-lab-page .video-lab-visuals-regenerate-controls-grid .video-lab-visuals-regenerate-model-dropdown.is-disabled .dropdown-custom-toggle {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    opacity: 0.72;
}

body.video-lab-page .video-lab-visuals-regenerate-video-model-wrap {
    grid-column: 1 / -1;
}

body.video-lab-page .video-lab-visuals-regenerate-switch-field {
    --input-label-surface: var(--color-bg-input);
}

body.video-lab-page .video-lab-visuals-regenerate-switch-field .switch-setting-box {
    width: 100%;
    margin: 0;
    min-height: 54px;
    padding: 0.45rem 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-bg-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body.video-lab-page .video-lab-visuals-regenerate-switch-field .switch-setting-box:hover,
body.video-lab-page .video-lab-visuals-regenerate-switch-field .switch-setting-box:focus-within {
    border-color: var(--color-brand-primary);
    box-shadow: none;
}

body.video-lab-page .video-lab-visuals-regenerate-switch-field .switch-row {
    width: 100%;
}

body.video-lab-page .video-lab-visuals-regenerate-switch-field .switch-row-title {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: normal;
}

body.video-lab-page .video-lab-visuals-regenerate-notes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
    flex: 0 0 auto;
}

body.video-lab-page .video-lab-visuals-regenerate-meta-field.form-control {
    min-height: 168px;
    height: auto;
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

body.video-lab-page .video-lab-visuals-regenerate-meta-field--editable.form-control {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    resize: none;
    overflow-y: auto;
    color: var(--color-text-primary);
}

body.video-lab-page .video-lab-visuals-regenerate-meta-field.form-control[readonly] {
    background: color-mix(in srgb, var(--color-bg-input) 82%, var(--color-bg-card));
}

body.video-lab-page .video-lab-brief-warning {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-block: 0.25rem;
    min-height: 84px;
    padding-top: 1rem !important;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

body.video-lab-page .video-lab-brief-warning-copy {
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
    min-width: 0;
}

body.video-lab-page .video-lab-brief-warning-copy strong {
    color: color-mix(in srgb, var(--color-warning) 76%, white 18%);
    font-size: 0.92rem;
    line-height: 1.3;
}

body.video-lab-page .video-lab-brief-warning-copy p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    line-height: 1.42;
}

body.video-lab-page .video-lab-brief-warning-btn {
    min-height: 36px;
    padding: 0.38rem 0.92rem;
    white-space: nowrap;
    align-self: center;
}

body.video-lab-page .video-lab-brief-section + .video-lab-brief-section {
    padding-top: 0;
}

body.video-lab-page .video-lab-brief-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

body.video-lab-page .video-lab-brief-kicker {
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-brief-section-head strong {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    line-height: 1.3;
}

body.video-lab-page .video-lab-brief-outline {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    padding: 0.05rem 0 0;
}

body.video-lab-page .video-lab-brief-line {
    display: flex;
    align-items: flex-start;
    gap: 0.46rem;
    padding: 0.24rem 0;
    border-left: none;
}

body.video-lab-page .video-lab-brief-line-label {
    flex: 0 0 8.2rem;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
}

body.video-lab-page .video-lab-brief-line strong,
body.video-lab-page .video-lab-brief-line p {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.42;
    word-break: break-word;
    margin: 0;
}

body.video-lab-page .video-lab-brief-copy {
    min-height: 5.8rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-card-hover) 38%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.48;
    white-space: pre-line;
    word-break: break-word;
}

body.video-lab-page .video-lab-brief-line--nested {
    padding-left: 0.95rem;
    border-left-color: color-mix(in srgb, var(--color-brand-primary-20) 86%, transparent);
}

body.video-lab-page .video-lab-brief-line--nested p {
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-brief-outline--compact .video-lab-brief-line-label {
    flex-basis: 8.2rem;
}

body.video-lab-page .video-lab-brief-list {
    display: flex;
    flex-direction: column;
    gap: 0.26rem;
    padding-top: 0.1rem;
}

body.video-lab-page .video-lab-brief-list-item {
    position: relative;
    padding-left: 0.82rem;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
}

body.video-lab-page .video-lab-brief-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand-primary) 72%, var(--color-border));
}

body.video-lab-page .video-lab-brief-list-item.is-placeholder {
    color: var(--color-text-tertiary);
}

body.video-lab-page .video-lab-brief-list-item.is-placeholder::before {
    background: var(--color-text-tertiary);
}

body.video-lab-page .video-lab-brief-confirm-btn[disabled] {
    opacity: 0.62;
}

body.video-lab-page .video-lab-clarification-textarea {
    min-height: 5.75rem;
    resize: vertical;
}

body.video-lab-page #videoLabClarificationModal .modal-container {
    width: min(760px, calc(100vw - 2.5rem));
}

body.video-lab-page .video-lab-clarification-list {
    display: flex;
    flex-direction: column;
    gap: 1.08rem;
}

body.video-lab-page .video-lab-clarification-item {
    display: flex;
    flex-direction: column;
    gap: 1.02rem;
}

body.video-lab-page .video-lab-clarification-item-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body.video-lab-page .video-lab-clarification-index {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-brand-primary-15) 78%, var(--color-bg-card));
    color: var(--color-brand-primary);
    font-size: 0.84rem;
    font-weight: 800;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-clarification-question {
    color: var(--color-text-primary);
    font-size: 0.96rem;
    line-height: 1.45;
}

body.video-lab-page .validation-tooltip.validation-tooltip-warning {
    --validation-tooltip-bg: color-mix(in srgb, var(--color-warning) 84%, var(--color-bg-card));
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--color-warning) 42%, var(--color-border));
}

body.video-lab-page .validation-tooltip.validation-tooltip-warning::after {
    border-top-color: var(--validation-tooltip-bg);
}

body.video-lab-page .video-lab-step-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

body.video-lab-page .video-lab-step-actions > .neon-btn-green,
body.video-lab-page .video-lab-step-actions > .neon-btn-purple,
body.video-lab-page .video-lab-step-actions > .neon-btn-teal {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: center;
}

body.video-lab-page .video-lab-step-actions > [hidden] {
    display: none !important;
}

/* The footer itself sets display:grid, which beats the UA [hidden] rule — so the
   `hidden` attr (idle state, no chunks) wouldn't hide it. Guard the element too. */
body.video-lab-page .video-lab-step-actions[hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-brief-card > [hidden],
body.video-lab-page .video-lab-brief-panel > [hidden] {
    display: none !important;
}

body.video-lab-page .video-lab-step-actions.is-single {
    grid-template-columns: minmax(0, 1fr);
}

body.video-lab-page .video-lab-step-actions.is-single > * {
    width: 100%;
    justify-self: stretch;
}

body.video-lab-page .video-lab-step-actions.is-single > .neon-btn-green,
body.video-lab-page .video-lab-step-actions.is-single > .neon-btn-purple,
body.video-lab-page .video-lab-step-actions.is-single > .neon-btn-teal {
    grid-column: 1 / -1;
}

body.video-lab-page .video-lab-step-card-footer {
    box-sizing: border-box;
    height: 65px;
    min-height: 65px;
    padding: 0 1.5rem;
    align-items: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
}

body.video-lab-page .video-lab-audio-setup-card .video-lab-step-card-footer.is-single {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center;
}

body.video-lab-page .video-lab-audio-setup-card .video-lab-step-card-footer.is-single > * {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
}

body.video-lab-page .video-lab-audio-setup-card .video-lab-step-card-footer.is-single > .video-lab-step-action-primary {
    display: flex !important;
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    justify-content: center;
}

body.video-lab-page .video-lab-brief-card-footer {
    flex-shrink: 0;
    grid-template-columns: minmax(0, 1fr);
}

body.video-lab-page .video-lab-brief-card-footer .video-lab-brief-confirm-btn {
    width: 100%;
}

body.video-lab-page .video-lab-step-action-primary,
body.video-lab-page .video-lab-step-action-half {
    width: 100%;
}

body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .form-input,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .form-input,
body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .dropdown-custom,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .dropdown-custom,
body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .range-input,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .range-input,
body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .switch-setting-box,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .switch-setting-box {
    pointer-events: none;
}

body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .form-input,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .form-input,
body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .dropdown-custom-toggle,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .dropdown-custom-toggle,
body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .range-control,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .range-control,
body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main .switch-setting-box,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main .switch-setting-box {
    opacity: 0.76;
}

body.video-lab-page .video-lab-step-workspace.is-input-locked .video-lab-step-card-main textarea.form-input,
body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-step-card-main textarea.form-input {
    resize: none;
}

/* Voice/Audio input-lock — while a voiceover generation is running/queued, block
   editing the text, the chunk-size slider, and the voice-change button (Audio Lab
   tts + Video Lab voice step both use .video-lab-step-workspace--voice). */
body.video-lab-page .video-lab-step-workspace--voice.is-input-locked .video-lab-script-copy,
body.video-lab-page .video-lab-step-workspace--voice.is-input-locked .lab-tts-range-slot .range-input,
body.video-lab-page .video-lab-step-workspace--voice.is-input-locked [data-voice-select] {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

body.video-lab-page .video-lab-step-workspace.is-busy .video-lab-brief-status {
    display: none !important;
}

body.video-lab-page .video-lab-step-workspace.is-busy #videoLabBriefQuestionNotice {
    display: none !important;
}

body.video-lab-page .video-lab-step-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    position: sticky;
    top: var(--images-sidebar-gap);
    align-self: start;
}

body.video-lab-page .video-lab-preview-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (max-width: 1440px) {
    body.video-lab-page .video-lab-step-workspace {
        max-width: none;
    }

    body.video-lab-page.video-lab-project-page {
        --images-sidebar-width: 292px;
    }
}

@media (max-width: 1280px) {
    body.video-lab-page.video-lab-project-page {
        --images-sidebar-width: 272px;
    }
}

body.video-lab-page .video-lab-project-mode-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 22%, var(--color-border));
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.video-lab-page .video-lab-project-mode-pill.is-audio {
    border-color: color-mix(in srgb, var(--color-info) 30%, var(--color-border));
    color: color-mix(in srgb, var(--color-info) 72%, white 28%);
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
}

body.video-lab-page .video-lab-project-mode-pill.is-script {
    border-color: color-mix(in srgb, var(--color-brand-primary) 24%, var(--color-border));
    color: color-mix(in srgb, var(--color-brand-primary) 68%, white 32%);
    background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
}

body.video-lab-page .video-lab-project-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.video-lab-page .video-lab-project-meta-card {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1rem;
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
}

body.video-lab-page .video-lab-project-meta-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

body.video-lab-page .video-lab-step-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

body.video-lab-page .video-lab-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    background: color-mix(in srgb, var(--color-bg-card) 82%, transparent);
    color: var(--color-text-secondary);
}

body.video-lab-page .video-lab-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--color-text-secondary);
    flex-shrink: 0;
}

body.video-lab-page .video-lab-step-chip.is-completed .video-lab-step-dot {
    background: var(--color-success);
}

body.video-lab-page .video-lab-step-chip.is-running .video-lab-step-dot {
    background: var(--color-warning);
}

body.video-lab-page .video-lab-step-chip.is-failed .video-lab-step-dot {
    background: var(--color-error);
}

body.video-lab-page .video-lab-project-stage-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
}

body.video-lab-page .video-lab-project-stage-card p {
    margin: 0.45rem 0 0;
    color: var(--color-text-secondary);
}

.video-lab-voice-selected-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
}

.video-lab-voice-selected-summary {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.video-lab-voice-selected-summary span {
    color: var(--color-text-primary);
    font-weight: 700;
    /* 2px smaller than inherited so longer names fit on the single line. */
    font-size: calc(1em - 2px);
    /* Single line — adapt to available width via ellipsis (full name in title). */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-lab-voice-selected-summary strong {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.video-lab-voice-selected-summary.has-warning strong {
    color: var(--color-warning);
}

.video-lab-voice-selected-summary.has-error strong {
    color: var(--color-error);
}

/* ============================================================ */
/* === VL-1 HOME CARD (Pipeline · Scene-first) ================ */
/* Product port of dev test4 scene variant (dev showcase removed 2026-05-24; design ref = /dev/design). */
/* Tokens-only; both themes via var(--color-*) + color-mix. */
/* ============================================================ */

body.video-lab-page .video-lab-home-card {
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-border);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--color-brand-primary) 12%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, transparent), color-mix(in srgb, var(--color-bg-card) 90%, transparent));
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body.video-lab-page .video-lab-home-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Interactive controls keep their own cursor; the pinned card is not a click-target. */
body.video-lab-page .video-lab-home-card.is-expanded,
body.video-lab-page .video-lab-home-card.is-expanded:hover {
    cursor: default;
    transform: none;
}

/* Status is conveyed by the badge + progress, NOT a colored card frame.
   Card keeps a neutral border + shadow only (per user request). */

/* In-progress status badge pulse (parity with legacy row). */
body.video-lab-page .video-lab-home-card.is-in_progress [data-project-status-badge]::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    animation: badge-pulse 1.2s ease-in-out infinite;
}

/* === Body: media | copy === */
body.video-lab-page .video-lab-home-card-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: stretch;
}

body.video-lab-page .video-lab-home-card-media {
    position: relative;
    overflow: hidden;
    min-height: 148px;
    text-decoration: none;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card-hover) 64%, transparent), color-mix(in srgb, var(--color-bg-card) 94%, transparent)),
        radial-gradient(circle at top left, color-mix(in srgb, var(--color-brand-primary) 12%, transparent), transparent 44%);
}

body.video-lab-page .video-lab-home-card-media.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.video-lab-page .video-lab-home-card-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.video-lab-page .video-lab-home-card-placeholder {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    color: var(--color-text-secondary);
    text-align: center;
}

body.video-lab-page .video-lab-home-card-placeholder svg {
    width: 46px;
    height: 46px;
    color: color-mix(in srgb, var(--color-brand-primary) 72%, white 28%);
    opacity: 0.92;
}

/* ── AudioLab cards: compact square media (audio has no 16:9 preview) ───────── */
body.voice-lab-page .video-lab-home-card-body {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
}

body.voice-lab-page .video-lab-home-card-media {
    width: 96px;
    height: 96px;
    min-height: 0;
    border-radius: var(--radius-md, 8px);
    align-self: center;
}

body.voice-lab-page .video-lab-home-card-placeholder svg {
    width: 34px;
    height: 34px;
}

/* Voice-name chip on a card is click-to-copy the voice ID — show it's actionable. */
body.voice-lab-page .audiolab-voice-id-copy {
    cursor: pointer;
}
body.voice-lab-page .audiolab-voice-id-copy:hover,
body.voice-lab-page .audiolab-voice-id-copy:focus-visible {
    color: var(--color-text-primary);
    border-color: var(--color-border);
    text-decoration: underline;
    outline: none;
}

/* No extra top gap above the audioproject list (VideoLab uses it to centre its
   empty-state; the audiolab list mounts in the same slot and shouldn't inherit it). */
body.voice-lab-page .workspace-content.workspace-content-empty {
    margin-top: 0;
}

body.video-lab-page .video-lab-home-card-thumb-label {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-home-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.92rem 0.92rem 0.5rem 0;
}

body.video-lab-page .video-lab-home-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

body.video-lab-page .video-lab-home-card-headline {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

body.video-lab-page .video-lab-home-card-headline strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: var(--color-text);
    font-size: 1.12rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.video-lab-page .video-lab-home-card-meta-line {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

body.video-lab-page .video-lab-home-card-token {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-family: var(--font-mono, monospace);
}

body.video-lab-page .video-lab-home-card-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    white-space: nowrap;
}

body.video-lab-page .video-lab-home-card-percent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 28px;
    padding: 0 0.7rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 11%, transparent);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 800;
}

/* Status reads as a rectangular block next to the % block (one visual unit). */
body.video-lab-page .video-lab-home-card-status.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 28px;
    padding: 0 0.7rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Status dot — mirrors the design-system badge dot (badge.css): 6px, currentColor
   (inherits the tone colour from .badge-info/.badge-success/etc.). */
body.video-lab-page .video-lab-home-card-status-dot {
    position: relative;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Pulse only while озвучка is running — mirrors @keyframes badge-dot-pulse (1.6s). */
body.video-lab-page .video-lab-home-card.is-running .video-lab-home-card-status-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: voice-lab-home-status-dot-pulse 1.6s ease-out infinite;
}

@keyframes voice-lab-home-status-dot-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* === Progress === */
body.video-lab-page .video-lab-home-card-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-border) 84%, transparent);
}

body.video-lab-page .video-lab-home-card-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-brand-primary), var(--color-info));
    box-shadow: 0 0 14px color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
    transition: width 0.3s ease;
}

/* === Per-step badges === */
body.video-lab-page .video-lab-home-card-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.1rem 0 0.2rem;
}

/* Mode label leads the step chain as a rectangular colored block (matches steps). */
body.video-lab-page .video-lab-home-card-mode-step {
    min-height: 28px;
    border-radius: var(--radius-md, 8px);
    font-size: 0.71rem;
}

body.video-lab-page .video-lab-home-card-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 28px;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 42%, transparent);
}

body.video-lab-page .video-lab-home-card-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border) 88%, white 12%);
    flex-shrink: 0;
}

body.video-lab-page .video-lab-home-card-step strong {
    color: var(--color-text);
    font-size: 0.71rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

body.video-lab-page .video-lab-home-card-step.is-complete .video-lab-home-card-step-dot {
    background: var(--color-success);
}

body.video-lab-page .video-lab-home-card-step.is-active .video-lab-home-card-step-dot {
    background: var(--color-info);
}

body.video-lab-page .video-lab-home-card-step.is-failed .video-lab-home-card-step-dot {
    background: var(--color-error);
}

/* === Foot: meta + actions === */
body.video-lab-page .video-lab-home-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-top: auto;
}

body.video-lab-page .video-lab-home-card-inline-meta {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    min-width: 0;
}

body.video-lab-page .video-lab-home-card-inline-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 28px;
    padding: 0.14rem 0.6rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 42%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.77rem;
    font-weight: 600;
}

body.video-lab-page .video-lab-home-card-inline-meta span span {
    border: none;
    background: transparent;
    padding: 0;
    min-height: 0;
}

body.video-lab-page .video-lab-home-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex-shrink: 0;
}

body.video-lab-page .video-lab-home-card-main-action {
    min-height: 34px;
    padding: 0.42rem 0.9rem;
}

/* === Icon row (trash / expand) === */
body.video-lab-page .video-lab-home-card-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 36%, transparent);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body.video-lab-page .video-lab-home-card-icon-btn svg {
    width: 15px;
    height: 15px;
}

body.video-lab-page .video-lab-home-card-icon-btn:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-brand-primary) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

body.video-lab-page .video-lab-home-card-icon-btn--trash:hover {
    color: color-mix(in srgb, var(--color-error) 86%, white 14%);
    border-color: color-mix(in srgb, var(--color-error) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

/* === Expand (CSS-only checkbox-hack) === */
body.video-lab-page .video-lab-home-card-expand-toggle svg {
    transition: transform 0.18s ease;
}

body.video-lab-page .video-lab-home-card.is-expanded .video-lab-home-card-expand-toggle svg {
    transform: rotate(180deg);
}

/* Backdrop dims the page behind a pinned card. */
body.video-lab-page .video-lab-home-card-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--color-bg-page) 72%, transparent);
    backdrop-filter: blur(2px);
}

/* Pinned (expanded) card — JS sets fixed top/left/width/height to the content
   column, aligned with rail/sidebar. Header stays; detail fills + scrolls. */
body.video-lab-page .video-lab-home-card.is-expanded {
    position: fixed;
    z-index: 61;
    display: flex;
    flex-direction: column;
    margin: 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

body.video-lab-page .video-lab-home-card.is-expanded .video-lab-home-card-body {
    flex-shrink: 0;
}

/* === Detail (scene gallery) — only visible while pinned === */
body.video-lab-page .video-lab-home-card-detail {
    display: none;
}

body.video-lab-page .video-lab-home-card.is-expanded .video-lab-home-card-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    background: color-mix(in srgb, var(--color-bg-page) 56%, transparent);
}

body.video-lab-page .video-lab-home-card-detail-head {
    flex-shrink: 0;
    padding: 0.7rem 0.92rem 0.4rem;
}

body.video-lab-page .video-lab-home-card-detail-head span {
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.video-lab-page .video-lab-home-card-detail-scenes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 0 0.92rem 0.92rem;
}

/* Scene strip: thumbnail | copy (mirrors the visuals unit strips). */
body.video-lab-page .video-lab-home-scene {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    min-height: 96px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
    overflow: hidden;
}

body.video-lab-page .video-lab-home-scene-thumb {
    position: relative;
    min-height: 96px;
    background: color-mix(in srgb, var(--color-bg-card-hover) 50%, transparent);
}

body.video-lab-page .video-lab-home-scene-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.video-lab-page .video-lab-home-scene-thumb.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.video-lab-page .video-lab-home-scene-copy {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.75rem 0.7rem 0;
    min-width: 0;
}

body.video-lab-page .video-lab-home-scene-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

body.video-lab-page .video-lab-home-scene-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 26px;
    padding: 0 0.5rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    background: color-mix(in srgb, var(--color-bg-card) 84%, transparent);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 800;
}

body.video-lab-page .video-lab-home-scene-duration {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 0.5rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

body.video-lab-page .video-lab-home-scene-script {
    margin: 0;
    color: var(--color-text);
    font-size: 0.84rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.video-lab-page .video-lab-home-card-detail-empty {
    margin: 0;
    padding: 0.85rem;
    border-radius: var(--radius-md, 8px);
    border: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
    background: color-mix(in srgb, var(--color-bg-card-hover) 28%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    text-align: center;
}

/* ============================================================
   light: flatten dark-theme glows (B&W intent)
   Light theme is intentionally B&W. Glows (radial bg-glow, blur
   box-shadow, drop-shadow) are a DARK-theme device — in light they
   would render as grey/coloured smudges (brand-primary=#1a1a1a;
   lore/graph accents = saturated dark-theme tones with no light
   override). So here we FLATTEN decorative glow, keeping the
   structural surface layers. Structural hairlines (box-shadow:
   0 0 0 1px brand) are NOT touched — in B&W they read as a crisp
   black border, which is the intent.
   ============================================================ */

/* Page background: drop the purple radial glow layers + dark texture,
   let the flat light page colour show through. */
[data-theme="light"] body.video-lab-page,
[data-theme="light"] body.video-lab-page .app-layout {
    background-image: none;
    /* transparent (не flat white): показывает текстуру bg.jpeg с
       .video-lab-workbench-shell под ним (иначе правая часть = плоский белый). */
    background-color: transparent;
}

/* Pure-decor glow pseudo-elements: the element exists only to paint a
   glow / accent texture — remove it entirely (base surface + icon stay). */
[data-theme="light"] body.video-lab-page .video-lab-lore-card-thumb.is-empty::before,
[data-theme="light"] body.video-lab-page .video-lab-lore-graph-node-avatar.is-placeholder::before,
[data-theme="light"] body.video-lab-page .video-lab-voice-empty-state::after,
[data-theme="light"] body.video-lab-page .video-lab-visuals-empty-state::after,
[data-theme="light"] body.video-lab-page .video-lab-visuals-unit-media--clip.is-missing_source::after {
    background: none;
}

/* Multi-layer surfaces: keep the structural linear-gradient layer,
   drop the brand radial glow layer. */
[data-theme="light"] body.video-lab-page .video-lab-visuals-compact-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-input) 72%, transparent), color-mix(in srgb, var(--color-bg-card) 82%, transparent));
}
[data-theme="light"] body.video-lab-page .video-lab-home-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, transparent), color-mix(in srgb, var(--color-bg-card) 90%, transparent));
}
[data-theme="light"] body.video-lab-page .video-lab-home-card-media {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card-hover) 64%, transparent), color-mix(in srgb, var(--color-bg-card) 94%, transparent));
}

/* Blur box-shadow glows on progress fills → flat (no halo). */
[data-theme="light"] body.video-lab-page .video-lab-lore-card-progress-fill,
[data-theme="light"] body.video-lab-page .video-lab-home-card-progress-track span {
    box-shadow: none;
}

/* Selected graph-node avatar: keep the structural elevation shadow,
   drop the two brand glow halo layers. */
[data-theme="light"] body.video-lab-page .video-lab-lore-graph-node--selected .video-lab-lore-graph-node-avatar {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-bg-inverse) 34%, transparent);
}

/* Placeholder icons: drop the coloured drop-shadow glow. */
[data-theme="light"] body.video-lab-page .video-lab-lore-card-thumb-placeholder-icon,
[data-theme="light"] body.video-lab-page .video-lab-lore-graph-node-placeholder-icon {
    filter: none;
}

/* CapCut tier-lock badge anchor (pravki_9 fix):
   1. inline-flex + vertical-align:middle so the badge sits to the RIGHT of
      <strong>CapCut</strong> on the same line, with a small left gap (owner 2026-06-22).
   2. slightly taller pill than badge-sm default (owner: «по высоте чуть-чуть больше»).
   3. reset.css a:hover { color: var(--color-info-hover) } (specificity 0,1,1) would
      override .badge-warning (0,1,0) on hover, turning the pill blue - override here.
   Scope-guard to [data-capcut-card] to avoid leaking. */
body.video-lab-page [data-capcut-card] a.badge-warning {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    text-decoration: none;
    color: var(--color-warning);
    margin-left: 0.6rem;
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
    /* owner 2026-06-22: nudge up so it isn't pinned to the bottom of the title line. */
    position: relative;
    top: -2px;
}

body.video-lab-page [data-capcut-card] a.badge-warning:hover,
body.video-lab-page [data-capcut-card] a.badge-warning:focus-visible {
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    transform: translateY(-1px);
}