/* Shared videoflw identity in the studio and standalone production flow. */
body.videoflw-page, body.vfw-wizard-page { background:#060817; isolation:isolate; font-family:var(--flw-font); }
body.videoflw-page::before, body.vfw-wizard-page::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:#060817 url('../img/videoflw-background.png') center top / cover no-repeat; }
body.vfw-wizard-page .v2-production { background:transparent; }
body.vfw-wizard-page .clay-page { font-family:inherit; }
.videoflw-page .studio-sidebar__brand { padding:0; }
.videoflw-page .studio-sidebar__brand img { width:210px; max-width:100%; height:auto; }
.vf-logo { display:block; width:100%; height:auto; object-fit:contain; }
.vf-home-heading .vf-logo-heading { width:300px; max-width:100%; margin:0; line-height:1; }
.vfw-wizard__logo img,.v2-chat__logo img,.v2-production__header img { height:auto; object-fit:contain; }
@media(max-width:600px) { .vf-home-heading .vf-logo-heading { width:200px; } }
/* Shell type and sizes after FLW Labs CI; colours stay videoflw violet and blue. */
.videoflw-page .studio-sidebar__link, .videoflw-page .studio-credit-pill, .videoflw-page .studio-global-search input { border-radius:var(--flw-radius-button); }
.videoflw-page .studio-global-search input { font-size:14px; }
.videoflw-page .studio-credit-pill small { font-size:11px; font-weight:600; }
.videoflw-page .studio-profile__text strong { font-size:14px; font-weight:600; }
.videoflw-page .studio-profile__text small, .videoflw-page .studio-profile__menu > small { font-size:12px; }
.videoflw-page .studio-profile__menu button { font-size:14px; }
/* Mediathek and Marken in the videoflw shell: FLW Labs type and sizes as in imageflw.css, videoflw colours.
   Scoped to .videoflw-page.shared-tool-page, so the other tools keep their own sizes. */
.videoflw-page.shared-tool-page .media-card__save span { font-size:11px; }
.videoflw-page.shared-tool-page .ais-note { border-radius:var(--flw-radius-button); font-size:14px; }
/* Light theme (generated by resources/tools/light-theme.js): start */
html[data-theme="light"] body.videoflw-page, html[data-theme="light"] body.vfw-wizard-page { background: #f7f8fd; }
html[data-theme="light"] body.videoflw-page::before, html[data-theme="light"] body.vfw-wizard-page::before { background: #f7f8fd url('../img/videoflw-background.png') center top / cover no-repeat; }
html[data-theme="light"] body.vfw-wizard-page .v2-production { background: transparent; }
/* Light theme (generated): end */
/* Light theme (hand-tuned): after the generated block, so it wins. The production flow has no shell and sets its own
   ground; the videoflw logos are drawn for a dark ground and turn their lightness around (hues stay) until light versions exist. */
html[data-theme="light"] body.vfw-wizard-page { background: var(--flw-c-bg); color-scheme: light; }
html[data-theme="light"] body.vfw-wizard-page::before { background: var(--flw-c-bg); }
html[data-theme="light"] :is(.vf-logo, .vfw-wizard__logo img, .v2-chat__logo img, .v2-production__header img):not(.flw-logo--on-light) { filter: invert(1) hue-rotate(180deg); }