#creation-app { --creation-ink:#19304e; --creation-muted:#61728a; --creation-blue:#1677ff; }
/* Runway composition: one tall editor and one showcase, not stacked preview forms. */
html body #creation-app.studio-workspace .studio-layout { grid-template-columns:minmax(320px,28%) minmax(0,1fr); }
html body #creation-app.studio-workspace .studio-composer-controls .studio-control-scroll { display:flex; flex-direction:column; padding:12px; overflow:auto; }
html body #creation-app.studio-workspace .studio-composer-controls .studio-control-scroll > :is(h2,.detail-label) { display:none; }
html body #creation-app.studio-workspace .studio-composer { display:flex; flex-direction:column; flex:1; min-height:260px; border:1px solid #dce3ed; border-radius:16px; padding:12px; background:#fff; }
html body #creation-app.studio-workspace .studio-composer .studio-reference-input { flex:none; margin:0 0 14px; }
html body #creation-app.studio-workspace .studio-composer .studio-reference-input > :is(h3,.detail-label) { display:none; }
html body #creation-app.studio-workspace .studio-composer :is(.upload-box,.detail-dropzone) { width:124px; min-height:88px; height:88px; padding:10px; margin:0; border:1px solid #dce3ed; border-radius:12px; display:flex; flex-direction:column; justify-content:center; gap:6px; box-sizing:border-box; }
html body #creation-app.studio-workspace .studio-composer :is(.upload-box,.detail-dropzone) :is(span,strong) { font-size:12px; line-height:1.4; text-align:center; }
html body #creation-app.studio-workspace .studio-composer .detail-dropzone small { display:none; }
html body #creation-app.studio-workspace .studio-composer :is(.upload-box,.detail-dropzone) img { width:22px; height:22px; }
html body #creation-app.studio-workspace .studio-composer .detail-textarea-wrap { flex:1; display:flex; flex-direction:column; min-height:120px; margin:0; }
html body #creation-app.studio-workspace .studio-composer textarea { flex:1; width:100%; min-height:120px; max-height:none; border:0 !important; border-radius:0; padding:8px 0; resize:none; box-shadow:none; background:transparent !important; font-size:15px; line-height:1.7; }
html body #creation-app.studio-workspace .studio-composer :is(.prompt-counter,.detail-textarea-wrap > small) { position:static; align-self:flex-end; margin:6px 0 0; padding:0; color:#7b8799; }
html body #creation-app.studio-workspace .studio-prompt-suggestions { margin-bottom:8px; color:#405671; font-size:12px; }
html body #creation-app.studio-workspace .studio-prompt-suggestions > summary { min-height:36px; padding:0 2px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:inherit; font-weight:650; cursor:pointer; list-style:none; }
html body #creation-app.studio-workspace .studio-prompt-suggestions > summary::-webkit-details-marker { display:none; }
html body #creation-app.studio-workspace .studio-prompt-suggestions :is(h2,.upload-title,.recommend-title,.works-note) { display:none; }
html body #creation-app.studio-workspace .studio-control-footer > .detail-advanced { margin:0 0 10px; font-size:12px; }
html body #creation-app.studio-workspace .studio-gallery-heading { justify-content:center; position:relative; margin:0 0 24px; }
html body #creation-app.studio-workspace .studio-gallery-heading h2 { font-size:clamp(22px,2.4vw,36px); font-weight:650; }
html body #creation-app.studio-workspace .studio-gallery-counter { position:absolute; right:0; font-size:12px; }
html body #creation-app.studio-workspace .studio-gallery-thumbnails { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; overflow:visible; margin-top:16px; }
html body #creation-app.studio-workspace .studio-gallery-thumbnail { display:flex; align-items:center; gap:10px; width:100%; height:78px; text-align:left; padding:10px; background:#f7f9fc; border:1px solid #e2e7ee; border-radius:12px; }
html body #creation-app.studio-workspace .studio-gallery-thumbnail[aria-pressed="true"] { border-color:var(--creation-blue); background:#edf5ff; }
html body #creation-app.studio-workspace .studio-gallery-thumbnail img { flex:none; width:48px; height:48px; border-radius:9px; }
html body #creation-app.studio-workspace .studio-reference-card-copy { min-width:0; display:grid; gap:5px; }
html body #creation-app.studio-workspace .studio-reference-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
html body #creation-app.studio-workspace .studio-reference-card-copy small { font-size:11px; color:#738196; }
html body #creation-app.studio-workspace .detail-preview-card:has(.studio-gallery) > :is(h2,.studio-preview-empty) { display:none; }
html body #creation-app.studio-workspace .detail-preview-card > .detail-media.is-empty { display:none; }
html body #creation-app.studio-workspace .studio-gallery { margin:0 !important; padding:0 !important; border:0 !important; }
@media(min-width:801px) {
 html body #creation-app.studio-workspace .creation-workspace { height:100dvh; overflow:hidden; }
 html body #creation-app.studio-workspace .creation-main { overflow:hidden; }
}
@media(max-width:800px) {
 html body #creation-app.studio-workspace .studio-layout { grid-template-columns:minmax(0,1fr); }
 html body #creation-app.studio-workspace .studio-gallery-thumbnails { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
#creation-app .studio-result-images { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin:20px 0; }
#creation-app .studio-result-image { width:100%; max-height:65vh; object-fit:contain; border-radius:14px; background:#f5f8fc; }
#creation-app .studio-inline-result > .creation-outline { display:inline-flex; margin:0 8px 12px 0; }
#creation-app .studio-result-status { color:var(--creation-ink); line-height:1.6; }
html body #creation-app .studio-has-result > :is(.studio-gallery,.studio-preview-empty) { display:none; }
#creation-app .studio-gallery-thumbnails { display:flex; gap:8px; overflow:auto; padding:12px 0; }
#creation-app .studio-gallery-thumbnail { flex:0 0 76px; height:52px; padding:2px; background:white; border:2px solid transparent; border-radius:8px; cursor:pointer; }
#creation-app .studio-gallery-thumbnail[aria-pressed="true"] { border-color:var(--creation-blue); }
#creation-app .studio-gallery-thumbnail img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
/* Tool workspace: edge-to-edge controls and a separate result canvas. */
html body #creation-app.studio-workspace .creation-main { max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; }
html body #creation-app.studio-workspace .creation-main > :is(.creation-heading,.creation-breadcrumb,.creation-history-shortcut,.detail-rights-note) { display:none !important; }
html body #creation-app.studio-workspace .studio-layout { grid-template-columns: minmax(300px, 360px) minmax(0,1fr); gap:0; margin:0; }
html body #creation-app.studio-workspace .studio-controls { position:relative; top:0; margin:0; height:var(--studio-control-height,calc(100dvh - 64px)); max-height:none; border:0 !important; border-right:1px solid #e3e7ed !important; border-radius:0; }
html body #creation-app.studio-workspace .studio-mode-nav { margin:0; padding:10px 8px; width:100%; flex:none; border:0; border-bottom:1px solid #e3e7ed; border-radius:0; background:#fff; box-sizing:border-box; }
html body #creation-app.studio-workspace .studio-mode-link { padding:0 10px; font-size:12px; }
html body #creation-app.studio-workspace .studio-mode-link.active { background:#edf5ff; box-shadow:none; }
html body #creation-app.studio-workspace .studio-control-scroll { padding:16px; }
html body #creation-app.studio-workspace .studio-control-scroll > h2 { display:none; }
html body #creation-app.studio-workspace .studio-control-footer { padding:12px 16px; box-shadow:none; }
html body #creation-app.studio-workspace .studio-parameters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
html body #creation-app.studio-workspace .studio-parameter { flex:1; min-width:75px; font-size:11px; }
html body #creation-app.studio-workspace .studio-parameter select { display:block !important; width:100%; min-height:34px; margin-top:5px; padding:6px; font-size:12px; }
html body #creation-app.studio-workspace [hidden] { display:none !important; }
html body #creation-app.studio-workspace .studio-image-settings { width:100%; padding:0; }
html body #creation-app.studio-workspace .studio-image-settings > h2 { display:none; }
html body #creation-app.studio-workspace .studio-image-settings .quota-box { display:none; }
html body #creation-app.studio-workspace .studio-image-settings .setting-group { margin:0 0 8px; }
html body #creation-app.studio-workspace .studio-image-settings .setting-options { gap:5px; }
html body #creation-app.studio-workspace .studio-image-settings .setting-option { padding:6px 9px; min-height:32px; font-size:12px; }
html body #creation-app.studio-workspace .studio-control-footer { display:flex; flex-direction:column; max-height:55%; overflow:hidden; }
html body #creation-app.studio-workspace .studio-control-footer > * { flex-shrink:0; }
html body #creation-app.studio-workspace .studio-control-footer > .studio-parameters { flex:0 1 auto; min-height:0; overflow:auto; }
html body #creation-app.studio-workspace .studio-reference-input { margin:0 0 20px; }
html body #creation-app.studio-workspace .edit-source-stage.is-empty { min-height:110px; height:110px; aspect-ratio:auto; }
html body #creation-app.studio-workspace .edit-empty-state { padding:12px; gap:8px; }
html body #creation-app.studio-workspace .edit-result-stage:not(.is-empty) ~ .studio-gallery { display:none; }
html body #creation-app.studio-workspace .studio-reference-input > :is(h3,.detail-label) { margin:0 0 10px; }
html body #creation-app.studio-workspace .image-form > h2 { font-size:14px; margin:0 0 10px; }
html body #creation-app.studio-workspace .image-form .works-note { display:none; }
html body #creation-app.studio-workspace .studio-image-layout .detail-preview-card > h2 { display:none; }
html body #creation-app.studio-workspace .studio-image-layout .studio-gallery { order:-1; margin:0; padding:0; border:0; }
html body #creation-app.studio-workspace .detail-preview-card:has(.detail-media:not(.is-empty)) .studio-gallery { display:none; }
html body #creation-app.studio-workspace .studio-layout .detail-preview-card { border:0 !important; border-radius:0; padding:28px; height:var(--studio-control-height,calc(100dvh - 64px)); overflow:auto; box-sizing:border-box; }
html body #creation-app.studio-workspace .studio-gallery-media { height:clamp(280px,48vh,640px); }
html body #creation-app.studio-workspace .studio-preview-empty { padding:12px 0; background:transparent; border:0; }
html body #creation-app.studio-workspace .studio-layout .detail-preview-card > :is(.detail-media,.edit-result-stage) { flex-shrink:0; }
html body #creation-app.studio-workspace .studio-layout .detail-preview-card:has(.detail-media.is-empty) .studio-gallery { order:-1; margin:0 0 20px; border:0; padding:0; }
html body #creation-app.studio-workspace .detail-media.is-empty { min-height:140px; max-height:180px; aspect-ratio:auto; }
html body #creation-app.studio-workspace .studio-control-scroll :is(.image-form,.prompt-panel) { margin:0; padding:0; }
@media(max-width:800px) {
 html body #creation-app.studio-workspace .studio-layout { grid-template-columns:1fr; }
 html body #creation-app.studio-workspace .studio-controls { height:calc(100dvh - 64px); min-height:480px; }
 html body #creation-app.studio-workspace .studio-layout .detail-preview-card { height:auto; min-height:400px; padding:16px; }
}
#creation-app .creation-workspace { --fuuvo-dark-bg:#fff; --fuuvo-dark-topbar:#fff; --fuuvo-dark-surface:#fff; --fuuvo-dark-surface-raised:#f5f8fc; --fuuvo-dark-surface-soft:#f3f7fc; --fuuvo-dark-input:#fff; --fuuvo-dark-line:#e3eaf3; --fuuvo-dark-line-strong:#d7e1f0; --fuuvo-dark-text:#19304e; --fuuvo-dark-text-soft:#233950; --fuuvo-dark-muted:#61728a; --fuuvo-dark-blue:#1677ff; --fuuvo-dark-blue-soft:#edf5ff; --fuuvo-dark-blue-line:#81b0ed; color-scheme:light; }
html body #creation-app .creation-workspace { overflow-x:hidden; }
html body #creation-app .creation-main :is(p,small,span,strong,h1,h2,h3,label,a) { -webkit-text-fill-color:currentColor !important; }
html body #creation-app .creation-main .creation-heading h1 { font-size:32px !important; }
html body #creation-app .creation-main { background:#fff !important; color:#19304e !important; }
html body #creation-app .studio-mode-nav { display:flex; width:max-content; max-width:100%; gap:4px; margin:18px 0 2px; padding:4px; border:1px solid #dfe7f1; border-radius:12px; background:#f5f8fc; overflow:auto; }
html body #creation-app .studio-mode-link { min-height:32px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:#61728a; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
html body #creation-app .studio-mode-link:hover { color:#1266da; background:#edf5ff; }
html body #creation-app .studio-mode-link.active { color:#1266da; background:#fff; box-shadow:0 1px 4px rgba(25,48,78,.1); }
#creation-app[data-creation-page="home"] .creation-heading { padding:28px; border-radius:24px; background:radial-gradient(ellipse at 20% 20%,#e6f4ff,transparent 65%),linear-gradient(110deg,#fff,#f4f0ff); }
#creation-app .studio-primary-entries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:24px 0 36px; }
#creation-app .studio-primary-entry { min-width:0; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:22px; padding:20px; border:1px solid #e0e8f3; border-radius:22px; background:#f8fbff; color:#19304e; overflow:hidden; transition:transform .25s,box-shadow .25s; }
#creation-app .studio-primary-entry .creation-app-entry-art { width:100% !important; height:180px !important; object-fit:cover !important; border-radius:14px; }
#creation-app :is(.creation-app-entry-art) { transition:transform .3s ease; }
#creation-app .studio-entry-arrow { position:absolute; right:20px; bottom:16px; color:#1677ff; font-size:26px; }
#creation-app[data-creation-page="home"] .creation-app-list { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:22px !important; }
html body #creation-app .creation-app-list .creation-app-entry { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; padding:0 !important; border:1px solid #e0e8f3 !important; border-radius:18px !important; background:#fff !important; overflow:hidden; min-width:0; transition:transform .25s,box-shadow .25s; }
html body #creation-app .creation-app-list .creation-app-entry-art { display:block; width:100% !important; height:auto !important; aspect-ratio:16/10; object-fit:cover !important; padding:0 !important; margin:0 !important; border-radius:0 !important; }
#creation-app .creation-app-entry-copy { display:flex; flex-direction:column; gap:8px; padding:18px; min-width:0; }
html body #creation-app :is(.creation-app-entry-copy strong,.creation-heading h1,.creation-section-title) { color:#19304e !important; -webkit-text-fill-color:currentColor !important; }
html body #creation-app :is(.creation-app-entry-copy small,.creation-heading p) { color:#61728a !important; -webkit-text-fill-color:currentColor !important; }
@media(hover:hover) { #creation-app :is(.creation-app-entry,.studio-primary-entry):hover { transform:translateY(-4px); box-shadow:0 14px 32px #285b9317; } #creation-app :is(.creation-app-entry,.studio-primary-entry):hover .creation-app-entry-art { transform:scale(1.035); } }
html body #creation-app .studio-layout { display:grid; grid-template-columns:minmax(360px,min(34vw,540px)) minmax(0,1fr); align-items:start; gap:24px; margin-top:20px; }
html body #creation-app .studio-controls { display:flex !important; flex-direction:column; gap:0; width:100%; height:var(--studio-control-height,calc(100dvh - 240px)); min-height:360px; max-height:900px; padding:0 !important; overflow:hidden; position:sticky; top:12px; align-self:start; }
html body #creation-app .studio-layout .creation-detail-card { background:#fff !important; color:#19304e !important; border:1px solid #dfe7f1 !important; border-radius:18px; box-shadow:none !important; }
#creation-app .studio-control-scroll { flex:1; min-height:0; overflow:auto; padding:20px; scrollbar-width:thin; overscroll-behavior:contain; }
#creation-app .studio-control-footer { flex:none; padding:14px 20px; border-top:1px solid #e3eaf3; background:#fff; box-shadow:0 -6px 20px #19304e06; }
@media (max-width: 720px) {
  #creation-app .studio-control-footer { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}
#creation-app .studio-control-footer .detail-submit { margin-top:0; }
#creation-app .studio-control-footer .detail-form-status:empty { display:none; }
#creation-app .studio-image-layout .image-form { padding:0; border:0; background:transparent; }
#creation-app .studio-image-layout .settings-panel { width:auto; border-radius:0; }
#creation-app .studio-image-settings { padding:12px 0 0; }
#creation-app .studio-control-scroll :is(textarea,.detail-select,input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"])) { border-radius:10px; }
#creation-app .studio-control-scroll textarea { min-height:100px; max-height:240px; }
#creation-app .studio-control-scroll :is(.detail-dropzone,.upload-box) { min-height:96px; padding:16px; border-radius:12px; }
#creation-app .studio-control-scroll .detail-label { margin-top:14px; }
#creation-app .studio-layout .detail-preview-card { min-height:420px; height:auto; padding:22px; }
#creation-app .studio-preview-empty { padding:30px 20px; background:#f6f9fd; color:#61728a; border:1px dashed #d4e1f0; border-radius:14px; line-height:1.7; }
#creation-app .studio-gallery { margin-top:24px; border-top:1px solid #e3eaf3; padding-top:22px; }
#creation-app .studio-gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
#creation-app .studio-gallery-heading h2 { margin:0; font-size:17px; }
#creation-app .studio-gallery-counter { color:#718099; font-size:13px; }
#creation-app .studio-gallery-stage { overflow:hidden; border-radius:14px; background:#f3f6fb; outline-offset:4px; }
#creation-app .studio-gallery-stage:focus-visible { outline:2px solid #1677ff; }
#creation-app .studio-gallery-media { height:clamp(220px,30vh,360px); }
#creation-app .studio-reference-asset { display:block; width:100%; height:100%; object-fit:contain; }
#creation-app .studio-gallery-caption { color:#61728a; font-size:13px; margin:12px 0; }
#creation-app .studio-gallery-action-status { display:block; min-width:0; min-height:18px; margin-left:auto; color:var(--creation-blue,#2865b5); font-size:12px; font-weight:600; }
#creation-app .studio-reference-card-action { color:var(--creation-blue,#2865b5) !important; font-weight:600; }
html body #creation-app .studio-layout :is(.studio-preview-empty,.studio-gallery-caption,.detail-preview-note,.detail-dropzone small,.upload-box span) { color:#61728a !important; -webkit-text-fill-color:#61728a !important; }
html body #creation-app .studio-layout :is(.detail-dropzone,.upload-box) { background:#f6f9fd !important; border-color:#cad9eb !important; }
html body #creation-app .studio-layout :is(.detail-dropzone,.upload-box) :is(img,svg) { filter:none !important; opacity:1 !important; }
#creation-app .studio-gallery-nav { display:flex; justify-content:flex-end; gap:8px; }
#creation-app .studio-gallery-direction { width:38px; height:38px; border:1px solid #d6e2f1; border-radius:10px; color:#2865b5; background:#fff; cursor:pointer; font-size:20px; }
#creation-app .studio-gallery-direction:hover { background:#edf5ff; }
html body #creation-app .studio-layout :is(h2,h3,label,.detail-label,.setting-label) { color:#19304e !important; -webkit-text-fill-color:currentColor !important; }
html body #creation-app .studio-layout :is(textarea,select,input:not([type="checkbox"]):not([type="radio"])) { background:#fff !important; color:#19304e !important; -webkit-text-fill-color:currentColor !important; border-color:#d6e2f1 !important; }
html body #creation-app .studio-layout :is(.detail-option,.setting-option,.detail-advanced) { background:#fff !important; color:#19304e !important; -webkit-text-fill-color:currentColor !important; border-color:#d6e2f1 !important; }
html body #creation-app .studio-layout :is(.detail-option.active,.setting-option.active) { color:#1266da !important; background:#edf5ff !important; border-color:#69a5f4 !important; }
@media(max-width:1100px) { #creation-app[data-creation-page="home"] .creation-app-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #creation-app .studio-primary-entry { grid-template-columns:1fr; gap:0; } }
@media(max-width:800px) { html body #creation-app .studio-layout { grid-template-columns:minmax(0,1fr); } html body #creation-app .studio-controls { position:relative; top:auto; height:min(720px,80dvh); min-height:380px; } html body #creation-app .studio-mode-nav { width:100%; margin-top:14px; } html body #creation-app .studio-mode-link { flex:1 0 auto; padding-inline:10px; } #creation-app .studio-primary-entries { gap:12px; } #creation-app .studio-primary-entry { padding:10px; } #creation-app .studio-primary-entry .creation-app-entry-art { height:120px !important; } #creation-app .creation-app-entry-copy { padding:14px; } #creation-app .studio-gallery-media { height:230px; } #creation-app .studio-gallery-direction { width:36px; height:36px; } }
@media(max-width:480px) { #creation-app .studio-primary-entries { grid-template-columns:1fr; } #creation-app .studio-primary-entry { grid-template-columns:110px 1fr; } #creation-app[data-creation-page="home"] .creation-app-list { gap:12px !important; } #creation-app .creation-app-entry-copy strong { font-size:15px; } #creation-app .creation-app-entry-copy small { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { #creation-app :is(.creation-app-entry,.studio-primary-entry) { transition:none; transform:none !important; } }
html body #creation-app.studio-workspace .studio-layout { grid-template-columns:minmax(320px,28%) minmax(0,1fr); }
html body #creation-app.studio-workspace .studio-gallery-media { height:auto; aspect-ratio:16/7.2; min-height:260px; }
html body #creation-app.studio-workspace .studio-reference-asset { object-fit:cover; }
html body #creation-app.studio-workspace .studio-mode-link { padding:0 6px; font-size:11px; }
html body #creation-app.studio-workspace .studio-mode-nav { scrollbar-width:none; }
html body #creation-app.studio-workspace .studio-composer textarea { font-size:15px !important; }
html body #creation-app.studio-workspace .studio-gallery-caption { display:none; }
html body #creation-app.studio-workspace .studio-gallery-media { height:clamp(220px,40vh,540px); min-height:0; aspect-ratio:auto; }
html body #creation-app.studio-workspace .studio-layout .detail-preview-card { padding:20px 28px; }
html body #creation-app.studio-workspace .studio-gallery-heading { margin-bottom:18px; }
html body #creation-app.studio-workspace .studio-gallery-thumbnail { height:70px; }
html body #creation-app.studio-workspace .studio-gallery-media { position:relative; }
html body #creation-app.studio-workspace .studio-gallery-media > .studio-reference-asset { position:absolute; inset:0; }
@media(max-width:800px) { html body #creation-app.studio-workspace .studio-layout { grid-template-columns:minmax(0,1fr); } html body #creation-app.studio-workspace .studio-gallery-media { min-height:190px; } }

/* Creation centre is a light creative workspace even when the global shell
   preference is dark. This prevents a dark frame around a light editor. */
html body:has(> #creation-app),
html:has(> body > #creation-app) {
    background:#f4f7fb !important;
    color:#19304e !important;
}
html body #creation-app,
html body #creation-app > .creation-workspace,
html body #creation-app .creation-workspace,
html body #creation-app .creation-main {
    background:#f4f7fb !important;
    color:#19304e !important;
}
html body #creation-app header[data-fuuvo-shared-topbar="1"],
html body #creation-app .creation-topbar {
    background:#ffffff !important;
    border-bottom:1px solid #dfe7f1 !important;
    color:#19304e !important;
    box-shadow:0 1px 0 rgba(25,48,78,.02) !important;
}
html body #creation-app header[data-fuuvo-shared-topbar="1"] :is(
    .shell-topbar-back, .shell-topbar-middle, .shell-topbar-suffix,
    .workspace-header-link, .portal-top-safety-link, .creation-top-safety,
    .ui-language-switch-btn, .creation-sidebar-toggle, .portal-sidebar-toggle,
    .desktop-history-toggle
) {
    color:#60738d !important;
    -webkit-text-fill-color:currentColor !important;
}
html body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) {
    background:#f5f8fc !important;
    border-color:#dfe7f1 !important;
}
html body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) a {
    background:transparent !important;
    color:#60738d !important;
    -webkit-text-fill-color:currentColor !important;
}
html body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) a.active {
    background:#eaf3ff !important;
    border-color:#9bc5fb !important;
    color:#1266da !important;
    -webkit-text-fill-color:currentColor !important;
}
html body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-login,.workspace-header-login,.portal-login) {
    background:#19304e !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}
html body #creation-app .studio-mode-nav {
    background:#ffffff !important;
    border-color:#dfe7f1 !important;
}
html body #creation-app .studio-controls,
html body #creation-app .studio-control-footer,
html body #creation-app .studio-layout .detail-preview-card {
    background:#ffffff !important;
    border-color:#dfe7f1 !important;
}
html body #creation-app .studio-composer {
    background:#ffffff !important;
    border-color:#d6e2f1 !important;
}
html body #creation-app.studio-workspace .studio-image-settings {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
html body #creation-app.studio-workspace .studio-image-settings .setting-group {
    min-width:0;
    margin:0 !important;
}
html body #creation-app.studio-workspace .studio-image-settings .setting-label {
    display:block;
    overflow:hidden;
    margin-bottom:4px;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
html body #creation-app.studio-workspace .studio-image-settings .setting-options {
    display:flex;
    gap:4px;
    overflow:auto;
}
html body #creation-app.studio-workspace .studio-image-settings .setting-option {
    flex:1 0 auto;
    min-width:36px;
    padding:6px 7px;
    font-size:11px;
}

/* In dark mode the same workspace keeps its hierarchy, but uses the global
   dark palette throughout instead of leaving white panels inside a dark shell. */
html[data-ui-theme="dark"] body,
body[data-ui-theme="dark"] {
    background:#0f141d !important;
}
html[data-ui-theme="dark"] body #creation-app,
body[data-ui-theme="dark"] #creation-app,
html[data-ui-theme="dark"] body #creation-app > .creation-workspace,
body[data-ui-theme="dark"] #creation-app > .creation-workspace,
html[data-ui-theme="dark"] body #creation-app .creation-workspace,
body[data-ui-theme="dark"] #creation-app .creation-workspace,
html[data-ui-theme="dark"] body #creation-app .creation-main,
body[data-ui-theme="dark"] #creation-app .creation-main {
    background:#0f141d !important;
    color:#eef2f7 !important;
}
html[data-ui-theme="dark"] body #creation-app header[data-fuuvo-shared-topbar="1"],
body[data-ui-theme="dark"] #creation-app header[data-fuuvo-shared-topbar="1"],
html[data-ui-theme="dark"] body #creation-app .creation-topbar,
body[data-ui-theme="dark"] #creation-app .creation-topbar {
    background:#0f141d !important;
    border-bottom-color:rgba(226,232,240,.11) !important;
    color:#eef2f7 !important;
    box-shadow:none !important;
}
html[data-ui-theme="dark"] body #creation-app header[data-fuuvo-shared-topbar="1"] :is(
    .shell-topbar-back, .shell-topbar-middle, .shell-topbar-suffix,
    .workspace-header-link, .portal-top-safety-link, .creation-top-safety,
    .ui-language-switch-btn, .creation-sidebar-toggle, .portal-sidebar-toggle,
    .desktop-history-toggle
),
body[data-ui-theme="dark"] #creation-app header[data-fuuvo-shared-topbar="1"] :is(
    .shell-topbar-back, .shell-topbar-middle, .shell-topbar-suffix,
    .workspace-header-link, .portal-top-safety-link, .creation-top-safety,
    .ui-language-switch-btn, .creation-sidebar-toggle, .portal-sidebar-toggle,
    .desktop-history-toggle
) {
    color:#cbd5e1 !important;
    -webkit-text-fill-color:currentColor !important;
}
html[data-ui-theme="dark"] body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language),
body[data-ui-theme="dark"] #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) {
    background:#161e29 !important;
    border-color:rgba(226,232,240,.18) !important;
}
html[data-ui-theme="dark"] body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) a,
body[data-ui-theme="dark"] #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) a {
    background:transparent !important;
    color:#cbd5e1 !important;
    -webkit-text-fill-color:currentColor !important;
}
html[data-ui-theme="dark"] body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) a.active,
body[data-ui-theme="dark"] #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-language,.portal-language) a.active {
    background:rgba(77,145,255,.16) !important;
    border-color:rgba(107,168,255,.42) !important;
    color:#b8d4ff !important;
    -webkit-text-fill-color:currentColor !important;
}
html[data-ui-theme="dark"] body #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-login,.workspace-header-login,.portal-login),
body[data-ui-theme="dark"] #creation-app header[data-fuuvo-shared-topbar="1"] :is(.creation-login,.workspace-header-login,.portal-login) {
    background:#6ba8ff !important;
    color:#081321 !important;
    -webkit-text-fill-color:#081321 !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-mode-nav,
body[data-ui-theme="dark"] #creation-app .studio-mode-nav,
html[data-ui-theme="dark"] body #creation-app .studio-controls,
body[data-ui-theme="dark"] #creation-app .studio-controls,
html[data-ui-theme="dark"] body #creation-app .studio-control-footer,
body[data-ui-theme="dark"] #creation-app .studio-control-footer,
html[data-ui-theme="dark"] body #creation-app .studio-layout .detail-preview-card,
body[data-ui-theme="dark"] #creation-app .studio-layout .detail-preview-card,
html[data-ui-theme="dark"] body #creation-app .studio-composer,
body[data-ui-theme="dark"] #creation-app .studio-composer {
    background:#1a222e !important;
    border-color:rgba(226,232,240,.14) !important;
    color:#eef2f7 !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-mode-link,
body[data-ui-theme="dark"] #creation-app .studio-mode-link,
html[data-ui-theme="dark"] body #creation-app .studio-parameter,
body[data-ui-theme="dark"] #creation-app .studio-parameter,
html[data-ui-theme="dark"] body #creation-app .studio-layout :is(h2,h3,label,.detail-label,.setting-label),
body[data-ui-theme="dark"] #creation-app .studio-layout :is(h2,h3,label,.detail-label,.setting-label) {
    color:#eef2f7 !important;
    -webkit-text-fill-color:currentColor !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-prompt-suggestions > summary,
body[data-ui-theme="dark"] #creation-app .studio-prompt-suggestions > summary {
    color:#eef2f7 !important;
    -webkit-text-fill-color:currentColor !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-mode-link.active,
body[data-ui-theme="dark"] #creation-app .studio-mode-link.active {
    background:rgba(77,145,255,.16) !important;
    color:#a9ccff !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-layout :is(textarea,select,input:not([type="checkbox"]):not([type="radio"])),
body[data-ui-theme="dark"] #creation-app .studio-layout :is(textarea,select,input:not([type="checkbox"]):not([type="radio"])) {
    background:#161e29 !important;
    color:#eef2f7 !important;
    -webkit-text-fill-color:currentColor !important;
    border-color:rgba(226,232,240,.18) !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-layout :is(.detail-option,.setting-option,.detail-advanced),
body[data-ui-theme="dark"] #creation-app .studio-layout :is(.detail-option,.setting-option,.detail-advanced) {
    background:#161e29 !important;
    color:#eef2f7 !important;
    -webkit-text-fill-color:currentColor !important;
    border-color:rgba(226,232,240,.18) !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-layout :is(.detail-option.active,.setting-option.active),
body[data-ui-theme="dark"] #creation-app .studio-layout :is(.detail-option.active,.setting-option.active) {
    background:rgba(77,145,255,.16) !important;
    border-color:rgba(107,168,255,.52) !important;
    color:#a9ccff !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-layout :is(.detail-dropzone,.upload-box),
body[data-ui-theme="dark"] #creation-app .studio-layout :is(.detail-dropzone,.upload-box) {
    background:#161e29 !important;
    border-color:rgba(107,168,255,.32) !important;
    color:#cbd5e1 !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-preview-empty,
body[data-ui-theme="dark"] #creation-app .studio-preview-empty,
html[data-ui-theme="dark"] body #creation-app .studio-gallery-thumbnail,
body[data-ui-theme="dark"] #creation-app .studio-gallery-thumbnail {
    background:#161e29 !important;
    border-color:rgba(226,232,240,.14) !important;
    color:#cbd5e1 !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-gallery-thumbnail[aria-pressed="true"],
body[data-ui-theme="dark"] #creation-app .studio-gallery-thumbnail[aria-pressed="true"] {
    background:rgba(77,145,255,.16) !important;
    border-color:#6ba8ff !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-gallery-direction,
body[data-ui-theme="dark"] #creation-app .studio-gallery-direction {
    background:#1a222e !important;
    border-color:rgba(107,168,255,.42) !important;
    color:#a9ccff !important;
}
html[data-ui-theme="dark"] body:has(> #creation-app),
body[data-ui-theme="dark"]:has(> #creation-app) {
    background:#0f141d !important;
    color:#eef2f7 !important;
}

/* Dark hover states: use a quiet blue highlight instead of the light theme's
   white fill, which makes the hovered tab look disconnected. */
html[data-ui-theme="dark"] body #creation-app .studio-mode-link:hover,
body[data-ui-theme="dark"] #creation-app .studio-mode-link:hover,
html[data-ui-theme="dark"] body #creation-app .studio-mode-link:focus-visible,
body[data-ui-theme="dark"] #creation-app .studio-mode-link:focus-visible {
    background:#263852 !important;
    color:#c5ddff !important;
    box-shadow:none !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-layout :is(.creation-outline:hover,.creation-outline:focus-visible,.detail-option:hover,.setting-option:hover),
body[data-ui-theme="dark"] #creation-app .studio-layout :is(.creation-outline:hover,.creation-outline:focus-visible,.detail-option:hover,.setting-option:hover) {
    background:#263852 !important;
    border-color:#79b3ff !important;
    color:#d7e8ff !important;
    -webkit-text-fill-color:currentColor !important;
    box-shadow:0 0 0 2px rgba(107,168,255,.12) !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-layout :is(.detail-dropzone:hover,.detail-dropzone:focus-within,.upload-box:hover,.upload-box:focus-within),
body[data-ui-theme="dark"] #creation-app .studio-layout :is(.detail-dropzone:hover,.detail-dropzone:focus-within,.upload-box:hover,.upload-box:focus-within) {
    background:#20334c !important;
    border-color:#79b3ff !important;
    color:#c5ddff !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-gallery-thumbnail:hover,
body[data-ui-theme="dark"] #creation-app .studio-gallery-thumbnail:hover {
    background:#22344c !important;
    border-color:#79b3ff !important;
}
html[data-ui-theme="dark"] body #creation-app .studio-gallery-direction:hover,
body[data-ui-theme="dark"] #creation-app .studio-gallery-direction:hover {
    background:#263852 !important;
    border-color:#79b3ff !important;
    color:#d7e8ff !important;
}

/* Keep selectors readable in the compact tool rail. */
html body #creation-app.studio-workspace .studio-control-scroll > .creation-model-field {
    flex: none;
    margin: 0 0 16px;
}
/* Keep the multiline video prompt inside its composer. The shared compact
   control rule is more specific than the base composer rule and can otherwise
   shrink the textarea until its placeholder overlaps the model picker. */
html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer {
    margin-bottom: 14px;
}
html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .detail-textarea-wrap {
    flex: 0 0 auto;
    min-height: 128px;
    margin-bottom: 2px;
}
html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer textarea {
    flex: 0 0 120px;
    min-height: 120px !important;
}
html body #creation-app.studio-workspace .creation-model-menu {
    position: static;
    max-height: 330px;
    margin-top: 7px;
    box-shadow: none;
}
html body #creation-app.studio-workspace .studio-image-settings {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
html body #creation-app.studio-workspace .studio-image-settings .setting-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
}
html body #creation-app.studio-workspace .studio-image-settings .setting-option {
    min-width: 0;
    min-height: 36px;
    padding: 6px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html body #creation-app.studio-workspace .studio-image-settings .setting-option::before {
    display: none !important;
}

/* Unified creation tool workspace. The creation-centre landing page keeps its
   OpenArt-inspired cards; only tool detail pages use this Runway-like shell. */
html body #creation-app.studio-workspace {
    --studio-panel-width: clamp(340px, 29vw, 392px);
    --studio-radius: 10px;
    --studio-line: #dfe6ef;
    --studio-line-strong: #c9d6e6;
    --studio-soft: #f7f9fc;
    --studio-blue: #1677ff;
    --studio-blue-soft: #edf5ff;
}

html body #creation-app.studio-workspace .creation-main {
    min-width: 0;
}

/* The edit-image workspace starts its controls at the workspace edge. Keep
   the shared back action aligned with that same content line on desktop. */
@media (min-width: 921px) {
    html body #creation-app[data-creation-page="edit-image"]
        header[data-fuuvo-shared-topbar="1"].creation-topbar {
        padding-left: 20px !important;
    }
}

html body #creation-app.studio-workspace .studio-layout {
    display: grid;
    grid-template-columns: var(--studio-panel-width) minmax(0, 1fr);
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
}

html body #creation-app.studio-workspace .studio-controls {
    position: relative;
    top: 0;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: var(--studio-control-height, calc(100dvh - 64px));
    min-height: 420px;
    max-height: none;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-right: 1px solid var(--studio-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body #creation-app.studio-workspace .studio-mode-nav {
    display: flex;
    flex: none;
    gap: 4px;
    width: 100%;
    max-width: none;
    min-height: 52px;
    margin: 0;
    padding: 9px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-bottom: 1px solid var(--studio-line);
    border-radius: 0;
    scrollbar-width: none;
    box-sizing: border-box;
}

html body #creation-app.studio-workspace .studio-mode-nav::-webkit-scrollbar {
    display: none;
}

html body #creation-app.studio-workspace .studio-mode-link {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

html body #creation-app.studio-workspace .studio-mode-link.active {
    color: #1266da;
    background: var(--studio-blue-soft);
    box-shadow: none;
}

html body #creation-app.studio-workspace .studio-control-scroll {
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #c4cfdd transparent;
    scrollbar-width: thin;
}

html body #creation-app.studio-workspace .studio-control-scroll > h2,
html body #creation-app.studio-workspace .studio-control-scroll > .project-ai-section-head:first-child {
    display: none;
}

html body #creation-app.studio-workspace .studio-control-scroll :is(.detail-label, .setting-label, .project-field > span:first-child) {
    display: block;
    margin-top: 14px;
    margin-bottom: 7px;
    color: #243a55;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: 0;
}

html body #creation-app.studio-workspace .studio-control-scroll :is(
    textarea,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"])
) {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    box-sizing: border-box;
    box-shadow: none;
}

html body #creation-app.studio-workspace .studio-control-scroll textarea {
    min-height: 92px;
    max-height: 180px;
    padding: 11px 12px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

html body #creation-app.studio-workspace .studio-control-scroll :is(textarea, input, select):focus {
    border-color: #6aa7f5 !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .1);
}

html body #creation-app.studio-workspace .studio-control-scroll :is(.detail-dropzone, .upload-box) {
    min-height: 92px;
    padding: 14px;
    border: 1px dashed var(--studio-line-strong) !important;
    border-radius: 10px;
    background: var(--studio-soft) !important;
    box-shadow: none;
}

html body #creation-app.studio-workspace .studio-control-scroll :is(.detail-dropzone, .upload-box):hover,
html body #creation-app.studio-workspace .studio-control-scroll :is(.detail-dropzone, .upload-box):focus-within {
    border-color: #6aa7f5 !important;
    background: var(--studio-blue-soft) !important;
}

html body #creation-app.studio-workspace .studio-composer {
    min-height: 270px;
    padding: 12px;
    border: 1px solid var(--studio-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(25, 48, 78, .03);
}

html body #creation-app.studio-workspace .studio-composer :is(.upload-box, .detail-dropzone) {
    width: 124px;
    height: 88px;
    min-height: 88px;
    margin: 0;
    padding: 10px;
}

html body #creation-app.studio-workspace .studio-composer textarea {
    min-height: 120px;
    max-height: none;
    padding: 8px 0;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    resize: none;
}

html body #creation-app.studio-workspace .studio-control-footer {
    position: relative;
    z-index: 3;
    display: flex;
    flex: none;
    flex-direction: column;
    max-height: 52%;
    padding: 12px 16px;
    overflow: hidden;
    border-top: 1px solid var(--studio-line);
    background: #fff;
    box-shadow: 0 -8px 24px rgba(25, 48, 78, .035);
}

html body #creation-app.studio-workspace .studio-control-footer > :is(.studio-parameters, .detail-advanced) {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
}

html body #creation-app.studio-workspace .studio-control-footer .detail-submit,
html body #creation-app.studio-workspace .studio-control-footer > .creation-primary,
html body #creation-app.studio-workspace .studio-control-footer .animate-generation-actions .creation-primary {
    width: 100%;
    min-height: 46px;
    margin: 0;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
}

html body #creation-app.studio-workspace .studio-control-footer .animate-generation-actions {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 8px;
}

html body #creation-app.studio-workspace .studio-control-footer .detail-form-status:not(:empty) {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel {
    order: -1;
    min-width: 0;
    margin: 0 0 18px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel:has(.detail-form-status:empty) {
    display: none;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status {
    min-height: 0;
    margin: 0;
    color: var(--creation-blue);
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status.error {
    color: #b54747;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status.success {
    color: #237a54;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status {
    color: #8fc0ff;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status.error,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status.error {
    color: #ffb1b1;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status.success,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-status-panel .detail-form-status.success {
    color: #9be0bb;
}

html body #creation-app.studio-workspace .studio-parameters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

html body #creation-app.studio-workspace .studio-image-settings {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

html body #creation-app.studio-workspace .studio-image-settings .setting-group {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

html body #creation-app.studio-workspace .studio-image-settings .setting-label {
    margin: 0 !important;
    color: #60738d;
    font-size: 11px;
}

html body #creation-app.studio-workspace .studio-image-settings .setting-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible !important;
}

html body #creation-app.studio-workspace .studio-image-settings .setting-option {
    min-width: 0 !important;
    min-height: 32px;
    padding: 5px 6px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #creation-app.studio-workspace .studio-parameter {
    min-width: 0;
    color: #60738d;
    font-size: 11px;
}

html body #creation-app.studio-workspace .studio-parameter select {
    width: 100%;
    min-height: 36px;
    margin-top: 5px;
    padding: 6px 8px;
    border: 1px solid var(--studio-line);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
}

html body #creation-app.studio-workspace .detail-advanced.studio-advanced,
html body #creation-app.studio-workspace .studio-control-footer > .detail-advanced {
    margin: 0 0 10px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
}

html body #creation-app.studio-workspace .detail-advanced.studio-advanced > summary,
html body #creation-app.studio-workspace .studio-control-footer > .detail-advanced > summary {
    min-height: 36px;
    padding: 0 2px;
    color: #405671;
    font-size: 12px;
    font-weight: 650;
}

html body #creation-app.studio-workspace .detail-advanced.studio-advanced[open] {
    padding: 0 0 8px;
}

/* The studio control rail is deliberately narrow. Keep advanced audio fields
   in a readable vertical flow instead of forcing labels and inputs into rows. */
html body #creation-app.studio-workspace .audio-advanced-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

html body #creation-app.studio-workspace .audio-advanced-grid .detail-label,
html body #creation-app.studio-workspace .audio-advanced-grid .audio-advanced-wide {
    margin: 0 !important;
}

html body #creation-app.studio-workspace .audio-advanced-grid .audio-advanced-wide {
    grid-column: auto;
}

html body #creation-app.studio-workspace .detail-option-grid,
html body #creation-app.studio-workspace :is(.poster-size-grid, .poster-style-grid, .project-visual-type-grid) {
    gap: 8px;
}

html body #creation-app.studio-workspace :is(.detail-option, .poster-option, .poster-style, .project-visual-option) {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 9px;
}

html body #creation-app.studio-workspace .studio-layout .detail-preview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    height: var(--studio-control-height, calc(100dvh - 64px));
    min-height: 420px;
    margin: 0;
    padding: 24px;
    overflow: auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff;
    box-shadow: none !important;
    box-sizing: border-box;
}

html body #creation-app.studio-workspace .studio-layout .detail-preview-card > h2,
html body #creation-app.studio-workspace .audio-preview-heading h2 {
    margin: 0;
    color: #1e3551;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0;
}

html body #creation-app.studio-workspace .studio-layout :is(
    .detail-media,
    .edit-result-stage,
    .poster-preview,
    .audio-result-stage
) {
    border-color: var(--studio-line) !important;
    border-radius: 12px;
    background: var(--studio-soft) !important;
    box-shadow: none;
}

html body #creation-app.studio-workspace .edit-result-stage.is-empty {
    min-height: clamp(260px, 42vh, 440px);
    height: auto;
}

html body #creation-app[data-creation-page="animate-photo"].studio-workspace .detail-preview-card > .detail-media.is-empty {
    display: flex !important;
    flex: 1;
    min-height: 360px;
    max-height: none;
}

html body #creation-app.studio-workspace .studio-gallery {
    margin-top: 20px !important;
}

html body #creation-app.studio-workspace .studio-gallery-heading {
    justify-content: space-between;
    margin: 0 0 16px;
}

html body #creation-app.studio-workspace .studio-gallery-heading h2 {
    font-size: clamp(20px, 2vw, 30px);
}

html body #creation-app.studio-workspace .studio-gallery-media {
    height: clamp(220px, 34vh, 360px);
    border-radius: 12px;
    background: var(--studio-soft);
}

html body #creation-app.studio-workspace .studio-gallery-thumbnail {
    height: 58px;
    padding: 8px;
    border-radius: 9px;
}

html body #creation-app.studio-workspace .project-ai-brief-card {
    align-self: stretch;
}

html body #creation-app.studio-workspace .project-ai-brief-card .project-ai-process {
    margin-top: auto;
}

html body #creation-app.studio-workspace .audio-preview-card .audio-result-stage {
    flex: 1;
    min-height: 320px;
}

html:not([data-ui-theme="dark"]) body:not([data-ui-theme="dark"]) #creation-app.studio-workspace,
html:not([data-ui-theme="dark"]) body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .creation-workspace,
html:not([data-ui-theme="dark"]) body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .creation-main,
html:not([data-ui-theme="dark"]) body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .studio-layout,
html:not([data-ui-theme="dark"]) body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .studio-layout .detail-preview-card {
    background: #fff !important;
}

@media (max-width: 1080px) {
    html body #creation-app.studio-workspace {
        --studio-panel-width: clamp(320px, 34vw, 360px);
    }

    html body #creation-app.studio-workspace .studio-gallery-thumbnails {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    html body #creation-app.studio-workspace .creation-workspace,
    html body #creation-app.studio-workspace .creation-main {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    html body #creation-app.studio-workspace .studio-layout {
        display: block;
    }

    html body #creation-app.studio-workspace .studio-controls {
        height: auto;
        min-height: 0;
        overflow: visible;
        border-right: 0 !important;
        border-bottom: 1px solid var(--studio-line) !important;
    }

    html body #creation-app.studio-workspace .studio-control-scroll {
        overflow: visible;
        padding: 14px;
    }

    html body #creation-app.studio-workspace .studio-control-footer {
        position: sticky;
        bottom: 0;
        max-height: min(56dvh, 420px);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    }

    html body #creation-app.studio-workspace .studio-layout .detail-preview-card {
        height: auto;
        min-height: 420px;
        padding: 18px 14px 28px;
        overflow: visible;
    }

    html body #creation-app.studio-workspace .studio-gallery-media {
        height: clamp(210px, 48vw, 360px);
    }
}

@media (max-width: 480px) {
    html body #creation-app.studio-workspace .studio-composer {
        min-height: 240px;
    }

    html body #creation-app.studio-workspace .studio-parameters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #creation-app.studio-workspace .studio-gallery-thumbnails {
        grid-template-columns: 1fr;
    }

    html body #creation-app.studio-workspace .studio-control-footer .animate-generation-actions {
        grid-template-columns: 1fr;
    }
}

/* Homepage visual grid: a darker, image-led surface inspired by the second
   reference. Detail pages continue using the white Runway-style workspace. */
html body #creation-app[data-creation-page="home"],
html body #creation-app[data-creation-page="home"] .creation-workspace,
html body #creation-app[data-creation-page="home"] .creation-main {
    background: #0b111c !important;
    color: #f5f8fc !important;
}

html body:has(#creation-app[data-creation-page="home"]) {
    background: #0b111c !important;
}

html body #creation-app[data-creation-page="home"] .creation-main {
    max-width: none;
    padding: 0 34px 64px;
}

html body #creation-app[data-creation-page="home"] .creation-heading {
    margin: 0 0 22px;
    padding: 44px 0 14px;
    background: transparent !important;
}

html body #creation-app[data-creation-page="home"] .creation-heading h1,
html body #creation-app[data-creation-page="home"] .creation-section-title,
html body #creation-app[data-creation-page="home"] .creation-heading p {
    color: #f5f8fc !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-heading h1 {
    font-size: clamp(30px, 4vw, 50px) !important;
    letter-spacing: -.02em;
}

html body #creation-app[data-creation-page="home"] .creation-heading p {
    color: #91a4bc !important;
}

html body #creation-app[data-creation-page="home"] .creation-view-tabs,
html body #creation-app[data-creation-page="home"] .creation-type-tabs {
    border-bottom-color: rgba(204, 220, 240, .14) !important;
}

html body #creation-app[data-creation-page="home"] .creation-view-tabs a,
html body #creation-app[data-creation-page="home"] .creation-type-tabs a {
    color: #8fa2ba !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-view-tabs a.active,
html body #creation-app[data-creation-page="home"] .creation-type-tabs a.active {
    color: #75b1ff !important;
    border-bottom-color: #4a9aff !important;
}

html body #creation-app[data-creation-page="home"] .creation-category-tabs {
    gap: 12px;
}

html body #creation-app[data-creation-page="home"] .creation-category-tabs a {
    border: 1px solid rgba(195, 217, 242, .18) !important;
    border-radius: 12px !important;
    background: #151f2d !important;
    color: #b8c8dc !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-category-tabs a.active {
    border-color: #5ea4ff !important;
    background: #1a477b !important;
    color: #fff !important;
}

html body #creation-app[data-creation-page="home"] .creation-category-tabs a:hover {
    border-color: #76b5ff !important;
    background: #1b3654 !important;
    color: #fff !important;
}

html body #creation-app[data-creation-page="home"] .creation-inspiration {
    border-top-color: rgba(204, 220, 240, .18) !important;
}

html body #creation-app[data-creation-page="home"] .creation-inspiration :is(h2, p) {
    color: #f5f8fc !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-inspiration p {
    color: #91a4bc !important;
}

html body #creation-app[data-creation-page="home"] .creation-inspiration .creation-pill {
    border-color: rgba(195, 217, 242, .2) !important;
    background: #151f2d !important;
    color: #d7e5f5 !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .studio-primary-entries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 54px;
}

html body #creation-app[data-creation-page="home"] .studio-primary-entry {
    position: relative;
    display: block !important;
    min-width: 0;
    min-height: 250px;
    aspect-ratio: 1.8 / 1;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(203, 221, 245, .2) !important;
    border-radius: 20px !important;
    background: #172334 !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22) !important;
}

html body #creation-app[data-creation-page="home"] .studio-primary-entry::after,
html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry::after {
    position: absolute;
    inset: 34% 0 0;
    z-index: 1;
    content: "";
    background: linear-gradient(180deg, transparent 0%, rgba(4, 9, 17, .86) 100%);
    pointer-events: none;
}

html body #creation-app[data-creation-page="home"] .studio-primary-entry .creation-app-entry-art,
html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    filter: saturate(1.12) contrast(1.05);
    border-radius: 0 !important;
    transition: transform .35s ease, filter .35s ease;
}

html body #creation-app[data-creation-page="home"] .studio-primary-entry .creation-app-entry-copy,
html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry-copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 44px 18px 18px;
    color: #fff !important;
    background: transparent !important;
}

html body #creation-app[data-creation-page="home"] .creation-app-entry-type {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(8, 16, 28, .42);
    color: #dceaff !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-app-entry-copy strong,
html body #creation-app[data-creation-page="home"] .creation-app-entry-copy small {
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-app-entry-copy strong {
    font-size: 20px;
    font-weight: 760;
    line-height: 1.2;
}

html body #creation-app[data-creation-page="home"] .creation-app-entry-copy small {
    color: rgba(231, 240, 251, .78) !important;
    font-size: 13px;
}

html body #creation-app[data-creation-page="home"] .studio-entry-arrow {
    position: absolute;
    right: 17px;
    bottom: 16px;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(8, 16, 28, .38);
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

html body #creation-app[data-creation-page="home"] .creation-app-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry {
    position: relative;
    display: block !important;
    min-width: 0;
    min-height: 220px;
    aspect-ratio: 1.32 / 1;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(203, 221, 245, .2) !important;
    border-radius: 18px !important;
    background: #172334 !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

@media (hover: hover) {
    html body #creation-app[data-creation-page="home"] .studio-primary-entry:hover,
    html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry:hover {
        transform: translateY(-5px);
        border-color: rgba(102, 173, 255, .8) !important;
        box-shadow: 0 18px 34px rgba(0, 0, 0, .32) !important;
    }

    html body #creation-app[data-creation-page="home"] .studio-primary-entry:hover .creation-app-entry-art,
    html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry:hover .creation-app-entry-art {
        filter: saturate(1.25) contrast(1.08) brightness(1.06);
        transform: scale(1.045);
    }
}

html body #creation-app[data-creation-page="home"] .creation-rights-note,
html body #creation-app[data-creation-page="home"] .creation-main > .creation-rights-note,
html body #creation-app[data-creation-page="home"] .creation-main > .detail-rights-note {
    color: #8296b0 !important;
}

@media (max-width: 800px) {
    html body #creation-app[data-creation-page="home"] .creation-main {
        padding: 0 14px 44px;
    }

    html body #creation-app[data-creation-page="home"] .studio-primary-entries {
        grid-template-columns: 1fr;
        margin-bottom: 38px;
    }

    html body #creation-app[data-creation-page="home"] .studio-primary-entry {
        min-height: 200px;
    }

    html body #creation-app[data-creation-page="home"] .creation-app-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry {
        min-height: 170px;
        border-radius: 14px !important;
    }

    html body #creation-app[data-creation-page="home"] .creation-app-entry-copy {
        padding: 32px 12px 12px;
    }

    html body #creation-app[data-creation-page="home"] .creation-app-entry-copy strong {
        font-size: 15px;
    }

    html body #creation-app[data-creation-page="home"] .creation-app-entry-copy small {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    html body #creation-app[data-creation-page="home"] .creation-app-list {
        grid-template-columns: 1fr !important;
    }
}

/* Refined gallery proportions: one editorial feature tile anchors the grid,
   while the remaining tools read as compact visual modules. */
html body #creation-app[data-creation-page="home"] .creation-app-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry {
    min-height: 0;
    aspect-ratio: 1.18 / 1;
    border-radius: 16px !important;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry.is-featured {
    grid-column: span 2;
    aspect-ratio: 2.08 / 1;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry-art {
    filter: saturate(1.04) contrast(1.03) brightness(.96);
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry::after {
    inset: 24% 0 0;
    background: linear-gradient(180deg, rgba(8, 14, 24, 0) 18%, rgba(8, 14, 24, .88) 100%);
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry:nth-child(1) .creation-app-entry-art {
    object-position: center 54%;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry:nth-child(2) .creation-app-entry-art {
    object-position: center 48%;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry:nth-child(3) .creation-app-entry-art {
    object-position: center 58%;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry-copy {
    padding: 38px 15px 15px;
}

html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry-copy strong {
    font-size: 17px;
}

@media (max-width: 1100px) {
    html body #creation-app[data-creation-page="home"] .creation-app-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    html body #creation-app[data-creation-page="home"] .creation-app-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry.is-featured {
        grid-column: span 2;
        aspect-ratio: 1.72 / 1;
    }
}

@media (max-width: 480px) {
    html body #creation-app[data-creation-page="home"] .creation-app-list .creation-app-entry.is-featured {
        grid-column: span 1;
        aspect-ratio: 1.48 / 1;
    }
}

/* Keep the landing-page rhythm consistent across the hero and gallery. */
html body #creation-app[data-creation-page="home"] .creation-category-tabs {
    margin-top: 18px;
    margin-bottom: 18px;
}

html body #creation-app[data-creation-page="home"] .studio-primary-entries {
    gap: 16px;
    margin-bottom: 38px;
}

html body #creation-app[data-creation-page="home"] .creation-section-title {
    margin: 0 0 16px;
    line-height: 1.25;
}

html body #creation-app[data-creation-page="home"] .creation-app-list {
    gap: 16px !important;
}

@media (max-width: 800px) {
    html body #creation-app[data-creation-page="home"] .creation-category-tabs {
        margin-top: 14px;
        margin-bottom: 14px;
    }

    html body #creation-app[data-creation-page="home"] .studio-primary-entries {
        gap: 12px;
        margin-bottom: 30px;
    }

    html body #creation-app[data-creation-page="home"] .creation-app-list {
        gap: 12px !important;
    }
}

/* Creation centre home: one template-owned layout with no duplicated cards. */
html body #creation-app[data-creation-page="home"] .creation-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 clamp(24px, 4vw, 56px) 64px !important;
    box-sizing: border-box;
    overflow-x: clip;
}

html body #creation-app[data-creation-page="home"] .creation-home-shell {
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding-top: 18px;
}

html body #creation-app[data-creation-page="home"] .creation-home-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    order: 2;
    gap: 20px;
    margin-bottom: 20px;
}

html body #creation-app[data-creation-page="home"] .creation-home-kicker {
    display: block;
    margin-bottom: 10px;
    color: #6eb0ff !important;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: 0;
}

html body #creation-app[data-creation-page="home"] .creation-home-hero h1 {
    margin: 0;
    color: #f8fafc !important;
    font-size: 38px !important;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: 0;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-hero p {
    max-width: 620px;
    margin: 12px 0 0;
    color: #9aa9bc !important;
    font-size: 15px;
    line-height: 1.65;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-history {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(207, 221, 238, .2);
    border-radius: 8px;
    background: #171c24;
    color: #d7e1ee !important;
    font-size: 13px;
    font-weight: 650;
    transition: border-color .2s ease, background-color .2s ease;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-history:hover {
    border-color: rgba(110, 176, 255, .7);
    background: #1d2d42;
    color: #fff !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    order: 1;
    gap: 4px;
    width: min(100%, 560px);
    margin-bottom: 20px;
    padding: 4px;
    overflow: visible;
    border: 1px solid rgba(207, 221, 238, .14);
    border-radius: 8px;
    background: #12171f;
    scrollbar-width: none;
}

html body #creation-app[data-creation-page="home"] .creation-home-categories::-webkit-scrollbar {
    display: none;
}

html body #creation-app[data-creation-page="home"] .creation-home-categories a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #9baabd !important;
    font-size: 13px;
    font-weight: 650;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-categories a:hover {
    background: #1b2531;
    color: #f2f6fb !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-categories a.active {
    border-color: rgba(95, 165, 255, .55);
    background: #1d4776;
    color: #fff !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-categories :is(img, .creation-category-icon) {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}

html body #creation-app[data-creation-page="home"] .creation-home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

html body #creation-app[data-creation-page="home"] .creation-home-tools {
    order: 3;
}

html body #creation-app[data-creation-page="home"] .creation-home-section-head h2 {
    margin: 0;
    color: #f3f6fa !important;
    font-size: 21px;
    font-weight: 720;
    line-height: 1.3;
    letter-spacing: 0;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-section-head p {
    margin: 6px 0 0;
    color: #8595aa !important;
    font-size: 13px;
    line-height: 1.5;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-section-head > a {
    color: #78b5ff !important;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-tool-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 14px;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card {
    position: relative;
    grid-column: span 3;
    min-width: 0;
    height: 228px;
    overflow: hidden;
    border: 1px solid rgba(207, 221, 238, .2);
    border-radius: 8px;
    background: #151a21;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    isolation: isolate;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-1 {
    grid-column: span 6;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card:nth-child(n + 4) {
    grid-column: span 4;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card::after {
    position: absolute;
    inset: 34% 0 0;
    z-index: -1;
    content: "";
    background: linear-gradient(180deg, rgba(7, 10, 14, 0), rgba(7, 10, 14, .9));
    pointer-events: none;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-3 .creation-tool-card-art,
html body #creation-app[data-creation-page="home"] .creation-tool-card-6 .creation-tool-card-art {
    object-position: center 42%;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-copy {
    position: absolute;
    right: 48px;
    bottom: 15px;
    left: 15px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-type {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 6px;
    background: rgba(7, 10, 14, .48);
    color: #e4edf8 !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-copy strong {
    max-width: 100%;
    overflow: hidden;
    color: #fff !important;
    font-size: 18px;
    font-weight: 740;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-copy small {
    max-width: 100%;
    overflow: hidden;
    color: rgba(229, 237, 247, .78) !important;
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #creation-app[data-creation-page="home"] .creation-tool-card-arrow {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(7, 10, 14, .48);
    color: #fff !important;
    font-size: 16px;
    line-height: 1;
    transition: background-color .2s ease, transform .2s ease;
}

@media (hover: hover) {
    html body #creation-app[data-creation-page="home"] .creation-tool-card:hover {
        border-color: rgba(110, 176, 255, .8);
        box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
    }

    html body #creation-app[data-creation-page="home"] .creation-tool-card:hover .creation-tool-card-art {
        filter: saturate(1.08) contrast(1.04) brightness(1.04);
        transform: scale(1.035);
    }

    html body #creation-app[data-creation-page="home"] .creation-tool-card:hover .creation-tool-card-arrow {
        background: #237de4;
        transform: translate(2px, -2px);
    }
}

html body #creation-app[data-creation-page="home"] .creation-home-inspiration {
    order: 4;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(207, 221, 238, .14);
}

html body #creation-app[data-creation-page="home"] .creation-home-prompts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

html body #creation-app[data-creation-page="home"] .creation-home-prompts a {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid rgba(207, 221, 238, .16);
    border-radius: 8px;
    background: #12171f;
    color: #c9d4e2 !important;
    font-size: 12px;
    font-weight: 620;
    transition: border-color .2s ease, background-color .2s ease;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-prompts a:hover {
    border-color: rgba(110, 176, 255, .62);
    background: #1a2635;
    color: #fff !important;
}

html body #creation-app[data-creation-page="home"] .creation-home-prompts img {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
}

html body #creation-app[data-creation-page="home"] .creation-home-prompts span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #creation-app[data-creation-page="home"] .creation-home-disclaimer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
    color: #718198 !important;
    font-size: 11px;
    line-height: 1.5;
    order: 5;
}

html body #creation-app[data-creation-page="home"] .creation-home-disclaimer a {
    color: #82baff !important;
    -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 1040px) {
    html body #creation-app[data-creation-page="home"] .creation-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #creation-app[data-creation-page="home"] .creation-tool-card,
    html body #creation-app[data-creation-page="home"] .creation-tool-card:nth-child(n + 4) {
        grid-column: span 1;
    }

    html body #creation-app[data-creation-page="home"] .creation-tool-card-1 {
        grid-column: span 2;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-prompts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    html body #creation-app[data-creation-page="home"] .creation-main {
        padding: 0 14px 42px !important;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-shell {
        padding-top: 18px;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 20px;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-hero h1 {
        font-size: 32px !important;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-history {
        min-height: 36px;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-categories {
        width: 100%;
        margin-bottom: 18px;
        box-sizing: border-box;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-categories a {
        min-width: 0;
        padding: 0 8px;
        font-size: 12px;
    }

    html body #creation-app[data-creation-page="home"] .creation-tool-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    html body #creation-app[data-creation-page="home"] .creation-tool-card,
    html body #creation-app[data-creation-page="home"] .creation-tool-card-1,
    html body #creation-app[data-creation-page="home"] .creation-tool-card:nth-child(n + 4) {
        grid-column: span 1;
        height: 210px;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-inspiration {
        margin-top: 32px;
        padding-top: 22px;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    html body #creation-app[data-creation-page="home"] .creation-home-prompts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    html body #creation-app[data-creation-page="home"] .creation-home-prompts {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #creation-app[data-creation-page="home"] .creation-tool-card-art,
    html body #creation-app[data-creation-page="home"] .creation-tool-card-arrow {
        transition: none;
        transform: none !important;
    }
}

/* Final compact-rail sizing: one full row per parameter group. */
html body #creation-app.studio-workspace .studio-parameters:has(.studio-image-settings) {
    grid-template-columns: minmax(0, 1fr) !important;
}
html body #creation-app.studio-workspace .studio-parameters > .studio-image-settings {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
}

/* Writing and audio category pages share the same studio shell. */
html body #creation-app:is([data-creation-page="writing"], [data-creation-page="voice"]),
html body #creation-app:is([data-creation-page="writing"], [data-creation-page="voice"]) .creation-workspace,
html body #creation-app:is([data-creation-page="writing"], [data-creation-page="voice"]) .creation-main {
    background: #0b111c !important;
    color: #f5f8fc !important;
}

html body:has(#creation-app:is([data-creation-page="writing"], [data-creation-page="voice"])) {
    background: #0b111c !important;
}

html body #creation-app:is([data-creation-page="writing"], [data-creation-page="voice"]) .creation-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 clamp(24px, 4vw, 56px) 64px !important;
    box-sizing: border-box;
    overflow-x: clip;
}

html body #creation-app .creation-category-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding-top: 18px;
}

html body #creation-app .creation-subpage-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    width: min(100%, 560px);
    margin: 0 0 20px;
    padding: 4px;
    overflow: visible;
    border: 1px solid rgba(207, 221, 238, .14);
    border-radius: 8px;
    background: #12171f;
    scrollbar-width: none;
}

html body #creation-app .creation-subpage-categories::-webkit-scrollbar {
    display: none;
}

html body #creation-app .creation-subpage-categories a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent !important;
    color: #9baabd !important;
    font-size: 13px;
    font-weight: 650;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app .creation-subpage-categories a:hover {
    background: #1b2531 !important;
    color: #f2f6fb !important;
}

html body #creation-app .creation-subpage-categories a.active {
    border-color: rgba(95, 165, 255, .55);
    background: #1d4776 !important;
    color: #fff !important;
}

html body #creation-app .creation-subpage-categories img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}

html body #creation-app .creation-category-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

html body #creation-app .creation-category-hero h1 {
    margin: 0;
    color: #f8fafc !important;
    font-size: 38px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app .creation-category-hero p {
    max-width: 680px;
    margin: 10px 0 0;
    color: #94a4b8 !important;
    font-size: 14px;
    line-height: 1.65;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app .creation-category-primary {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #4f9df6;
    border-radius: 8px;
    background: #237de4;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    transition: background-color .2s ease, border-color .2s ease;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app .creation-category-primary:hover {
    border-color: #78b8ff;
    background: #318af0;
}

html body #creation-app .creation-category-card-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

html body #creation-app .creation-category-card {
    position: relative;
    grid-column: span 3;
    min-width: 0;
    height: 238px;
    overflow: hidden;
    border: 1px solid rgba(207, 221, 238, .18);
    border-radius: 8px;
    background: #161d26;
    color: #f7f9fc !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .17);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    -webkit-text-fill-color: currentColor !important;
}

html body #creation-app .creation-category-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: #4c9bff;
}

html body #creation-app .creation-category-card:nth-child(2) {
    background: #1b1b25;
}

html body #creation-app .creation-category-card:nth-child(2)::before {
    background: #9d7af2;
}

html body #creation-app .creation-category-card:nth-child(3) {
    background: #16211e;
}

html body #creation-app .creation-category-card:nth-child(3)::before {
    background: #4dbd8b;
}

html body #creation-app .creation-category-card:nth-child(4) {
    background: #211b1d;
}

html body #creation-app .creation-category-card:nth-child(4)::before {
    background: #e48272;
}

html body #creation-app .creation-category-card:nth-child(5) {
    background: #191d25;
}

html body #creation-app .creation-category-card:nth-child(5)::before {
    background: #e3ad55;
}

html body #creation-app .creation-category-card-grid-visual {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

html body #creation-app .creation-category-card-grid-writing {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

html body #creation-app .creation-category-card-grid-voice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) .creation-category-card {
    grid-column: auto;
    height: 224px;
    background: #161d26;
}

html body #creation-app .creation-category-card-icon {
    position: absolute;
    top: 18px;
    left: 20px;
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
}

html body #creation-app .creation-category-card-icon img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    filter: saturate(1.28) brightness(1.16);
}

html body #creation-app .creation-category-card-media {
    position: absolute;
    top: 3px;
    right: 0;
    left: 0;
    display: block;
    height: 124px;
    overflow: hidden;
    background: #202832;
}

html body #creation-app .creation-category-card-media::after {
    position: absolute;
    inset: auto 0 0;
    height: 38px;
    content: "";
    background: linear-gradient(to bottom, transparent, rgba(14, 20, 28, .74));
    pointer-events: none;
}

html body #creation-app .creation-category-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}

html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) .creation-category-card-label {
    top: 14px;
    right: 14px;
    z-index: 1;
    border-color: rgba(255, 255, 255, .34);
    background: rgba(8, 12, 18, .68);
    color: #fff !important;
    backdrop-filter: blur(8px);
}

html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) .creation-category-card-copy {
    right: 46px;
    bottom: 16px;
    left: 16px;
    gap: 4px;
}

html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) .creation-category-card-copy strong {
    font-size: 15px;
}

html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) .creation-category-card-copy small {
    font-size: 11px;
}

html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) .creation-category-card-arrow {
    right: 12px;
    bottom: 14px;
    width: 27px;
    height: 27px;
    font-size: 14px;
}

html body #creation-app .creation-category-card:nth-child(2) .creation-category-card-icon img {
    filter: hue-rotate(48deg) saturate(1.45) brightness(1.24);
}

html body #creation-app .creation-category-card:nth-child(3) .creation-category-card-icon img {
    filter: hue-rotate(118deg) saturate(1.32) brightness(1.18);
}

html body #creation-app .creation-category-card:nth-child(4) .creation-category-card-icon img {
    filter: hue-rotate(168deg) saturate(1.45) brightness(1.24);
}

html body #creation-app .creation-category-card:nth-child(5) .creation-category-card-icon img {
    filter: hue-rotate(202deg) saturate(1.42) brightness(1.28);
}

html body #creation-app .creation-category-card-grid-voice .creation-category-card:first-child {
    background: #13243a;
}

html body #creation-app .creation-category-card-grid-voice .creation-category-card:nth-child(2) {
    background: #241a31;
}

html body #creation-app .creation-category-card-grid-voice .creation-category-card-icon {
    top: 18px;
    left: 22px;
    width: 150px;
    height: 142px;
}

html body #creation-app .creation-category-card-grid-voice .creation-category-card-icon img {
    width: 132px;
    height: 132px;
}

html body #creation-app .creation-category-card-grid-voice .creation-category-card:nth-child(2) .creation-category-card-icon img {
    filter: hue-rotate(48deg) saturate(1.55) brightness(1.28);
}

html body #creation-app .creation-category-card-label {
    position: absolute;
    top: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(207, 221, 238, .18);
    border-radius: 6px;
    color: #aab8ca !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

html body #creation-app .creation-category-card-copy {
    position: absolute;
    right: 56px;
    bottom: 20px;
    left: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

html body #creation-app .creation-category-card-copy strong {
    max-width: 100%;
    overflow: hidden;
    color: #fff !important;
    font-size: 19px;
    font-weight: 730;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #creation-app .creation-category-card-copy small {
    max-width: 100%;
    overflow: hidden;
    color: #9eacbd !important;
    font-size: 12px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #creation-app .creation-category-card-arrow {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(207, 221, 238, .24);
    border-radius: 50%;
    background: rgba(8, 12, 17, .48);
    color: #fff !important;
    font-size: 16px;
    line-height: 1;
    transition: background-color .2s ease, transform .2s ease;
}

@media (hover: hover) {
    html body #creation-app .creation-category-card:hover {
        border-color: rgba(110, 176, 255, .75);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .27);
        transform: translateY(-3px);
    }

    html body #creation-app .creation-category-card:hover .creation-category-card-arrow {
        background: #237de4;
        transform: translate(2px, -2px);
    }

    html body #creation-app .creation-category-card:hover .creation-category-card-media img {
        transform: scale(1.035);
    }
}

html body #creation-app .creation-category-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(207, 221, 238, .13);
    color: #74859a !important;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}

@media (max-width: 1040px) {
    html body #creation-app .creation-category-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #creation-app .creation-category-card,
    html body #creation-app .creation-category-card-grid-voice .creation-category-card {
        grid-column: span 1;
    }

    html body #creation-app .creation-category-card-grid-writing {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body #creation-app .creation-category-card-grid-visual {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body #creation-app .creation-category-card-grid-voice {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    html body #creation-app:is([data-creation-page="writing"], [data-creation-page="voice"]) .creation-main {
        padding: 0 14px 42px !important;
    }

    html body #creation-app .creation-category-shell {
        padding-top: 18px;
    }

    html body #creation-app .creation-subpage-categories {
        width: 100%;
        margin-bottom: 18px;
        box-sizing: border-box;
    }

    html body #creation-app .creation-subpage-categories a {
        min-width: 0;
        padding: 0 8px;
        font-size: 12px;
    }

    html body #creation-app .creation-category-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 24px;
    }

    html body #creation-app .creation-category-hero h1 {
        font-size: 30px;
    }

    html body #creation-app .creation-category-primary {
        min-height: 38px;
    }

    html body #creation-app .creation-category-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #creation-app .creation-category-card,
    html body #creation-app .creation-category-card-grid-voice .creation-category-card {
        height: 210px;
    }

    html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) .creation-category-card {
        height: 216px;
    }

    html body #creation-app .creation-category-card-icon {
        top: 18px;
        left: 18px;
        width: 82px;
        height: 82px;
    }

    html body #creation-app .creation-category-card-icon img {
        width: 74px;
        height: 74px;
    }

    html body #creation-app .creation-category-card-grid-voice .creation-category-card-icon {
        top: 14px;
        left: 18px;
        width: 112px;
        height: 104px;
    }

    html body #creation-app .creation-category-card-grid-voice .creation-category-card-icon img {
        width: 98px;
        height: 98px;
    }

    html body #creation-app .creation-category-card-label {
        top: 18px;
        right: 18px;
    }

    html body #creation-app .creation-category-card-copy {
        bottom: 18px;
        left: 18px;
    }
}

@media (max-width: 440px) {
    html body #creation-app :is(.creation-category-card-grid-visual, .creation-category-card-grid-writing, .creation-category-card-grid-voice) {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #creation-app .creation-category-card,
    html body #creation-app .creation-category-card-arrow,
    html body #creation-app .creation-category-card-media img {
        transition: none;
        transform: none !important;
    }
}

/* Final dark-mode contrast guard. This block intentionally follows every
   studio layout rule so light-theme text colors cannot win by source order. */
html[data-ui-theme="dark"] body #creation-app.studio-workspace,
body[data-ui-theme="dark"] #creation-app.studio-workspace {
    --studio-dark-text: #f8fafc;
    --studio-dark-text-soft: #d1d9e5;
    --studio-dark-muted: #b8c4d4;
    --studio-dark-action: #7db7ff;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    h1,
    h2,
    h3,
    h4,
    label,
    strong,
    .detail-label,
    .setting-label,
    .project-field > span:first-child,
    .creation-model-label > span,
    .creation-model-summary-copy strong,
    .creation-model-provider > header,
    .creation-model-provider > header strong,
    .creation-model-option,
    .creation-model-option strong
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    h1,
    h2,
    h3,
    h4,
    label,
    strong,
    .detail-label,
    .setting-label,
    .project-field > span:first-child,
    .creation-model-label > span,
    .creation-model-summary-copy strong,
    .creation-model-provider > header,
    .creation-model-provider > header strong,
    .creation-model-option,
    .creation-model-option strong
) {
    color: var(--studio-dark-text) !important;
    -webkit-text-fill-color: var(--studio-dark-text) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    p,
    small,
    .detail-help,
    .detail-preview-note,
    .studio-preview-empty,
    .studio-gallery-caption,
    .studio-reference-card-copy small,
    .detail-dropzone small,
    .detail-dropzone span,
    .upload-box small,
    .upload-box span,
    .prompt-counter,
    .creation-model-label > small,
    .creation-model-summary-copy small,
    .creation-model-option small,
    .creation-model-empty
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    p,
    small,
    .detail-help,
    .detail-preview-note,
    .studio-preview-empty,
    .studio-gallery-caption,
    .studio-reference-card-copy small,
    .detail-dropzone small,
    .detail-dropzone span,
    .upload-box small,
    .upload-box span,
    .prompt-counter,
    .creation-model-label > small,
    .creation-model-summary-copy small,
    .creation-model-option small,
    .creation-model-empty
) {
    color: var(--studio-dark-text-soft) !important;
    -webkit-text-fill-color: var(--studio-dark-text-soft) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    textarea,
    select,
    input:not([type="checkbox"]):not([type="radio"])
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    textarea,
    select,
    input:not([type="checkbox"]):not([type="radio"])
) {
    color: var(--studio-dark-text) !important;
    -webkit-text-fill-color: var(--studio-dark-text) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .detail-advanced
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .detail-advanced
) {
    color: var(--studio-dark-text) !important;
    -webkit-text-fill-color: var(--studio-dark-text) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(textarea, input)::placeholder,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(textarea, input)::placeholder {
    color: var(--studio-dark-muted) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--studio-dark-muted) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .creation-model-picker > summary,
    .creation-model-menu
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .creation-model-picker > summary,
    .creation-model-menu
) {
    border-color: #3d506a !important;
    background: #172437 !important;
    color: var(--studio-dark-text) !important;
    -webkit-text-fill-color: var(--studio-dark-text) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .creation-model-summary-mark,
    .creation-model-option-mark,
    .creation-model-provider > header > span
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .creation-model-summary-mark,
    .creation-model-option-mark,
    .creation-model-provider > header > span
) {
    border-color: #4a607d !important;
    background: #203047 !important;
    color: #d7e8ff !important;
    -webkit-text-fill-color: #d7e8ff !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .creation-model-provider,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .creation-model-provider {
    border-top-color: #3d506a !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .creation-model-option em,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .creation-model-option em {
    color: var(--studio-dark-action) !important;
    -webkit-text-fill-color: var(--studio-dark-action) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .creation-model-option:hover,
html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .creation-model-option.is-selected,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .creation-model-option:hover,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .creation-model-option.is-selected {
    border-color: #6ba8ff !important;
    background: #203b5d !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
) {
    border-color: #415873 !important;
    background: #151f2c !important;
    color: #a9ccff !important;
    -webkit-text-fill-color: #a9ccff !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
) :is(strong, span),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
) :is(strong, span) {
    color: #b8d4ff !important;
    -webkit-text-fill-color: #b8d4ff !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
) small,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
) small {
    color: #aebdd0 !important;
    -webkit-text-fill-color: #aebdd0 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
) :is(img, svg),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone,
    .upload-box
) :is(img, svg) {
    filter: brightness(0) saturate(100%) invert(68%) sepia(46%) saturate(1733%) hue-rotate(187deg) brightness(103%) contrast(101%) !important;
    opacity: 1 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone:hover,
    .detail-dropzone:focus-within,
    .upload-box:hover,
    .upload-box:focus-within
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-dropzone:hover,
    .detail-dropzone:focus-within,
    .upload-box:hover,
    .upload-box:focus-within
) {
    border-color: #79b3ff !important;
    background: #1b3048 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-media,
    .edit-source-stage,
    .edit-result-stage,
    .poster-preview,
    .audio-result-stage,
    .studio-preview-empty,
    .studio-gallery-stage,
    .studio-gallery-media
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-media,
    .edit-source-stage,
    .edit-result-stage,
    .poster-preview,
    .audio-result-stage,
    .studio-preview-empty,
    .studio-gallery-stage,
    .studio-gallery-media
) {
    border-color: #35475f !important;
    background: #121b27 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .studio-control-scroll :is(.detail-dropzone, .upload-box),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .studio-control-scroll :is(.detail-dropzone, .upload-box) {
    color: #a9ccff !important;
    -webkit-text-fill-color: #a9ccff !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .studio-control-scroll :is(.detail-dropzone, .upload-box) > :is(strong, span),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .studio-control-scroll :is(.detail-dropzone, .upload-box) > :is(strong, span) {
    color: #b8d4ff !important;
    -webkit-text-fill-color: #b8d4ff !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .studio-control-scroll :is(.detail-dropzone, .upload-box) > small,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .studio-control-scroll :is(.detail-dropzone, .upload-box) > small {
    color: #aebdd0 !important;
    -webkit-text-fill-color: #aebdd0 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace header[data-fuuvo-shared-topbar="1"] :is(.creation-topbar-title, .portal-topbar-title, #feature-shell-title),
body[data-ui-theme="dark"] #creation-app.studio-workspace header[data-fuuvo-shared-topbar="1"] :is(.creation-topbar-title, .portal-topbar-title, #feature-shell-title) {
    color: #dbe7f7 !important;
    -webkit-text-fill-color: #dbe7f7 !important;
}

/* Dark interaction states must live after the light studio rules. Keeping the
   full state set together prevents pale selected surfaces with pale text. */
html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
) {
    border-color: #34465e !important;
    background: #161e29 !important;
    color: #d1d9e5 !important;
    -webkit-text-fill-color: #d1d9e5 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
):is(:hover, :focus-visible),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
):is(:hover, :focus-visible) {
    border-color: #79b3ff !important;
    background: #223650 !important;
    color: #c5ddff !important;
    -webkit-text-fill-color: #c5ddff !important;
    box-shadow: 0 0 0 2px rgba(107, 168, 255, .12) !important;
    outline: none;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-option.active,
    .setting-option.active,
    .poster-option.active,
    .poster-style.active,
    .project-visual-option.active,
    .animate-motion-option.active,
    .studio-gallery-thumbnail[aria-pressed="true"]
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-option.active,
    .setting-option.active,
    .poster-option.active,
    .poster-style.active,
    .project-visual-option.active,
    .animate-motion-option.active,
    .studio-gallery-thumbnail[aria-pressed="true"]
) {
    border-color: #6ba8ff !important;
    background: #203b5d !important;
    color: #d7e8ff !important;
    -webkit-text-fill-color: #d7e8ff !important;
    box-shadow: inset 0 0 0 1px rgba(107, 168, 255, .32) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .poster-option,
    .project-visual-option,
    .animate-motion-option,
    .studio-gallery-thumbnail
):is(:hover, :focus-visible, .active, [aria-pressed="true"]) :is(strong, span),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .poster-option,
    .project-visual-option,
    .animate-motion-option,
    .studio-gallery-thumbnail
):is(:hover, :focus-visible, .active, [aria-pressed="true"]) :is(strong, span) {
    color: #d7e8ff !important;
    -webkit-text-fill-color: #d7e8ff !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .poster-option,
    .project-visual-option,
    .animate-motion-option,
    .studio-gallery-thumbnail
):is(:hover, :focus-visible, .active, [aria-pressed="true"]) small,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(
    .detail-option,
    .poster-option,
    .project-visual-option,
    .animate-motion-option,
    .studio-gallery-thumbnail
):is(:hover, :focus-visible, .active, [aria-pressed="true"]) small {
    color: #afc4df !important;
    -webkit-text-fill-color: #afc4df !important;
}

/* The legacy form selector contains input:not(...) inside :is(), which gives
   every grouped control input-level specificity. Scope state colors to their
   actual studio region so dark-mode interaction colors always win. */
html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(.studio-control-scroll, .studio-control-footer, .detail-preview-card) :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(.studio-control-scroll, .studio-control-footer, .detail-preview-card) :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
) {
    color: #d1d9e5 !important;
    -webkit-text-fill-color: #d1d9e5 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(.studio-control-scroll, .studio-control-footer, .detail-preview-card) :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
):is(:hover, :focus-visible),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(.studio-control-scroll, .studio-control-footer, .detail-preview-card) :is(
    .detail-option,
    .setting-option,
    .poster-option,
    .poster-style,
    .project-visual-option,
    .animate-motion-option,
    .animate-source,
    .creation-outline,
    .studio-gallery-thumbnail,
    .studio-gallery-direction
):is(:hover, :focus-visible) {
    color: #c5ddff !important;
    -webkit-text-fill-color: #c5ddff !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout :is(.studio-control-scroll, .studio-control-footer, .detail-preview-card) :is(
    .detail-option.active,
    .setting-option.active,
    .poster-option.active,
    .poster-style.active,
    .project-visual-option.active,
    .animate-motion-option.active,
    .studio-gallery-thumbnail[aria-pressed="true"]
),
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout :is(.studio-control-scroll, .studio-control-footer, .detail-preview-card) :is(
    .detail-option.active,
    .setting-option.active,
    .poster-option.active,
    .poster-style.active,
    .project-visual-option.active,
    .animate-motion-option.active,
    .studio-gallery-thumbnail[aria-pressed="true"]
) {
    color: #d7e8ff !important;
    -webkit-text-fill-color: #d7e8ff !important;
}

/* Horizontal tool rail: keep every creation entry discoverable on narrow
   screens and make the scroll affordance visible without adding extra chrome. */
html body #creation-app.studio-workspace .studio-mode-nav {
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 119, 255, .72) transparent;
    cursor: grab;
}

html body #creation-app.studio-workspace .studio-mode-nav::-webkit-scrollbar {
    display: block;
    width: 0;
    height: 3px;
}

html body #creation-app.studio-workspace .studio-mode-nav::-webkit-scrollbar-track {
    background: transparent;
}

html body #creation-app.studio-workspace .studio-mode-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(22, 119, 255, .72);
}

html body #creation-app.studio-workspace .studio-mode-nav.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

html body #creation-app.studio-workspace .studio-mode-nav .studio-mode-link {
    scroll-snap-align: center;
}

/* Reference artwork is authored at 16:9. Keep the entire image visible so
   typography, products and edge composition are never cropped by the stage. */
html body #creation-app.studio-workspace .studio-gallery-stage,
html body #creation-app.studio-workspace .studio-gallery-media {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
}

html body #creation-app.studio-workspace .studio-reference-asset {
    object-fit: contain !important;
    object-position: center;
    image-rendering: auto;
}

html body #creation-app.studio-workspace .studio-mode-nav::before,
html body #creation-app.studio-workspace .studio-mode-nav::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 3px;
    width: 28px;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

html body #creation-app.studio-workspace .studio-mode-nav::before {
    left: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}

html body #creation-app.studio-workspace .studio-mode-nav::after {
    right: 0;
    background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}

html body #creation-app.studio-workspace .studio-mode-nav[data-scrollable="true"][data-scroll-start="false"]::before,
html body #creation-app.studio-workspace .studio-mode-nav[data-scrollable="true"][data-scroll-end="false"]::after {
    opacity: 1;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-mode-nav::before,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-mode-nav::before {
    background: linear-gradient(90deg, #1a222e 0%, rgba(26,34,46,0) 100%);
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-mode-nav::after,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-mode-nav::after {
    background: linear-gradient(270deg, #1a222e 0%, rgba(26,34,46,0) 100%);
}

/* Keep every desktop tool inside the viewport. The shared creation topbar is
   84px tall on desktop, so the previous 64px subtraction made the work area
   20px too tall and pushed controls below the visible page. */
@media (min-width: 801px) {
    html:has(body > #creation-app.studio-workspace),
    html body:has(> #creation-app.studio-workspace) {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html body #creation-app.studio-workspace {
        --studio-control-height: calc(100dvh - 84px);
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html body #creation-app.studio-workspace .creation-workspace {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    html body #creation-app.studio-workspace .creation-main {
        flex: 1 1 auto !important;
        height: auto;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html body #creation-app.studio-workspace .studio-layout {
        align-items: stretch;
        height: var(--studio-control-height, calc(100dvh - 84px));
        min-height: 0;
        overflow: hidden;
    }

    html body #creation-app.studio-workspace .studio-controls,
    html body #creation-app.studio-workspace .studio-layout .detail-preview-card {
        height: var(--studio-control-height, calc(100dvh - 84px));
        min-height: 0;
        max-height: none;
    }

    html body #creation-app.studio-workspace .studio-control-scroll,
    html body #creation-app.studio-workspace .studio-layout .detail-preview-card {
        overscroll-behavior: contain;
    }

    html body #creation-app.studio-workspace .studio-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    html body #creation-app.studio-workspace .studio-control-footer {
        min-height: 76px;
        overflow-y: auto;
        box-sizing: border-box;
    }

    html body #creation-app.studio-workspace .studio-control-footer .animate-generation-actions {
        margin: 0;
    }

    html body #creation-app.studio-workspace .creation-main > .fuuvo-ai-disclaimer {
        display: none !important;
    }
}

/* Empty result states use different stage components, but should all read as
   one centred preview experience. */
html body #creation-app.studio-workspace .detail-preview-card :is(
    .detail-media.is-empty,
    .edit-result-stage.is-empty,
    .poster-preview.is-empty,
    .audio-result-stage.is-empty
) {
    align-items: center;
    justify-content: center;
    text-align: center;
}

html body #creation-app[data-creation-page="animate-photo"].studio-workspace
.detail-preview-card > .detail-media.is-empty {
    align-items: center !important;
    justify-content: center !important;
}

/* Brand visual studio: compact controls beside a real preview canvas. */
@media (min-width: 801px) {
    html body #creation-app[data-creation-page="project"].studio-workspace .studio-layout {
        grid-template-columns: minmax(360px, 410px) minmax(0, 1fr);
    }
}

html body #creation-app[data-creation-page="project"].studio-workspace .studio-control-scroll {
    padding: 14px 16px 20px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .studio-control-scroll > .creation-model-field {
    margin-bottom: 12px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-divider {
    display: none;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-section-head {
    gap: 9px;
    margin: 16px 0 10px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-section-head > span {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 7px;
    font-size: 11px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-section-head h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-section-head p {
    display: none;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-field-grid {
    gap: 9px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-field {
    gap: 6px;
    margin-top: 10px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .studio-control-scroll .project-field > span:first-child,
html body #creation-app[data-creation-page="project"].studio-workspace .studio-control-scroll > .detail-label {
    margin-top: 10px;
    margin-bottom: 6px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-field .detail-textarea-wrap textarea {
    min-height: 98px;
    max-height: 150px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-visual-type-grid {
    gap: 7px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-visual-option {
    min-height: 56px;
    padding: 8px;
    gap: 8px;
    border-radius: 8px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-visual-option > img {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-visual-option strong {
    font-size: 12px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-assets-dropzone {
    min-height: 84px;
    padding: 11px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-assets-dropzone > img {
    width: 25px;
    height: 25px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-rights-note {
    margin: 7px 0 0;
}

html body #creation-app[data-creation-page="project"].studio-workspace .studio-layout .project-ai-brief-card {
    align-items: stretch;
    gap: 18px;
    padding: clamp(22px, 3vw, 40px);
    background: #fff;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(100%, 980px);
    margin: 0 auto;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-brief-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin: 0;
    place-items: center;
    border: 1px solid #dce9fa;
    border-radius: 8px;
    background: #edf5ff;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-brief-icon img {
    width: 27px;
    height: 27px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading h2 {
    margin: 0;
    color: #172b46;
    font-size: 17px;
    line-height: 1.35;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading p {
    margin: 3px 0 0;
    color: #728197;
    font-size: 12px;
    line-height: 1.45;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #d7e7fb;
    border-radius: 8px;
    background: #f4f9ff;
    color: #2168bd;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-live-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27a86b;
    box-shadow: 0 0 0 3px rgba(39, 168, 107, .13);
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-canvas {
    position: relative;
    width: min(100%, 980px);
    aspect-ratio: 16 / 10;
    max-height: min(54vh, 610px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    background: #eef2f7;
    box-shadow: 0 16px 42px rgba(25, 48, 78, .12);
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-canvas > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-canvas::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7, 18, 34, .72) 0%, rgba(7, 18, 34, .3) 43%, transparent 68%);
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-canvas.is-ready::after,
html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-canvas.is-ready :is(.project-preview-overlay, .project-preview-meta) {
    display: none;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 28px;
    background: rgba(246, 249, 253, .94);
    color: #213853;
    text-align: center;
    backdrop-filter: blur(10px);
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation[hidden] {
    display: none !important;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-spinner {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border: 3px solid #cfe1f8;
    border-top-color: #1677ff;
    border-radius: 50%;
    animation: project-preview-spin .8s linear infinite;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation strong {
    color: #203650;
    font-size: 16px;
    line-height: 1.4;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation p {
    max-width: 420px;
    margin: 7px 0 0;
    color: #6b7d94;
    font-size: 12px;
    line-height: 1.6;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation[data-phase="failed"] .project-preview-spinner {
    position: relative;
    border-color: #f0a3a8;
    animation: none;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation[data-phase="failed"] .project-preview-spinner::after {
    position: absolute;
    inset: 0;
    display: grid;
    content: "!";
    place-items: center;
    color: #c43e49;
    font-size: 18px;
    font-weight: 800;
}

@keyframes project-preview-spin {
    to { transform: rotate(360deg); }
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-overlay {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: clamp(22px, 5vw, 64px);
    display: grid;
    max-width: min(54%, 470px);
    transform: translateY(-50%);
    color: #fff;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-type {
    width: max-content;
    max-width: 100%;
    margin-bottom: 12px;
    padding-bottom: 7px;
    border-bottom: 2px solid currentColor;
    color: #b9d8ff;
    font-size: 11px;
    font-weight: 750;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-overlay strong {
    overflow-wrap: anywhere;
    color: #fff;
    font-size: clamp(27px, 4vw, 54px);
    font-weight: 720;
    line-height: 1.08;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-overlay p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(12px, 1.5vw, 17px);
    line-height: 1.55;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-meta {
    position: absolute;
    z-index: 1;
    right: 18px;
    bottom: 16px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 7px;
    background: rgba(12, 25, 43, .62);
    color: #fff;
    font-size: 10px;
    backdrop-filter: blur(10px);
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-meta b {
    color: inherit;
    font-size: inherit;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-meta [data-project-color-swatch] {
    width: 11px;
    height: 11px;
    flex-basis: 11px;
    border-color: rgba(255, 255, 255, .48);
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: min(100%, 980px);
    margin: -6px auto 0;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-inline-actions[hidden] {
    display: none !important;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-inline-actions > * {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-size: 12px;
    text-decoration: none;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-inline-actions svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 16px 18px 6px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #f8fafc;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary-head h3 {
    margin: 0;
    color: #203550;
    font-size: 14px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary-head > span {
    color: #718198;
    font-size: 10px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief > div {
    min-width: 0;
    padding: 10px 0;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    border-top: 1px solid #e4eaf1;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief > .project-brief-wide {
    grid-column: 1 / -1;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief dt {
    color: #76869a;
    font-size: 11px;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief dd {
    color: #2b405b;
    font-size: 11px;
    line-height: 1.5;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-brief-card .project-ai-process {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: min(100%, 980px);
    margin: 0 auto;
    padding: 7px 11px;
    border: 1px solid #dce7e2;
    border-radius: 8px;
    background: #f4faf7;
    color: #496658;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-process > span {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border-radius: 50%;
    background: #e9f7ef;
    color: #22875a;
    font-size: 11px;
    font-weight: 800;
}

html body #creation-app[data-creation-page="project"].studio-workspace .project-ai-process p {
    margin: 0;
    color: inherit;
    font-size: 11px;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .studio-layout .project-ai-brief-card,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .studio-layout .project-ai-brief-card {
    background: #111821 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading h2,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading h2 {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading p,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading p {
    color: #b9c5d5 !important;
    -webkit-text-fill-color: #b9c5d5 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-ai-brief-card .project-ai-process,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-ai-brief-card .project-ai-process {
    border: 1px solid #315747 !important;
    background: #162a23 !important;
    color: #bfe3d2 !important;
    -webkit-text-fill-color: #bfe3d2 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-ai-brief-card .project-ai-process p,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-ai-brief-card .project-ai-process p {
    color: #bfe3d2 !important;
    -webkit-text-fill-color: #bfe3d2 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-live-status,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-live-status {
    border-color: #395779 !important;
    background: #192c42 !important;
    color: #b8d7ff !important;
    -webkit-text-fill-color: #b8d7ff !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation {
    background: rgba(17, 24, 33, .94) !important;
    color: #eef4fc !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation strong,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation strong {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation p,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-preview-generation p {
    color: #c1ccda !important;
    -webkit-text-fill-color: #c1ccda !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary {
    border-color: #344357 !important;
    background: #171f2a !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary-head h3,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary-head h3,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief dd,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-live-brief dd {
    color: #edf3fb !important;
    -webkit-text-fill-color: #edf3fb !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary-head > span,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary-head > span,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief dt,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-live-brief dt {
    color: #b9c5d5 !important;
    -webkit-text-fill-color: #b9c5d5 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief > div,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-live-brief > div {
    border-top-color: #344357 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="project"].studio-workspace .project-ai-process > span,
body[data-ui-theme="dark"] #creation-app[data-creation-page="project"].studio-workspace .project-ai-process > span {
    background: #173c31 !important;
    color: #7ee2b2 !important;
    -webkit-text-fill-color: #7ee2b2 !important;
}

@media (max-width: 1040px) {
    html body #creation-app[data-creation-page="project"].studio-workspace .project-live-brief {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    html body #creation-app[data-creation-page="project"].studio-workspace .studio-controls {
        height: auto;
        min-height: 0;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .studio-layout .project-ai-brief-card {
        gap: 14px;
        min-height: 0;
        padding: 20px 14px 28px;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-canvas {
        max-height: none;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-overlay {
        left: 20px;
        max-width: 60%;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-overlay strong {
        font-size: clamp(24px, 8vw, 38px);
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-inline-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: -4px;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-inline-actions > * {
        min-width: 0;
        padding-inline: 8px;
    }
}

@media (max-width: 480px) {
    html body #creation-app[data-creation-page="project"].studio-workspace .project-field-grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-header {
        align-items: flex-start;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-live-status {
        padding-inline: 8px;
        font-size: 10px;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-heading p {
        display: none;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-overlay p {
        margin-top: 7px;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-meta {
        right: 10px;
        bottom: 9px;
        left: 10px;
    }

    html body #creation-app[data-creation-page="project"].studio-workspace .project-brief-summary {
        padding: 14px 14px 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #creation-app[data-creation-page="project"].studio-workspace .project-preview-spinner {
        animation-duration: 1.8s;
    }
}

/*
 * Final theme pass
 *
 * This file contains a few intentionally high-specificity layout rules above.
 * Keep the actual palette at the end so those layout rules cannot accidentally
 * force the light theme to look dark or leave white panels inside dark mode.
 */

/* Light mode: the creation centre uses a quiet, bright workspace. */
html:not([data-ui-theme="dark"]) body #creation-app,
body:not([data-ui-theme="dark"]) #creation-app,
html:not([data-ui-theme="dark"]) body #creation-app > .creation-workspace,
body:not([data-ui-theme="dark"]) #creation-app > .creation-workspace,
html:not([data-ui-theme="dark"]) body #creation-app .creation-workspace,
body:not([data-ui-theme="dark"]) #creation-app .creation-workspace,
html:not([data-ui-theme="dark"]) body #creation-app .creation-main,
body:not([data-ui-theme="dark"]) #creation-app .creation-main {
    background: #f6f8fc !important;
    color: #1e3047 !important;
}

html:not([data-ui-theme="dark"]) body:has(> #creation-app),
body:not([data-ui-theme="dark"]):has(> #creation-app) {
    background: #f6f8fc !important;
    color: #1e3047 !important;
}

html:not([data-ui-theme="dark"]) body #creation-app header[data-fuuvo-shared-topbar="1"],
body:not([data-ui-theme="dark"]) #creation-app header[data-fuuvo-shared-topbar="1"],
html:not([data-ui-theme="dark"]) body #creation-app .creation-topbar,
body:not([data-ui-theme="dark"]) #creation-app .creation-topbar {
    background: #ffffff !important;
    border-bottom-color: #dfe7f1 !important;
    color: #1e3047 !important;
    box-shadow: 0 1px 0 rgba(31, 54, 84, .04) !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-main :is(h1,h2,h3,h4,p,span,strong,small,label,a),
body:not([data-ui-theme="dark"]) #creation-app .creation-main :is(h1,h2,h3,h4,p,span,strong,small,label,a) {
    -webkit-text-fill-color: currentColor !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-heading h1,
body:not([data-ui-theme="dark"]) #creation-app .creation-heading h1,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-hero h1,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-hero h1,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-section-head h2,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-section-head h2 {
    color: #172b43 !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-heading p,
body:not([data-ui-theme="dark"]) #creation-app .creation-heading p,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-hero p,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-hero p,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-section-head p,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-section-head p,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-disclaimer,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-disclaimer {
    color: #64748b !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-categories,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-categories,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-prompts a,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-prompts a {
    border-color: #dce5ef !important;
    background: #ffffff !important;
    color: #52657d !important;
    box-shadow: 0 8px 24px rgba(34, 58, 90, .06) !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-categories a,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-categories a {
    color: #52657d !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-categories a:hover,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-categories a:hover,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-prompts a:hover,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-prompts a:hover {
    border-color: #a9c8f4 !important;
    background: #f2f7ff !important;
    color: #1769c2 !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-categories a.active,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-categories a.active {
    border-color: #8ab8f1 !important;
    background: #eaf3ff !important;
    color: #0d65c0 !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-history,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-history {
    border-color: #d5e1ef !important;
    background: #ffffff !important;
    color: #36516f !important;
    box-shadow: 0 8px 24px rgba(34, 58, 90, .06) !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-history:hover,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-history:hover {
    border-color: #9bbff0 !important;
    background: #f1f6ff !important;
    color: #1769c2 !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-inspiration,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-inspiration {
    border-top-color: #dce5ef !important;
}

html:not([data-ui-theme="dark"]) body #creation-app .creation-home-section-head > a,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-section-head > a,
html:not([data-ui-theme="dark"]) body #creation-app .creation-home-disclaimer a,
body:not([data-ui-theme="dark"]) #creation-app .creation-home-disclaimer a {
    color: #176dcc !important;
}

html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace .studio-mode-nav,
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .studio-mode-nav,
html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace .studio-controls,
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .studio-controls,
html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace .studio-control-footer,
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .studio-control-footer,
html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace .studio-layout .detail-preview-card,
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .studio-layout .detail-preview-card,
html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace .studio-composer,
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace .studio-composer,
html:not([data-ui-theme="dark"]) body #creation-app.studio-layout .creation-detail-card,
body:not([data-ui-theme="dark"]) #creation-app.studio-layout .creation-detail-card {
    background: #ffffff !important;
    border-color: #dce5ef !important;
    color: #1e3047 !important;
    box-shadow: 0 10px 28px rgba(34, 58, 90, .06) !important;
}

html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace :is(h2,h3,label,.detail-label,.setting-label,.studio-parameter),
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace :is(h2,h3,label,.detail-label,.setting-label,.studio-parameter) {
    color: #1e3047 !important;
}

html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace :is(textarea,select,input:not([type="checkbox"]):not([type="radio"])),
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace :is(textarea,select,input:not([type="checkbox"]):not([type="radio"])) {
    background: #ffffff !important;
    border-color: #d7e1ed !important;
    color: #1e3047 !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace :is(.detail-option,.setting-option,.detail-advanced,.detail-dropzone,.upload-box),
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace :is(.detail-option,.setting-option,.detail-advanced,.detail-dropzone,.upload-box) {
    background: #f8fbff !important;
    border-color: #d7e3f1 !important;
    color: #36516f !important;
}

html:not([data-ui-theme="dark"]) body #creation-app.studio-workspace :is(.detail-option.active,.setting-option.active),
body:not([data-ui-theme="dark"]) #creation-app.studio-workspace :is(.detail-option.active,.setting-option.active) {
    background: #eaf3ff !important;
    border-color: #8bb9ee !important;
    color: #176dcc !important;
}

/* Dark mode: all creation surfaces resolve to the same deep palette. */
html[data-ui-theme="dark"] body #creation-app,
body[data-ui-theme="dark"] #creation-app,
html[data-ui-theme="dark"] body #creation-app > .creation-workspace,
body[data-ui-theme="dark"] #creation-app > .creation-workspace,
html[data-ui-theme="dark"] body #creation-app .creation-workspace,
body[data-ui-theme="dark"] #creation-app .creation-workspace,
html[data-ui-theme="dark"] body #creation-app .creation-main,
body[data-ui-theme="dark"] #creation-app .creation-main {
    background: #0b111c !important;
    color: #f5f8fc !important;
}

html[data-ui-theme="dark"] body:has(> #creation-app),
body[data-ui-theme="dark"]:has(> #creation-app) {
    background: #0b111c !important;
    color: #f5f8fc !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-main :is(h1,h2,h3,h4,p,span,strong,small,label,a),
body[data-ui-theme="dark"] #creation-app .creation-main :is(h1,h2,h3,h4,p,span,strong,small,label,a) {
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-heading h1,
body[data-ui-theme="dark"] #creation-app .creation-heading h1,
html[data-ui-theme="dark"] body #creation-app .creation-home-hero h1,
body[data-ui-theme="dark"] #creation-app .creation-home-hero h1,
html[data-ui-theme="dark"] body #creation-app .creation-home-section-head h2,
body[data-ui-theme="dark"] #creation-app .creation-home-section-head h2 {
    color: #f5f8fc !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-home-categories,
body[data-ui-theme="dark"] #creation-app .creation-home-categories,
html[data-ui-theme="dark"] body #creation-app .creation-home-prompts a,
body[data-ui-theme="dark"] #creation-app .creation-home-prompts a {
    border-color: #2b394c !important;
    background: #121a26 !important;
    color: #c9d5e5 !important;
    box-shadow: none !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-home-categories a,
body[data-ui-theme="dark"] #creation-app .creation-home-categories a {
    color: #aebed2 !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-home-categories a:hover,
body[data-ui-theme="dark"] #creation-app .creation-home-categories a:hover,
html[data-ui-theme="dark"] body #creation-app .creation-home-prompts a:hover,
body[data-ui-theme="dark"] #creation-app .creation-home-prompts a:hover {
    border-color: #537fb9 !important;
    background: #1b2a3d !important;
    color: #eef6ff !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-home-categories a.active,
body[data-ui-theme="dark"] #creation-app .creation-home-categories a.active {
    border-color: #5b98e8 !important;
    background: #1d4776 !important;
    color: #ffffff !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-home-history,
body[data-ui-theme="dark"] #creation-app .creation-home-history {
    border-color: #334357 !important;
    background: #171f2a !important;
    color: #d7e1ee !important;
    box-shadow: none !important;
}

html[data-ui-theme="dark"] body #creation-app .creation-home-inspiration,
body[data-ui-theme="dark"] #creation-app .creation-home-inspiration {
    border-top-color: #2a3749 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-mode-nav,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-mode-nav,
html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-controls,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-controls,
html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-control-footer,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-control-footer,
html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-layout .detail-preview-card,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-layout .detail-preview-card,
html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-composer,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-composer,
html[data-ui-theme="dark"] body #creation-app.studio-layout .creation-detail-card,
body[data-ui-theme="dark"] #creation-app.studio-layout .creation-detail-card {
    background: #1a222e !important;
    border-color: #344357 !important;
    color: #eef2f7 !important;
    box-shadow: none !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace :is(h2,h3,label,.detail-label,.setting-label,.studio-parameter),
body[data-ui-theme="dark"] #creation-app.studio-workspace :is(h2,h3,label,.detail-label,.setting-label,.studio-parameter) {
    color: #eef2f7 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace :is(textarea,select,input:not([type="checkbox"]):not([type="radio"])),
body[data-ui-theme="dark"] #creation-app.studio-workspace :is(textarea,select,input:not([type="checkbox"]):not([type="radio"])) {
    background: #161e29 !important;
    border-color: #344357 !important;
    color: #eef2f7 !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace :is(.detail-option,.setting-option,.detail-advanced,.detail-dropzone,.upload-box),
body[data-ui-theme="dark"] #creation-app.studio-workspace :is(.detail-option,.setting-option,.detail-advanced,.detail-dropzone,.upload-box) {
    background: #161e29 !important;
    border-color: #344357 !important;
    color: #cbd5e1 !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace :is(.detail-option.active,.setting-option.active),
body[data-ui-theme="dark"] #creation-app.studio-workspace :is(.detail-option.active,.setting-option.active) {
    background: #203c62 !important;
    border-color: #6ba8ff !important;
    color: #d7e8ff !important;
}

/* Keep the reference and its picker visible together on desktop. */
@media (min-width: 801px) {
    html body #creation-app.studio-workspace .studio-gallery-stage,
    html body #creation-app.studio-workspace .studio-gallery-media {
        height: clamp(220px, 34vh, 360px) !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }

    html body #creation-app.studio-workspace .studio-gallery-action-status {
        margin-left: 12px;
        white-space: nowrap;
    }
}

@media (max-width: 800px) {
    html body #creation-app.studio-workspace .studio-gallery-stage,
    html body #creation-app.studio-workspace .studio-gallery-media {
        height: 230px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }
}

/* The shared account launcher moves to the lower-right corner on phones.
   Creation pages already use that area for their sticky generation action,
   so keep the launcher in the mobile sidebar instead of covering the form. */
@media (max-width: 539px) {
    html body #creation-app.studio-workspace [data-fuuvo-account-portal="1"] {
        display: none !important;
    }

    html body #creation-app.studio-workspace .studio-control-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}

/* Inspiration gallery polish: make the reference artwork feel like the
   primary visual, and give the selectable idea cards enough breathing room. */
html body #creation-app.studio-workspace .studio-gallery {
    padding: 0 clamp(14px, 2vw, 28px) 4px !important;
    box-sizing: border-box;
}

html body #creation-app.studio-workspace .studio-gallery-heading {
    padding-inline: 2px;
    margin-bottom: clamp(16px, 2.2vh, 24px) !important;
}

html body #creation-app.studio-workspace .studio-gallery-heading h2 {
    letter-spacing: -.02em;
}

html body #creation-app.studio-workspace .studio-gallery-stage {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0)),
        #f2f6fb;
    box-shadow: inset 0 0 0 1px rgba(216, 225, 236, .72);
}

html body #creation-app.studio-workspace .studio-gallery-media,
html body #creation-app.studio-workspace .studio-reference-asset {
    border-radius: inherit;
}

html body #creation-app.studio-workspace .studio-gallery-thumbnails {
    width: 100%;
    box-sizing: border-box;
    gap: 12px 14px !important;
    margin-top: 18px !important;
    padding: 0 2px !important;
}

html body #creation-app.studio-workspace .studio-gallery-thumbnail {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    min-height: 84px;
    height: auto !important;
    padding: 12px 14px !important;
    gap: 13px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fff 0%, #f7faff 100%) !important;
    box-shadow: 0 1px 2px rgba(21, 36, 58, .04);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

html body #creation-app.studio-workspace .studio-gallery-thumbnail:hover {
    border-color: #bfd1e7 !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(37, 91, 162, .08);
    transform: translateY(-1px);
}

html body #creation-app.studio-workspace .studio-gallery-thumbnail[aria-pressed="true"] {
    border-color: #2f80ff !important;
    background: linear-gradient(180deg, #f9fcff 0%, #eef6ff 100%) !important;
    box-shadow: 0 0 0 1px rgba(47, 128, 255, .16), 0 12px 26px rgba(47, 128, 255, .12);
}

html body #creation-app.studio-workspace .studio-gallery-thumbnail img {
    width: 62px !important;
    height: 56px !important;
    border-radius: 11px !important;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
}

html body #creation-app.studio-workspace .studio-reference-card-copy {
    min-width: 0;
    gap: 4px !important;
    line-height: 1.25;
}

html body #creation-app.studio-workspace .studio-reference-card-copy strong {
    color: #1f2d3d;
    font-size: 14px !important;
    font-weight: 760;
}

html body #creation-app.studio-workspace .studio-reference-card-copy small {
    font-size: 12px !important;
}

html body #creation-app.studio-workspace .studio-reference-card-action {
    margin-top: 1px;
}

html body #creation-app.studio-workspace .studio-gallery-nav {
    padding: 12px 2px 0;
}

html body #creation-app.studio-workspace .studio-gallery-direction {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

@media (min-width: 801px) {
    html body #creation-app.studio-workspace .studio-gallery-stage,
    html body #creation-app.studio-workspace .studio-gallery-media {
        height: clamp(300px, 42vh, 460px) !important;
        min-height: 300px !important;
        aspect-ratio: auto !important;
    }
}

@media (max-width: 1080px) {
    html body #creation-app.studio-workspace .studio-gallery {
        padding-inline: 12px !important;
    }

    html body #creation-app.studio-workspace .studio-gallery-thumbnail {
        grid-template-columns: 56px minmax(0, 1fr);
        min-height: 78px;
        padding: 10px 12px !important;
    }

    html body #creation-app.studio-workspace .studio-gallery-thumbnail img {
        width: 56px !important;
        height: 52px !important;
    }
}

@media (max-width: 800px) {
    html body #creation-app.studio-workspace .studio-gallery {
        padding-inline: 0 !important;
    }

    html body #creation-app.studio-workspace .studio-gallery-stage,
    html body #creation-app.studio-workspace .studio-gallery-media {
        height: clamp(220px, 38vh, 320px) !important;
        min-height: 220px !important;
        aspect-ratio: auto !important;
    }

    html body #creation-app.studio-workspace .studio-gallery-thumbnails {
        gap: 10px !important;
        padding-inline: 1px !important;
    }

    html body #creation-app.studio-workspace .studio-gallery-thumbnail {
        min-height: 76px;
    }
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-gallery-stage,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-gallery-stage {
    background: #101923;
    box-shadow: inset 0 0 0 1px rgba(86, 110, 139, .44);
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-gallery-thumbnail,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-gallery-thumbnail {
    border-color: #344357 !important;
    background: linear-gradient(180deg, #1c2734 0%, #17212d 100%) !important;
    color: #eef2f7;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-gallery-thumbnail:hover,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-gallery-thumbnail:hover {
    border-color: #5d82ae !important;
    background: #202e3d !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-gallery-thumbnail[aria-pressed="true"],
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-gallery-thumbnail[aria-pressed="true"] {
    border-color: #6ba8ff !important;
    background: linear-gradient(180deg, #203c62 0%, #1c3453 100%) !important;
}

html[data-ui-theme="dark"] body #creation-app.studio-workspace .studio-reference-card-copy strong,
body[data-ui-theme="dark"] #creation-app.studio-workspace .studio-reference-card-copy strong {
    color: #eef2f7;
}

/* Keep the video prompt consistent with the image prompt box. Without this
   explicit box, the mobile composer makes placeholder text flow into the
   model controls below it. */
html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer {
    flex: 0 0 auto !important;
    min-height: 270px !important;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-wrap {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-box {
    flex: none !important;
    width: 100% !important;
    min-height: 144px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 17px 18px 31px !important;
    border: 1px solid #bdc9da !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--creation-ink) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-box:focus {
    border-color: var(--creation-blue) !important;
    box-shadow: 0 0 0 3px #edf5ff !important;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-box::placeholder {
    color: #adb9c9 !important;
    opacity: 1;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-wrap .prompt-counter {
    position: relative !important;
    align-self: auto !important;
    margin: -27px 17px 0 !important;
    padding: 0 !important;
    color: #7788a0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: right;
    pointer-events: none;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-box,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-box {
    border-color: #3d506a !important;
    background: #172437 !important;
    color: #eef2f7 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-box::placeholder,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-composer .video-prompt-box::placeholder {
    color: #b8c4d4 !important;
}

/* The image studio shares its bilingual inspiration catalogue with mobile. */
html body #creation-app[data-creation-page="image"] .studio-image-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

html body #creation-app[data-creation-page="image"] .studio-image-filter {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid #dbe5f1;
    border-radius: 999px;
    background: #fff;
    color: #52657b;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

html body #creation-app[data-creation-page="image"] .studio-image-filter:is(:hover, .active) {
    border-color: #88b5f1;
    background: #eef6ff;
    color: #246ac6;
}

html body #creation-app[data-creation-page="image"] .studio-image-filter:focus-visible {
    outline: 2px solid #2f80ff;
    outline-offset: 3px;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-details {
    display: grid;
    gap: 9px;
    padding: 16px 2px 0;
    color: var(--creation-ink, #1f2d3d);
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-details :is(h3, p) {
    margin: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-details :is(p, summary) {
    font-size: 13px;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-prompt summary {
    cursor: pointer;
    color: var(--creation-blue, #2865b5);
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-prompt p {
    margin-top: 8px;
    white-space: pre-wrap;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-use {
    justify-self: start;
    margin-top: 4px;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-replacement {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-replacement p {
    width: 100%;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-error {
    color: #bf3939;
}

html body #creation-app[data-creation-page="image"] .studio-image-applied-template {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.6;
}

html body #creation-app[data-creation-page="image"] .studio-image-applied-template span {
    flex: 1 1 200px;
    overflow-wrap: anywhere;
}

html body #creation-app[data-creation-page="image"] .studio-image-applied-template .creation-outline {
    padding: 6px 9px;
    font-size: 12px;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspirations [hidden],
html body #creation-app[data-creation-page="image"] .studio-image-applied-template[hidden] {
    display: none !important;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspiration-empty {
    display: grid;
    place-content: center;
    height: 100%;
    margin: 0;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspirations .studio-gallery-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspirations .studio-gallery-counter {
    position: static;
    grid-column: 2;
    grid-row: 1;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspirations .studio-gallery-action-status {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
}

html body #creation-app[data-creation-page="image"] .studio-image-inspirations .studio-gallery-action-status:empty {
    display: none;
}

html body #creation-app[data-creation-page="image"].studio-workspace .studio-composer {
    flex: 0 0 auto;
    min-height: 260px;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid[hidden] {
    display: none !important;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card {
    width: 100%;
    min-width: 0;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card img {
    aspect-ratio: 1;
    max-height: 100px;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card-copy {
    padding: 6px;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card-copy :is(p, small) {
    font-size: 10px;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card-state {
    max-width: calc(100% - 8px);
    left: 4px;
    bottom: 4px;
    padding: 0 4px;
    font-size: 10px;
}

html body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card-remove {
    top: 4px;
    right: 4px;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card,
body[data-ui-theme="dark"] #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card {
    background: #172437 !important;
    border-color: #3d506a !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card-copy :is(p, small),
body[data-ui-theme="dark"] #creation-app[data-creation-page="image"] #reference-preview-grid .reference-card-copy :is(p, small) {
    color: #d7e8ff !important;
    -webkit-text-fill-color: #d7e8ff !important;
}

html:is([data-ui-theme="dark"]) body #creation-app[data-creation-page="image"] .studio-image-filter,
body[data-ui-theme="dark"] #creation-app[data-creation-page="image"] .studio-image-filter {
    border-color: #344357;
    background: #17212d;
    color: #e0e8f2;
}

html:is([data-ui-theme="dark"]) body #creation-app[data-creation-page="image"] .studio-image-filter:is(:hover, .active),
body[data-ui-theme="dark"] #creation-app[data-creation-page="image"] .studio-image-filter:is(:hover, .active) {
    border-color: #6ba8ff;
    background: #203c62;
    color: #d7e8ff;
}

/* Desktop video templates use the same catalogue and categories as mobile. */
html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-counter {
    position: static;
    grid-column: 2;
    grid-row: 1;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-action-status {
    grid-column: 1 / -1;
    margin: 0;
    white-space: normal;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-action-status:empty {
    display: none;
}

html body #creation-app[data-creation-page="video"] .studio-video-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

html body #creation-app[data-creation-page="video"] .studio-video-filter {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #d9e4f1;
    border-radius: 18px;
    background: #f6f9fe;
    color: #54677e;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
}

html body #creation-app[data-creation-page="video"] .studio-video-filter:is(:hover, .active) {
    border-color: #76a9f4;
    background: #eaf3ff;
    color: #166bdb;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-preview {
    display: grid;
    grid-template-columns: minmax(140px, .85fr) minmax(0, 1.15fr);
    gap: 20px;
    align-items: start;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-stage {
    height: clamp(260px, 43vh, 410px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-media {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-reference-asset {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    background: #101722;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-details {
    display: grid;
    gap: 10px;
    min-width: 0;
    align-content: start;
    font-size: 13px;
    line-height: 1.6;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-details :is(h3, p) {
    margin: 0;
    overflow-wrap: anywhere;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-details h3 {
    font-size: 20px;
    line-height: 1.3;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-details .studio-gallery-caption {
    display: block;
    padding: 0;
    text-align: left;
    font-size: 12px;
    color: #738196;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-requirement {
    padding: 10px 12px;
    border-radius: 10px;
    background: #edf5ff;
    color: #315b90;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-prompt summary {
    cursor: pointer;
    font-weight: 600;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-prompt p {
    margin-top: 8px;
    white-space: pre-wrap;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-use {
    justify-self: start;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-replacement {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-replacement p {
    width: 100%;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-error {
    color: #bd3939;
}

html body #creation-app[data-creation-page="video"] .studio-video-template-empty {
    display: grid;
    place-content: center;
    height: 100%;
    margin: 0;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-thumbnail {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px !important;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-thumbnail img {
    width: 44px !important;
    height: 64px !important;
    object-fit: cover;
}

html body #creation-app[data-creation-page="video"] .studio-video-inspirations [hidden] {
    display: none !important;
}

@media (min-width: 921px) and (max-width: 1180px) {
    html body #creation-app[data-creation-page="video"] .studio-video-template-preview {
        grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
        gap: 14px;
    }

    html body #creation-app[data-creation-page="video"] .studio-video-inspirations .studio-gallery-thumbnails {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

html:is([data-ui-theme="dark"]) body #creation-app[data-creation-page="video"] .studio-video-filter,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"] .studio-video-filter {
    border-color: #344357;
    background: #17212d;
    color: #e0e8f2;
}

html:is([data-ui-theme="dark"]) body #creation-app[data-creation-page="video"] .studio-video-filter:is(:hover, .active),
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"] .studio-video-filter:is(:hover, .active) {
    border-color: #6ba8ff;
    background: #203c62;
    color: #d7e8ff;
}

html:is([data-ui-theme="dark"]) body #creation-app[data-creation-page="video"] .studio-video-template-requirement,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"] .studio-video-template-requirement {
    background: #20354e;
    color: #d7e8ff;
}
#creation-app .studio-result-image.studio-result-image-error { display: none; }

/* Runtime DOM compatibility for the video catalogue card/dialog renderer. */
html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: #18283c;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 5px #0008;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-copy small {
    display: block;
    margin-top: 7px;
    color: #f1f5fa;
    font-size: 11px;
    line-height: 1.3;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    background: #16233566;
    color: #fff;
    padding-left: 2px;
    font-size: 13px;
    line-height: 1;
    backdrop-filter: blur(10px);
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-use {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 4;
    min-height: 40px;
    border: 1px solid #ffffffb8;
    border-radius: 10px;
    background: #fffffff2;
    color: #213b5c;
    font-size: 11px;
    font-weight: 650;
    box-shadow: 0 3px 12px #07132920;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-use:hover {
    background: #fff;
    color: #086dff;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-open {
    padding-bottom: 65px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-dialog {
    position: fixed;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-shell {
    display: flex;
    flex-direction: column;
    min-height: min(650px, calc(100dvh - 48px));
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-header {
    position: relative;
    flex: 0 0 auto;
    padding: 24px 30px 18px;
    border-bottom: 1px solid #e3ebf5;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    flex: 1 1 auto;
    min-height: 0;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-media {
    min-height: 0;
    height: min(560px, calc(100dvh - 150px));
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    padding: 26px 30px 26px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-meta {
    display: block;
    margin: 0 0 18px;
    color: #6f85a3;
    font-size: 11px;
    line-height: 1.5;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-requirement {
    margin: 16px 0 0;
    padding: 11px 13px;
    border: 1px solid #d7e6fa;
    border-radius: 10px;
    background: #edf5ff;
    color: #315b90;
    font-size: 12px;
    line-height: 1.6;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt {
    margin-top: 18px;
    padding: 0 13px;
    border: 1px solid #dfe8f3;
    border-radius: 10px;
    background: #f7faff;
    color: #536f95;
    font-size: 12px;
    line-height: 1.7;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 650;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt p {
    padding: 0 0 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-header,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-header {
    border-color: #344357;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-requirement,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-requirement {
    border-color: #38577b;
    background: #1c314a;
    color: #d5e7ff;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt {
    border-color: #344357;
    background: #202d3d;
    color: #b8c8dc;
}

@media (max-width: 920px) {
    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-copy strong {
        font-size: 13px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-copy small {
        margin-top: 4px;
        font-size: 9px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-arrow {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        padding-left: 2px;
        font-size: 11px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-use {
        left: 9px;
        right: 9px;
        bottom: 9px;
        min-height: 36px;
        font-size: 10px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-open {
        padding-bottom: 58px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-dialog {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-shell {
        min-height: 0;
        max-height: calc(100dvh - 24px);
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-header {
        padding: 20px 20px 14px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-body {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-media {
        height: min(48dvh, 430px);
        min-height: 220px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-copy {
        max-height: 48dvh;
        padding: 20px;
    }
}

/* Video studio visual pass
   The video preview follows the October desktop reference: a compact,
   persistent settings rail and an airy gallery with a large media stage.
   Keep this block scoped to the video page so image, music and writing
   workspaces retain their existing layout. */
@media (min-width: 921px) {
    html body #creation-app[data-creation-page="video"].studio-workspace .studio-layout {
        grid-template-columns: minmax(300px, 330px) minmax(0, 1fr) !important;
        gap: 0 !important;
        margin-top: 0 !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-controls {
        height: var(--studio-control-height, calc(100dvh - 64px));
        min-height: 480px;
        border-right: 1px solid #dce5f1 !important;
        background: #fbfcfe !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-mode-nav {
        padding: 12px 10px;
        background: #ffffff !important;
        border-bottom: 1px solid #e1e8f2 !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-control-scroll {
        padding: 18px 16px 22px;
        scrollbar-gutter: stable;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-control-footer {
        padding: 12px 16px 14px;
        background: #ffffff !important;
        border-top: 1px solid #dfe7f1 !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-layout .detail-preview-card {
        min-width: 0;
        min-height: calc(100dvh - 64px);
        height: var(--studio-control-height, calc(100dvh - 64px));
        padding: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 64px) 42px;
        border: 0 !important;
        border-radius: 0;
        background: #f8fbff !important;
        overflow: auto;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations {
        width: min(1180px, 100%);
        margin-inline: auto !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-gallery-heading {
        margin-bottom: 20px !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-gallery-heading h2 {
        font-size: clamp(24px, 2.2vw, 32px);
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -.035em;
        color: #20334f;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-counter {
        font-size: 12px;
        color: #7085a5;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-filters {
        gap: 8px;
        margin: 0 0 22px;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-filters::-webkit-scrollbar {
        display: none;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-filter {
        min-height: 36px;
        padding: 8px 13px;
        border-radius: 20px;
        background: #f2f6fc;
        border-color: #d5e2f2;
        color: #526f96;
        white-space: nowrap;
        transition: background .18s ease, border-color .18s ease, color .18s ease;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-preview {
        grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
        gap: clamp(20px, 2.8vw, 34px);
        align-items: stretch;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-gallery-stage {
        height: clamp(320px, 46vh, 520px) !important;
        min-height: 320px !important;
        border-radius: 18px;
        background: #102033;
        box-shadow: inset 0 0 0 1px #c9d8e866, 0 10px 28px #254b7812;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-gallery-media {
        height: 100% !important;
        min-height: 0 !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-reference-asset {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
        background: #0d1a2a;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-details {
        min-width: 0;
        align-self: center;
        padding: 8px 0;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-details h3 {
        margin: 0 0 10px;
        font-size: clamp(20px, 2vw, 28px);
        line-height: 1.25;
        color: #20334f;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-description {
        color: #7085a5;
        font-size: 13px;
        line-height: 1.75;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-requirement {
        margin: 16px 0 0;
        padding: 11px 13px;
        border: 1px solid #d7e6fa;
        border-radius: 10px;
        background: #edf5ff;
        color: #315b90;
        font-size: 12px;
        line-height: 1.6;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt {
        margin-top: 14px;
        padding: 0 12px;
        border: 1px solid #dfe8f3;
        border-radius: 10px;
        background: #ffffff;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt summary {
        min-height: 42px;
        color: #526f96;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt p {
        padding: 0 0 12px;
        color: #6d819d;
        font-size: 12px;
        line-height: 1.7;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-use {
        width: 100%;
        min-height: 44px;
        margin-top: 18px;
        border-radius: 10px;
        box-shadow: 0 5px 14px #1677ff1c;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnails {
        margin-top: 22px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail {
        min-height: 82px;
        padding: 11px 12px !important;
        grid-template-columns: 54px minmax(0, 1fr);
        border-radius: 13px !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail img {
        width: 54px !important;
        height: 60px !important;
        border-radius: 9px !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-nav {
        padding-top: 14px;
    }
}

@media (min-width: 921px) and (max-width: 1180px) {
    html body #creation-app[data-creation-page="video"].studio-workspace .studio-layout .detail-preview-card {
        padding-inline: 28px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-preview {
        grid-template-columns: minmax(240px, .8fr) minmax(280px, 1.2fr);
        gap: 20px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnails {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-preview {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-gallery-stage {
        height: clamp(240px, 42vh, 360px) !important;
        min-height: 240px !important;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-details {
        align-self: stretch;
    }
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-controls,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-controls {
    background: #151e2a !important;
    border-right-color: #344357 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-mode-nav,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-mode-nav,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-control-footer,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-control-footer {
    background: #182331 !important;
    border-color: #344357 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-layout .detail-preview-card,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-layout .detail-preview-card {
    background: #111923 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-gallery-heading h2,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-inspirations .studio-gallery-heading h2,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-details h3,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-details h3 {
    color: #edf3fb !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-description,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-description,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-counter,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-counter {
    color: #9fb1c9 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-requirement,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-requirement {
    border-color: #38577b !important;
    background: #1c314a !important;
    color: #d5e7ff !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt {
    border-color: #344357 !important;
    background: #182331 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt summary,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt summary {
    color: #b8c8dc !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt p,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-video-template-prompt p {
    color: #a4b5cb !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail {
    border-color: #344357 !important;
    background: linear-gradient(180deg, #1c2734 0%, #17212d 100%) !important;
    color: #edf3fb !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail:hover,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail:hover {
    border-color: #5e7898 !important;
    background: #223142 !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail[aria-pressed="true"],
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .studio-gallery-thumbnail[aria-pressed="true"] {
    border-color: #6ba8ff !important;
    background: linear-gradient(180deg, #203c62 0%, #1b304b 100%) !important;
}

/* Video catalogue cards and preview dialog. The reference page presents the
   catalogue as large, portrait cards; the selected item is opened in a
   focused dialog instead of taking space in the catalogue. */
html body #creation-app[data-creation-page="video"].studio-workspace .video-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 18px;
    width: 100%;
    margin: 0;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card {
    position: relative;
    min-width: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #eaf0f7;
    box-shadow: 0 2px 10px #20334f0a;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card:hover {
    border-color: #b9cde5;
    box-shadow: 0 12px 30px #24426e1c;
    transform: translateY(-2px);
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: inherit;
    color: #fff;
    text-align: left;
    background: #162335;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-open::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, #07132916 0%, transparent 36%, #07132910 52%, #071329d9 100%);
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: #18283c;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-overlay {
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-copy {
    min-width: 0;
    text-shadow: 0 1px 5px #0008;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-title {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-category {
    display: block;
    margin-top: 7px;
    color: #f1f5fa;
    font-size: 11px;
    line-height: 1.3;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-play {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    background: #16233566;
    color: #fff;
    backdrop-filter: blur(10px);
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-play svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-duration,
html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-badge {
    position: absolute;
    z-index: 3;
    border: 1px solid #ffffff42;
    border-radius: 7px;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    backdrop-filter: blur(9px);
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-duration {
    top: 12px;
    right: 12px;
    padding: 6px 8px;
    background: #0d20377d;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-badge {
    top: 12px;
    left: 12px;
    padding: 6px 7px;
    background: #1677fff2;
    font-weight: 700;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: min(320px, 100%);
    margin: 26px auto 4px;
    padding: 10px 20px;
    border: 1px solid #c8d9ed;
    border-radius: 10px;
    background: #fff;
    color: #2865b5;
    font-size: 12px;
    font-weight: 650;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-load-more:hover {
    border-color: #80b4f5;
    background: #edf5ff;
    color: #1266da;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-dialog {
    width: min(1080px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #d6e2f2;
    border-radius: 18px;
    background: #fff;
    color: #20334f;
    box-shadow: 0 24px 90px #142d554c;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-dialog::backdrop {
    background: #14263f87;
    backdrop-filter: blur(7px);
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    min-height: min(650px, calc(100dvh - 48px));
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #0d1827;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(100dvh - 48px);
    object-fit: contain;
    background: #0d1827;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-content {
    min-width: 0;
    overflow-y: auto;
    padding: 32px 30px 26px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d7e2ef;
    border-radius: 10px;
    background: #fffffff2;
    color: #536f95;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-title {
    margin: 0 40px 12px 0;
    color: #20334f;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.25;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-description {
    color: #7085a5;
    font-size: 13px;
    line-height: 1.75;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-meta span {
    padding: 5px 8px;
    border: 1px solid #e1eaf5;
    border-radius: 6px;
    background: #f4f8fd;
    color: #6f85a3;
    font-size: 10px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt {
    margin: 18px 0 0;
    padding: 13px;
    border: 1px solid #dfe8f3;
    border-radius: 10px;
    background: #f7faff;
    color: #536f95;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
    padding-top: 24px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-actions > button {
    width: 100%;
    min-height: 44px;
}

@media (max-width: 1180px) {
    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-grid {
        gap: 12px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card {
        border-radius: 14px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-overlay {
        left: 11px;
        right: 11px;
        bottom: 12px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-play {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-title {
        font-size: 13px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-category {
        margin-top: 4px;
        font-size: 9px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-dialog {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-media {
        height: min(52dvh, 480px);
        min-height: 240px;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-video {
        max-height: 100%;
    }

    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-content {
        max-height: 44dvh;
        padding: 22px 20px 22px;
    }
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-card,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-card {
    border-color: #344357;
    background: #17212d;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-card:hover,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-card:hover {
    border-color: #5e7898;
    box-shadow: 0 12px 30px #0005;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-load-more,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-load-more {
    border-color: #40556e;
    background: #182331;
    color: #b8d5fa;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-load-more:hover,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-load-more:hover {
    border-color: #6ba8ff;
    background: #203c62;
    color: #e0efff;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-dialog,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-dialog {
    border-color: #344357;
    background: #182331;
    color: #edf3fb;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-title,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-title {
    color: #edf3fb;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-description,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-description {
    color: #9fb1c9;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-meta span,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-meta span,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-prompt {
    border-color: #344357;
    background: #202d3d;
    color: #b8c8dc;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-close,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-detail-close {
    border-color: #40556e;
    background: #1b2a3aee;
    color: #c9d8e9;
}

@media (prefers-reduced-motion: reduce) {
    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card {
        transition: none;
    }
}

/* Final card geometry overrides: keep the title above the action button and
   keep the media layer clickable without allowing the video to stretch. */
html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-overlay {
    bottom: 70px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-video {
    object-fit: cover;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-open {
    padding-bottom: 64px;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-filter-count {
    margin-left: 5px;
    color: #8ca0bb;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

html body #creation-app[data-creation-page="video"].studio-workspace .video-template-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 64px 20px;
    border: 1px dashed #cbd9e9;
    border-radius: 14px;
    color: #7b8faa;
    text-align: center;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="video"].studio-workspace .video-template-empty,
body[data-ui-theme="dark"] #creation-app[data-creation-page="video"].studio-workspace .video-template-empty {
    border-color: #40556e;
    color: #9fb1c9;
}

html body #creation-app[data-creation-page="video"].studio-workspace .studio-video-filter:is(:hover, .active) .video-filter-count {
    color: currentColor;
}

@media (max-width: 920px) {
    html body #creation-app[data-creation-page="video"].studio-workspace .video-template-card-overlay {
        bottom: 60px;
    }
}