/* Playful desktop console. Loaded after feature styles so panel geometry has one owner. */
html body, html body#studioRoot, html body.studio-secondary {
  --studio-ink:#eeeafb; --studio-text:#eeeafb; --studio-muted:#b4afc9; --studio-faint:#9088aa; --studio-subtle:#aaa2c0;
  --studio-panel:#201c32; --studio-card:#2d2742; --studio-inset:#171426;
  --studio-field:#19162a; --studio-control:#302940; --studio-line:#bfa8ef25;
  --studio-line-strong:#bda8e75c; --studio-hover:#3b3152;
  --studio-accent:#b9a0f5; --studio-violet:#b9a0f5; --studio-positive:#8cddc5;
  --bg:#171426; --panel:var(--studio-panel); --surface:var(--studio-control); --surface-hover:var(--studio-hover);
  --text:var(--studio-ink); --ink:var(--studio-ink); --muted:var(--studio-muted); --subtle:var(--studio-subtle);
  --line:var(--studio-line); --line-strong:var(--studio-line-strong); --accent:var(--studio-accent); --accent-ink:#241c39;
  --purple:var(--studio-accent); --focus:var(--studio-accent); --blue:var(--studio-accent); --blue2:#b39554;
  --wf-text:var(--studio-ink); --wf-muted:var(--studio-muted); --wf-surface:var(--studio-panel);
  --wf-line:var(--studio-line); --wf-field:var(--studio-field); --wf-purple:var(--studio-accent);
  --studio-feedback-ring:#b9a0f544;
  background:var(--bg)!important; color:var(--studio-ink);
}
html[data-theme=light] body,html[data-theme=light] body#studioRoot:not(.auth-locked),html[data-theme=light] body.studio-secondary {
  --studio-ink:#342b49; --studio-text:#342b49; --studio-muted:#716683; --studio-faint:#857893; --studio-subtle:#716683;
  --studio-panel:#fffafc; --studio-card:#fff; --studio-inset:#f3edfa; --studio-field:#fff;
  --studio-control:#eee4f6; --studio-line:#daccE7; --studio-line-strong:#b3a0c9; --studio-hover:#e8d9f3;
  --studio-accent:#8655bd; --studio-positive:#28765d; --bg:#f3edfa; --accent-ink:#fff;
}
html[data-studio-background=studio] #studioBackdrop::before {background:#171426!important;animation:none}
html[data-theme=light][data-studio-background=studio] #studioBackdrop::before {background:#f3edfa!important}
html body :is(button,input,select,textarea,.button,.modal-card,dialog) {border-radius:5px!important}
html body :is(button,.button,.project-card,.project-entry,.studio-model-card):hover {transform:none;translate:none;scale:1}
html body :is(input,textarea,[contenteditable]) {caret-color:var(--studio-accent)}
html body :is(button,a,select,input,textarea):focus-visible {outline-color:var(--studio-accent)}
html body :is(.primary,#generateBtn,#saveConfigBtn,#authRegisterBtn,.studio-assets-primary) {
  background:var(--studio-accent)!important;color:var(--accent-ink)!important;border-color:var(--studio-accent)!important;box-shadow:none!important;
}
html body :is(.studio-glass,.panel,.project-card,.style-editor,.sb-shot,.sb-assets,.workflow-delivery-choices>div) {border-radius:6px!important;box-shadow:none!important;backdrop-filter:none!important}
html body :is(h1,h2,h3) {text-shadow:none!important}
html body :is(.studio-section-kicker,.studio-assets-eyebrow) {display:none}
html body :is(.studio-model-card,.project-card) {background:var(--studio-panel);border-color:var(--studio-line);border-radius:5px!important}
html body .studio-model-card.is-selected {border-color:var(--studio-accent);box-shadow:inset 0 2px var(--studio-accent)}
html body .studio-model-filters button.active {background:var(--studio-hover)!important;border-color:var(--studio-accent)!important;color:var(--studio-accent)!important;box-shadow:none!important}
html body .studio-view-heading h2 {color:var(--studio-ink)!important;font-size:20px!important}
html body .studio-view-heading p {color:var(--studio-muted)!important}

/* The home screen is a fixed workspace, with independently scrollable panes. */
html body#studioRoot {--studio-sidebar:156px;font-size:12px}
html #studioRoot .studio-sidebar {background:var(--studio-panel);padding:16px 8px 10px;border-color:var(--studio-line)}
html #studioRoot .studio-brand {padding:0 6px 17px;gap:8px}
html #studioRoot .studio-brand strong {font-size:15px;letter-spacing:0}
html #studioRoot .studio-brand-mark {width:26px;height:28px;flex-basis:26px;font-size:22px;border-radius:4px;background:transparent;border-color:#b9a0f540;color:var(--studio-accent)}
html #studioRoot .studio-brand small {font-size:9px;letter-spacing:1px;color:var(--studio-faint)}
html #studioRoot .studio-nav-caption {font-size:10px;letter-spacing:.3px;padding:20px 10px 8px}
html #studioRoot .studio-nav {gap:3px}
html #studioRoot .studio-nav :is(a,button) {min-height:35px;padding:7px 10px!important;gap:9px;border-radius:4px!important;font-size:12px}
html #studioRoot .studio-nav .si {width:17px;height:17px}
html #studioRoot .studio-nav a.active {background:#b9a0f512!important;color:var(--studio-accent)!important;box-shadow:inset 2px 0 var(--studio-accent)!important}
html #studioRoot .studio-sidebar-bottom button {font-size:10px;padding:8px;gap:6px;border-radius:4px}
html #studioRoot .studio-sidebar-bottom>small {display:none}
html #studioRoot .studio-eyebrow,html #studioRoot .studio-section-description,html #studioRoot .studio-prompt-tip,html #studioRoot .studio-upload-prompt>span {display:none!important}
html #studioRoot .studio-top-title h1 {font-size:13px!important;letter-spacing:.4px;font-weight:600}
html #studioRoot .topbar .account-entry {min-height:28px!important;height:28px!important;padding:3px 8px!important;font-size:11px;border-radius:4px!important}
html #studioRoot .topbar .studio-icon-button {width:28px!important;min-width:28px!important}
html #studioRoot .topbar .si {width:16px;height:16px}
html #studioRoot .studio-avatar {width:20px;height:20px;background:transparent;border:0;color:var(--studio-muted)}
html #studioRoot #creditCard {display:flex!important;min-height:28px!important;min-width:0;padding:3px 10px!important;gap:9px;background:transparent!important;border:0!important;border-right:1px solid var(--studio-line)!important;border-radius:0!important}
html #studioRoot #creditText {font-size:12px!important;color:var(--studio-accent)!important}
html #studioRoot #creditDetail {display:none}
html #studioRoot .top-actions {flex-wrap:nowrap!important;gap:5px!important}
html #studioRoot #announcementTicker {max-width:340px;min-width:0;height:24px!important;min-height:24px!important;order:0!important;font-size:10px!important;box-shadow:none;border-radius:0}
html #studioRoot #announcementTicker :is(.announcement-ticker-viewport,.announcement-ticker-track,.announcement-ticker-item) {height:24px!important;line-height:24px!important;font-size:10px!important;font-weight:400!important}
html #studioRoot .topbar {border-radius:0!important}
html #studioRoot .panel h2 {font-size:12px!important;font-weight:600}
html #studioRoot .section-title {gap:8px;margin-bottom:12px}
html #studioRoot .prompt-section-title {display:block}
html #studioRoot .prompt-upload-actions {margin-top:12px;gap:5px}
html #studioRoot .panel button.small {min-height:26px!important;padding:4px 7px!important;font-size:10px!important;border-radius:4px!important}
html #studioRoot .prompt-panel .image-shelf {min-height:110px!important;height:120px!important;padding:8px!important;border:1px solid var(--studio-line)!important;border-radius:4px!important;background:var(--studio-inset)!important}
html #studioRoot .studio-upload-prompt {gap:5px}
html #studioRoot .studio-upload-prompt strong {font-size:10px}
html #studioRoot .studio-upload-prompt .si {width:23px;height:23px;color:var(--studio-faint)}
html #studioRoot .fixed-prompt-head em {font-size:9px}
html #studioRoot .prompt-actions {margin-top:8px;justify-content:flex-end}
html #studioRoot .option-panel :is(.source-row,.option-row) {display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
html #studioRoot .option-panel .source-row>label {min-height:0!important;padding:0!important;background:transparent!important;border:0!important}
html #studioRoot .option-panel label {font-size:11px!important;color:var(--studio-muted)!important;gap:6px!important}
html #studioRoot .option-panel :is(select,input) {height:32px!important;min-height:32px!important;padding:5px 8px!important;font-size:11px!important;border-radius:4px!important}
html #studioRoot .option-panel .model-picker-row {grid-template-columns:minmax(0,1fr) 40px!important;gap:4px!important}
html #studioRoot .option-panel .model-resolution {font-size:10px!important;margin-top:4px!important}
html #studioRoot .option-panel .generation-cost {margin:16px 0 10px!important;padding:10px 0!important;border-top:1px solid var(--studio-line);font-size:11px!important}
html #studioRoot #generateBtn {min-height:34px!important;height:34px!important;border-radius:4px!important;font-size:12px!important;letter-spacing:0}
html #studioRoot .option-panel #generateBtn {background:var(--studio-accent)!important;color:var(--accent-ink)!important;border-color:var(--studio-accent)!important;box-shadow:none!important;min-height:34px!important;padding:6px 10px!important}
html #studioRoot #generateBtn::before {content:"▶";font-size:9px;margin-right:8px}
html #studioRoot .option-panel .status-line {font-size:10px!important;margin-top:8px!important;line-height:1.5!important}

.console-monitor {display:flex;flex-direction:column;grid-area:monitor;min-width:0;min-height:0;background:var(--studio-inset);border-right:1px solid var(--studio-line)}
.console-monitor-toolbar,.console-monitor-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;flex-shrink:0;background:var(--studio-panel);color:var(--studio-muted);font-size:10px}
.console-monitor-toolbar {height:39px;border-bottom:1px solid var(--studio-line)}
.console-monitor-toolbar>span {display:flex;align-items:center;gap:7px;color:var(--studio-ink);font-size:11px}
.console-monitor-toolbar i {width:5px;height:5px;border:1px solid var(--studio-accent)}
.console-monitor-toolbar button {background:transparent;border:0;color:var(--studio-muted);font-size:10px;padding:5px 7px;cursor:pointer}
.console-monitor-footer {height:29px;border-top:1px solid var(--studio-line);font-variant-numeric:tabular-nums}
.console-viewport {position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#1b212c50,transparent 70%),#090c11}
.console-monitor-empty {display:flex;align-items:center;flex-direction:column;gap:12px;color:#667182;font-size:11px;text-align:center;padding:16px}
.console-monitor-empty svg {width:80px;height:64px;stroke:#596476;stroke-width:1}
.console-monitor-empty strong {font-size:13px;font-weight:500;color:#a3adbc;letter-spacing:2px}
.console-monitor-empty span {font-size:10px;color:#798596}
.console-viewport.has-video .console-monitor-empty {display:none}
html #studioRoot #videoModal.console-docked {position:absolute;inset:0;display:flex;align-items:stretch;padding:0;background:transparent;backdrop-filter:none;z-index:1}
html #studioRoot #videoModal.console-docked.hidden {display:none!important}
html #studioRoot .console-docked .video-card {width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;padding:0!important;gap:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#090c11!important;display:flex;flex-direction:column;align-items:stretch!important}
html #studioRoot .console-docked .video-frame {flex:1!important;min-height:0!important;width:100%!important;aspect-ratio:auto;border-radius:0!important;background:#090c11!important;overflow:hidden}
html #studioRoot .console-docked #previewVideo {width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain;border-radius:0!important;position:absolute;inset:0}
html #studioRoot .console-docked #closeVideoModal {top:8px;right:8px;width:26px;height:26px;font-size:19px;z-index:5;background:#171c25cc;border:1px solid #414956;color:#ddd}
html #studioRoot .console-docked #videoDownloadBtn {flex:none;align-self:flex-end;width:auto!important;min-height:26px!important;margin:6px 12px!important;padding:3px 12px!important;background:var(--studio-control);color:var(--studio-ink);border:1px solid var(--studio-line);font-size:11px}
.console-viewport:fullscreen {width:100vw;height:100vh}

@media(min-width:960px) {
  html:has(#studioRoot:not(.auth-locked)) {height:100%;overflow:hidden;scrollbar-gutter:auto!important}
  html body#studioRoot:not(.auth-locked) {scrollbar-gutter:auto!important}
  html body#studioRoot:not(.auth-locked) {height:100dvh!important;min-height:0!important;overflow:hidden!important}
  html #studioRoot:not(.auth-locked) .app-shell {height:100dvh!important;min-height:0!important;padding:0 0 0 var(--studio-sidebar)!important;gap:0!important;overflow:hidden!important}
  html #studioRoot:not(.auth-locked) .topbar {height:43px!important;min-height:43px!important;padding:0 14px!important;background:var(--studio-panel)!important;border-bottom:1px solid var(--studio-line)!important}
  html #studioRoot:not(.auth-locked) .app-shell>#studioGenerateView {
    flex:1!important;min-height:0!important;height:0!important;overflow:hidden!important;
    grid-template-columns:clamp(270px,25vw,360px) minmax(200px,1fr) 226px!important;
    grid-template-rows:minmax(0,1fr) 228px!important;grid-template-areas:"workspace monitor controls" "workspace tasks controls"!important;
    align-content:stretch!important;gap:0!important;
  }
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.panel {padding:14px!important;border:0!important;border-radius:0!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:auto!important;background:var(--studio-panel)!important;align-self:stretch!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.prompt-panel {border-right:1px solid var(--studio-line)!important;display:flex!important;flex-direction:column!important;gap:0!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.prompt-panel>.editor {flex:1 0 160px!important;min-height:160px!important;height:auto!important;max-height:none!important;font-size:12px!important;padding:12px!important;line-height:1.8!important;border:1px solid var(--studio-line)!important;border-radius:4px!important;background:var(--studio-field)!important;color:var(--studio-ink)!important}
  html #studioRoot:not(.auth-locked) .fixed-prompt-wrap {flex-shrink:0!important;margin-top:12px!important}
  html #studioRoot:not(.auth-locked) .fixed-prompt-input {height:78px!important;min-height:60px!important;padding:9px!important;font-size:11px!important;background:var(--studio-field)!important;color:var(--studio-ink)!important;border-color:var(--studio-line)!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.option-panel {display:block!important}
  html #studioRoot:not(.auth-locked) .option-panel>h2 {margin-bottom:18px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.option-panel>:is(.source-row,.option-row) {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.option-panel>:is(.source-row,.option-row)>label {grid-column:1!important}
  html #studioRoot:not(.auth-locked) .option-panel .option-row {margin-top:14px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.task-panel {position:relative!important;top:0!important;border-top:1px solid var(--studio-line)!important;display:flex!important;flex-direction:column!important;padding:10px 14px!important;overflow:hidden!important;gap:6px!important}
  html #studioRoot:not(.auth-locked) .task-section-title {margin:0!important;flex-wrap:nowrap!important}
  html #studioRoot:not(.auth-locked) .task-section-title h2 {white-space:nowrap}
  html #studioRoot:not(.auth-locked) .studio-task-note {font-size:10px;margin:0!important;color:var(--studio-faint)}
  html #studioRoot:not(.auth-locked) .studio-task-toolbar {margin:0!important;padding:0!important;position:absolute;right:14px;top:42px}
  html #studioRoot:not(.auth-locked) .studio-task-toolbar button {min-height:22px!important;font-size:9px!important;padding:2px 6px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.task-panel>.task-list {display:flex!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:auto!important;min-height:0!important;gap:8px!important;align-items:stretch!important;padding-top:8px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.task-panel>.task-list.empty {flex-direction:column!important;justify-content:center!important;min-height:0!important;background:var(--studio-inset)!important;border:1px solid var(--studio-line)!important;border-radius:4px!important;gap:3px}
  html #studioRoot:not(.auth-locked) .task-list.empty::before {display:none}
  html #studioRoot:not(.auth-locked) .task-list.empty::after {content:"提交生成后，任务进度与成片显示在这里";font-size:10px}
  html #studioRoot:not(.auth-locked) .task-card .task-left {display:block!important;min-width:0!important;padding:0!important}
  html #studioRoot:not(.auth-locked) .task-card .fan {display:none}
  html #studioRoot:not(.auth-locked) .task-card .task-main {min-width:0!important;padding:0!important}
  html #studioRoot:not(.auth-locked) .task-card .task-head {display:flex;gap:5px;flex-wrap:wrap}
  html #studioRoot:not(.auth-locked) .task-card .task-bottom {display:block!important}
  html #studioRoot:not(.auth-locked) .task-card .task-video-area {display:block!important;border:0!important;min-width:0!important;padding:0!important}
  html #studioRoot:not(.auth-locked) .task-card .task-video-divider {display:none}
  html #studioRoot:not(.auth-locked) .task-card .empty-video:empty {display:none}
  html #studioRoot:not(.auth-locked) .task-card .task-video-box,html #studioRoot:not(.auth-locked) .task-card .task-preview-button {width:58px!important}
  html #studioRoot:not(.auth-locked) .task-card .task-preview-button {height:57px!important;border-radius:3px!important}
  html #studioRoot:not(.auth-locked) .task-card .task-prompt {font-size:10px!important;line-height:1.5!important}
  html #studioRoot:not(.auth-locked) .task-card .task-actions {gap:4px!important;padding-top:5px}
  html #studioRoot:not(.auth-locked) #taskList .task-left {display:block!important}
  html #studioRoot:not(.auth-locked) #taskList .task-main {display:block!important}
  html #studioRoot:not(.auth-locked) #taskList .task-video-area {display:block!important;border:0!important;padding:0!important}
  html #studioRoot:not(.auth-locked) #taskList .task-video-area:has(.empty-video:empty) {display:none!important}
  html #studioRoot:not(.auth-locked) #taskList .task-actions {padding-top:5px!important;flex-wrap:wrap!important}
  html #studioRoot:not(.auth-locked) #taskList .task-actions button {font-size:9px!important;min-height:22px!important;padding:3px 6px!important}
  html #studioRoot:not(.auth-locked) .app-shell>.studio-view {flex:1;min-height:0;overflow:auto;padding:20px;gap:16px}
}
@media(max-width:959px) {
  .console-monitor {display:none}
  html #studioRoot .app-shell {padding:16px 16px 16px calc(var(--studio-sidebar) + 16px)!important;gap:16px!important}
  html #studioRoot .option-panel :is(.source-row,.option-row) {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html #studioRoot .option-panel .source-row>.model-picker {grid-column:1/-1}
}
@media(min-width:761px) and (max-width:1100px) {html body#studioRoot {--studio-sidebar:64px}}
@media(max-width:760px) {
  html #studioRoot .app-shell {padding:12px!important}
  html #studioRoot .studio-sidebar {padding:12px;border-radius:5px!important}
  html #studioRoot .top-actions {flex-wrap:wrap!important}
  html #studioRoot .prompt-panel .image-shelf {height:140px!important}
}

/* Workflow: compact command strip, stable step tabs and a real status bar. */
html .workflow-heading h1 {font-size:17px!important;letter-spacing:0;margin:0}
html .workflow-heading .brand {font-size:13px;color:var(--studio-accent)}
html .workflow-heading #breadcrumb {font-size:10px;margin:2px 0;color:var(--studio-faint)}
html .workflow-heading button {font-size:11px;padding:5px 9px}
html .workflow-nav {background:var(--studio-panel);border-color:var(--studio-line);border-radius:0!important;backdrop-filter:none}
html .workflow-nav a {border-radius:3px;font-size:12px;padding:9px 10px}
html .project-tabs {gap:1px;border:1px solid var(--studio-line);padding:0;margin-bottom:18px;background:var(--studio-line);border-radius:3px;overflow:hidden}
html .project-tabs button {padding:10px 8px;border:0;border-radius:0!important;background:var(--studio-panel);gap:7px}
html .project-tabs small {display:none}
html .project-tabs span {font-size:11px;font-weight:500}
html .project-tabs i {width:21px;height:21px;border-radius:3px;font-size:10px}
html .project-tabs [aria-pressed=true] {box-shadow:inset 0 -2px var(--studio-accent);background:var(--studio-control)}
html .step-heading {margin-bottom:18px}
html .step-heading h2 {font-size:19px}
html .step-heading p {font-size:11px}
html .section-head h2 {font-size:16px}
html .section-head p {font-size:11px}
html .style-art {height:49px;font-size:25px}
html .style-cards {margin-bottom:18px}
html .style-cards button {border-radius:4px;box-shadow:none!important;transform:none!important}
html .style-cards strong {font-size:11px}
html .style-editor {padding:14px}
html .project-card .project-entry {padding:18px}
html .project-entry h3 {font-size:16px}
html .project-entry>span {margin-top:15px}
html .project-card:hover {transform:none;box-shadow:none}
html .workflow-footer {border-radius:0;box-shadow:none;padding:10px 18px;background:var(--studio-panel)}
html .workflow-footer button {min-height:32px;font-size:12px}
html .workflow-footer .primary {min-width:150px}
@media(min-width:900px) {
  html body:has(>.workflow-app) {height:100dvh;overflow:hidden}
  html .workflow-app {height:100dvh;max-width:none;padding:0!important;display:flex;flex-direction:column;overflow:hidden}
  html .workflow-heading {min-height:72px;height:72px;flex:none;padding:10px 20px;border-bottom:1px solid var(--studio-line);background:var(--studio-panel)}
  html .workflow-layout {flex:1;min-height:0;gap:0!important;grid-template-columns:156px minmax(0,1fr)!important;overflow:hidden}
  html .workflow-nav {border-width:0 1px 0 0;padding:14px 8px;overflow-y:auto}
  html .workflow-app #workspace {border:0;border-radius:0!important;padding:20px 24px 78px!important;overflow:auto;min-height:0;background:var(--bg);backdrop-filter:none}
  html .workflow-app #notice {height:28px;flex:none;padding:5px 18px;margin:0;border-top:1px solid var(--studio-line);font-size:10px;background:var(--studio-panel);line-height:17px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  html .workflow-app .workflow-footer,html .workflow-app.nav-collapsed .workflow-footer {left:156px;right:0;bottom:28px;border-width:1px 0 0}
  html .workflow-app.nav-collapsed .workflow-layout {grid-template-columns:66px minmax(0,1fr)!important}
  html .workflow-app.nav-collapsed .workflow-footer {left:66px}
}

/* Keep secondary tools in the same restrained application palette. */
html body.studio-secondary :is(.image-app,.auto-edit-app) {gap:12px}
html body.studio-secondary :is(.image-topbar,.auto-edit-topbar) {border-radius:0!important;box-shadow:none;padding:12px 18px}
html body.studio-secondary :is(.image-topbar,.auto-edit-topbar) h1 {font-size:19px}
html body.studio-secondary :is(.step-nav,.workbench-nav) {border-radius:4px!important}
html #studioRoot.auth-locked .auth-content {background:#201c32f5!important;border-color:#303642!important;border-radius:8px!important;box-shadow:0 20px 80px #0005!important}
html #studioRoot.auth-locked .auth-form input {background:#171426!important;border-color:#303642!important;border-radius:4px!important}
html #studioRoot.auth-locked .auth-visual-copy>span {color:#b9a0f5!important}
html #studioRoot.auth-locked .auth-visual-copy>strong {font-size:38px!important}
html #studioRoot.auth-locked .cinema-frame {border-radius:4px;animation:none}
html #studioRoot.auth-locked :is(#saveConfigBtn,#authRegisterBtn) {background:#b9a0f5!important;color:#241c39!important;border-radius:4px!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce) {html body * {scroll-behavior:auto!important}}

/* Soft toy-like surfaces. The desktop panes retain their independent scrolling. */
html body {--motion-spring:cubic-bezier(.22,1.4,.36,1);--studio-feedback-ring:#cbb1ff55;--playful-shadow:0 8px 26px #10092325,inset 0 1px #ffffff09}
html[data-studio-background=studio] #studioBackdrop::before {
  inset:-12%;background:radial-gradient(ellipse at 15% 18%,#8662bb44,transparent 48%),radial-gradient(ellipse at 88% 78%,#59c7b331,transparent 42%),radial-gradient(ellipse at 75% 5%,#ffacb026,transparent 34%),#171426!important;
  animation:playful-atmosphere 18s ease-in-out infinite alternate!important;transform:none;will-change:transform;
}
html[data-theme=light][data-studio-background=studio] #studioBackdrop::before {background:radial-gradient(ellipse at 15% 18%,#c8a9fa70,transparent 48%),radial-gradient(ellipse at 88% 78%,#a7eed766,transparent 42%),radial-gradient(ellipse at 75% 5%,#ffd0d966,transparent 34%),#f3edfa!important}
@keyframes playful-atmosphere {0%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(2%,2%,0) scale(1.03)}100%{transform:translate3d(0,-2%,0) scale(1.06)}}
html body :is(button,.button,input,select,textarea) {border-radius:13px!important}
html body :is(button,.button,a.account-entry,a.studio-outline-button) {transition:background .2s,border-color .2s,box-shadow .25s,translate .3s var(--motion-spring),scale .25s var(--motion-spring)!important}
@media(hover:hover) {
  html body :is(button,.button,a.account-entry,a.studio-outline-button):not(:disabled):not([aria-disabled=true]):hover {translate:0 -2px;box-shadow:0 5px 16px #b99aff21}
  html body :is(.project-card,.studio-model-card,.style-cards button):hover {translate:0 -4px;box-shadow:0 12px 30px #130c2530!important;transition:translate .4s var(--motion-spring),box-shadow .3s,border-color .3s}
}
html body :is(button,.button):not(:disabled):active {scale:.95}
html body :is(dialog,.modal-card,.password-card),html #studioRoot .modal-card:not(.video-card):not(.preview-card):not(.asset-preview-card) {border-radius:28px!important;box-shadow:0 24px 100px #0d071c60,inset 0 1px #fff1}
html body :is(.panel,.studio-glass,.studio-model-card,.project-card,.style-editor,.sb-shot,.sb-assets,.workflow-delivery-choices>div) {border-radius:20px!important;box-shadow:var(--playful-shadow)!important}
html body :is(.primary,#generateBtn,#saveConfigBtn,#authRegisterBtn,.studio-assets-primary),html #studioRoot .option-panel #generateBtn {
  background:linear-gradient(115deg,#c2a6ff,#a2b6f9 58%,#9adfcf)!important;border-color:#dfd0ff66!important;color:#252038!important;box-shadow:0 5px 20px #b9a0f530,inset 0 1px #ffffff70!important;
}
html #studioRoot .option-panel #generateBtn {min-height:40px!important;height:40px!important;border-radius:16px!important}
html #studioRoot .studio-brand {border-bottom:0;gap:7px;padding-bottom:12px}
html #studioRoot .studio-brand-mark {border:0;background:none;flex-basis:35px;width:35px;height:35px;overflow:visible}
.studio-brand-mark img {display:block;width:100%;height:100%;object-fit:contain;transition:rotate .4s var(--motion-spring),scale .4s var(--motion-spring)}
.studio-brand:hover .studio-brand-mark img {rotate:-10deg;scale:1.12}
html #studioRoot .studio-brand strong {font-size:16px;letter-spacing:.2px}
html #studioRoot .studio-brand small {color:var(--studio-muted);letter-spacing:1px}
html #studioRoot .studio-sidebar {background:color-mix(in srgb,var(--studio-panel) 88%,transparent);border:1px solid var(--studio-line);box-shadow:var(--playful-shadow)}
html #studioRoot .studio-nav :is(a,button) {border-radius:14px!important;min-height:38px;gap:9px}
html #studioRoot .studio-nav a.active {background:#b9a0f517!important;box-shadow:none!important;color:var(--studio-ink)!important}
html #studioRoot .studio-nav a.active .si {color:#ceb5ff}
html[data-theme=light] #studioRoot .studio-nav a.active .si {color:#8351bc}
.studio-nav-indicator {border-radius:14px;background:linear-gradient(115deg,#bda0ff22,#9cdfd018);border-color:#d8bbff30;box-shadow:inset 0 1px #ffffff0b}
html #studioRoot .studio-sidebar-bottom button {border-radius:14px!important;min-height:36px;background:linear-gradient(100deg,#b9a0f50d,#91dfc70c)}
html #studioRoot .topbar .account-entry {border-radius:12px!important}
html #studioRoot .studio-avatar {border-radius:50%;background:#b9a0f51a;color:var(--studio-accent)}
html #studioRoot .prompt-panel .image-shelf {border-radius:18px!important;border-style:dashed!important;background:linear-gradient(130deg,#b9a0f50a,#93e0c90a),var(--studio-inset)!important}
html #studioRoot .studio-upload-prompt .si {color:var(--studio-accent);transition:translate .4s var(--motion-spring),rotate .4s var(--motion-spring)}
html #studioRoot .studio-upload-prompt:hover .si {translate:0 -4px;rotate:-8deg}
html #studioRoot .reference-media-row {border-radius:14px;background:var(--studio-field);border-color:var(--studio-line)}
html #studioRoot .panel button.small,html #studioRoot .option-panel :is(select,input) {border-radius:11px!important}
html #studioRoot .studio-task-filters {border-radius:14px;background:var(--studio-field);padding:4px}
html #studioRoot .studio-task-filters button {border-radius:10px;font-size:10px}
html #studioRoot .studio-task-filters button.active {background:#b9a0f523;color:var(--studio-ink)}
.console-monitor {border:1px solid var(--studio-line);border-radius:24px;overflow:hidden;box-shadow:var(--playful-shadow)}
.console-monitor-toolbar {height:42px;background:var(--studio-panel);border:0;padding:0 16px}
.console-monitor-toolbar>span {font-weight:600;font-size:12px}
.console-monitor-toolbar i {width:7px;height:7px;border:0;background:#91dbc3;border-radius:50%;box-shadow:0 0 12px #91dbc355;animation:playful-breathe 3s ease-in-out infinite}
.console-monitor-footer {height:30px;border-color:var(--studio-line);padding:0 16px}
.console-viewport:not(.has-video) {isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#7151ac22,transparent 66%),var(--studio-inset)}
.console-viewport:not(.has-video)::before,.console-viewport:not(.has-video)::after {content:"";position:absolute;z-index:-1;pointer-events:none;width:200px;height:200px;border-radius:44% 56% 65% 35%;opacity:.36;background:radial-gradient(circle at 35% 30%,#c9a6ff80,#9475f108 65%);top:-75px;right:-70px;animation:playful-blob 14s ease-in-out infinite alternate}
.console-viewport:not(.has-video)::after {width:160px;height:160px;right:auto;top:auto;left:-60px;bottom:-70px;background:radial-gradient(circle at 60% 40%,#91e9cc66,#91e9cc08 65%);animation-delay:-7s;animation-direction:alternate-reverse}
@keyframes playful-blob {to{transform:translate3d(-36px,24px,0) rotate(28deg) scale(1.13)}}
.console-monitor-empty {gap:11px;padding:22px;color:var(--studio-muted)}
.console-monitor-empty strong {color:var(--studio-ink);font-size:18px;font-weight:650;letter-spacing:1px}
.console-monitor-empty>span {font-size:11px;color:var(--studio-muted)}
.console-monitor-empty>small {font-size:10px;color:var(--studio-faint);margin-top:4px}
.playful-mascot {position:relative;width:138px;height:135px;margin-bottom:4px}
.playful-mascot>img {position:relative;z-index:1;width:126px;height:126px;filter:drop-shadow(0 12px 16px #11092535);animation:playful-float 5s ease-in-out infinite}
.playful-star {position:absolute;color:#bcebd9;font-style:normal;animation:playful-twinkle 4s ease-in-out infinite}
.playful-star-one {left:-12px;top:40px;font-size:24px}
.playful-star-two {right:-8px;top:5px;color:#d7b4ff;font-size:29px;animation-delay:-2s}
.playful-orbit {position:absolute;left:25px;right:25px;bottom:-3px;height:10px;border-radius:50%;background:#b8a0f514;animation:playful-shadow 5s ease-in-out infinite}
@keyframes playful-float {0%,100%{transform:translateY(3px) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes playful-shadow {0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.75);opacity:.35}}
@keyframes playful-twinkle {0%,100%{transform:scale(.8) rotate(-12deg);opacity:.45}50%{transform:scale(1.15) rotate(12deg);opacity:1}}
@keyframes playful-breathe {50%{opacity:.5;box-shadow:0 0 4px #91dbc322}}
.studio-ripple {background:radial-gradient(circle,#dcbdff77,#9bedd830 35%,transparent 68%)}
html body dialog:not(.site-confirm) {translate:0 24px;scale:.88;transition:opacity .2s,translate .28s ease,scale .28s ease,display .28s allow-discrete,overlay .28s allow-discrete}
html body dialog[open]:not(.site-confirm) {translate:0 0;scale:1;transition:opacity .25s,translate .6s var(--motion-spring),scale .6s var(--motion-spring),display .6s allow-discrete,overlay .6s allow-discrete}
@starting-style {html body dialog[open]:not(.site-confirm) {opacity:0;translate:0 34px;scale:.86}}
html body dialog::backdrop {background:#100b2466;backdrop-filter:blur(9px)}
html #studioBackgroundDialog {border-radius:28px!important;background:var(--studio-panel);border-color:var(--studio-line-strong)}
html #studioBackgroundDialog .sbg-save {background:linear-gradient(115deg,#c2a6ff,#a2dfce)!important;color:#251c39!important;border-color:#d8c4ff55!important;border-radius:14px!important}
html .workflow-nav,html .workbench-nav,html .step-nav {border-radius:20px!important}
html .project-tabs {border:0;border-radius:17px;padding:5px;background:var(--studio-field);gap:4px}
html .project-tabs button {border-radius:12px!important;background:transparent;transition:background .2s,scale .3s var(--motion-spring)!important}
html .project-tabs [aria-pressed=true] {box-shadow:none;background:#b9a0f522;color:var(--studio-ink)}
html .project-tabs i {border-radius:9px}
html .style-cards button {border-radius:16px!important}
html .workflow-footer {border-radius:18px;box-shadow:0 6px 30px #11082325;gap:12px}
html .workflow-footer button {border-radius:12px!important}
html #studioRoot.auth-locked .auth-content {border-radius:28px!important;background:#231d35ee!important;border-color:#c7afff30!important}
html #studioRoot.auth-locked .auth-form input {border-radius:13px!important;background:#171426!important;border-color:#bfa8ef30!important}
html #studioRoot.auth-locked .cinema-frame {border-radius:18px;animation:cinema-focus 8s ease-in-out infinite}
html #studioRoot.auth-locked .cinema-frame--one {animation-name:cinema-first;animation-delay:-2s}
html #studioRoot.auth-locked .cinema-frame--three {animation-name:cinema-last;animation-delay:-4s}
html #studioRoot.auth-locked :is(#saveConfigBtn,#authRegisterBtn) {border-radius:14px!important;background:linear-gradient(115deg,#c2a6ff,#9adfcf)!important;color:#251c39!important}
@media(min-width:960px) {
  html #studioRoot:not(.auth-locked) .studio-sidebar {left:8px;top:10px;bottom:10px;width:calc(var(--studio-sidebar) - 8px);border-radius:23px;padding:17px 7px 10px}
  html #studioRoot:not(.auth-locked) .app-shell {padding:0 10px 10px calc(var(--studio-sidebar) + 10px)!important}
  html #studioRoot:not(.auth-locked) .topbar {background:transparent!important;height:53px!important;min-height:53px!important;padding:0 5px!important;border:0!important}
  html #studioRoot:not(.auth-locked) .app-shell>#studioGenerateView {gap:10px!important;grid-template-columns:clamp(250px,24vw,340px) minmax(200px,1fr) 218px!important;grid-template-rows:minmax(0,2fr) minmax(0,3fr)!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.panel {border:1px solid var(--studio-line)!important;border-radius:22px!important;background:color-mix(in srgb,var(--studio-panel) 91%,transparent)!important;box-shadow:var(--playful-shadow)!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.prompt-panel {border-right:1px solid var(--studio-line)!important;padding:14px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.prompt-panel>.editor {border-radius:16px!important;padding:13px!important;box-shadow:inset 0 2px 8px #08051510!important}
  html #studioRoot:not(.auth-locked) .fixed-prompt-input {border-radius:14px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.task-panel {border-top:1px solid var(--studio-line)!important;border-radius:22px!important;padding:16px!important;gap:10px!important;container-type:inline-size}
  html #studioRoot:not(.auth-locked) .task-section-title {flex-wrap:wrap!important;gap:8px!important}
  html #studioRoot:not(.auth-locked) .task-section-title h2 {font-size:17px!important}
  html #studioRoot:not(.auth-locked) .studio-task-filters button {font-size:12px!important;min-height:30px!important;padding:5px 10px!important}
  html #studioRoot:not(.auth-locked) .studio-task-note {font-size:12px!important;line-height:1.5}
  html #studioRoot:not(.auth-locked) .studio-task-toolbar {position:static!important;display:flex!important;flex-wrap:wrap;gap:8px!important;flex-shrink:0}
  html #studioRoot:not(.auth-locked) .studio-task-toolbar .task-title-actions {display:flex;flex-wrap:wrap;gap:6px}
  html #studioRoot:not(.auth-locked) .studio-task-toolbar button {min-height:30px!important;font-size:12px!important;padding:5px 9px!important}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.task-panel #taskList {display:flex!important;flex-direction:column!important;flex:1!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;gap:12px!important;padding:2px 3px 4px 0!important;scrollbar-gutter:stable}
  html #studioRoot:not(.auth-locked) .app-shell>main.grid>.task-panel>.task-list.empty {border-radius:15px!important;border-style:dashed!important}
  html #studioRoot:not(.auth-locked) #taskList.empty {font-size:16px!important}
  html #studioRoot:not(.auth-locked) #taskList.empty::after {font-size:12px!important;line-height:1.6;padding:8px 14px}
  html #studioRoot:not(.auth-locked) #taskList .task-head {gap:7px!important;align-items:center!important}
  html #studioRoot:not(.auth-locked) #taskList .task-head strong {font-size:15px!important}
  html #studioRoot:not(.auth-locked) #taskList .task-time {font-size:11px!important;color:var(--studio-muted)!important}
  html #studioRoot:not(.auth-locked) #taskList .badge {font-size:12px!important;padding:4px 9px!important;border-radius:9px!important}
  html #studioRoot:not(.auth-locked) #taskList .task-prompt {font-size:14px!important;line-height:1.65!important;margin:10px 0!important;-webkit-line-clamp:2}
  html #studioRoot:not(.auth-locked) #taskList :is(.task-info,.task-error,.task-poll-note,.task-local-note) {font-size:12px!important;line-height:1.6!important}
  html #studioRoot:not(.auth-locked) #taskList .task-actions {gap:7px!important;margin-top:10px!important;padding:0!important}
  html #studioRoot:not(.auth-locked) #taskList :is(.task-actions button,.task-video-box button.small) {border-radius:11px!important;font-size:12px!important;min-height:32px!important;padding:6px 10px!important}
  html #studioRoot:not(.auth-locked) #taskList .task-video-area {width:140px!important}
  html #studioRoot:not(.auth-locked) #taskList :is(.task-video-box,.task-preview-button,.task-video-box button.small) {width:140px!important;max-width:100%!important}
  html #studioRoot:not(.auth-locked) #taskList .task-preview-button {height:88px!important;border-radius:13px!important}
  html #studioRoot:not(.auth-locked) #taskList .task-video-box {gap:8px!important}
  @container (max-width:470px) {
    html #studioRoot:not(.auth-locked) #taskList .task-video-area {width:100%!important}
    html #studioRoot:not(.auth-locked) #taskList .task-video-box {display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;gap:12px!important}
    html #studioRoot:not(.auth-locked) #taskList .task-preview-button {flex:0 0 140px!important}
    html #studioRoot:not(.auth-locked) #taskList .task-video-box button.small {width:auto!important}
  }
  .console-monitor-empty {gap:7px;padding:10px}
  .playful-mascot {width:100px;height:90px;margin-bottom:0}
  .playful-mascot>img {width:95px;height:90px}
  .console-monitor-empty>small {display:none}
}
@media(min-width:900px) {
  html .workflow-heading {background:transparent;border:0;padding:10px 20px}
  html .workflow-layout {padding:0 10px 10px;gap:10px!important;grid-template-columns:146px minmax(0,1fr)!important}
  html .workflow-nav {border:1px solid var(--studio-line);border-radius:22px!important;background:color-mix(in srgb,var(--studio-panel) 90%,transparent)}
  html .workflow-app #workspace {border:1px solid var(--studio-line);border-radius:24px!important;background:color-mix(in srgb,var(--studio-panel) 88%,transparent);padding:20px 20px 88px!important}
  html .workflow-app .workflow-footer {left:178px;right:22px;bottom:40px;border:1px solid var(--studio-line);border-radius:18px}
  html .workflow-app.nav-collapsed .workflow-footer {left:98px}
  html .workflow-app #notice {background:transparent;border:0;color:var(--studio-muted)}
}
@media(max-height:740px) and (min-width:960px) {
  .playful-mascot {width:95px;height:85px;margin-bottom:0}.playful-mascot>img {width:90px;height:85px}
  .console-monitor-empty {gap:7px;padding:10px}.console-monitor-empty strong {font-size:15px}.console-monitor-empty>small {display:none}
  html #studioRoot .option-panel :is(.source-row,.option-row) {gap:10px!important}
}
html[data-motion-paused=true] :is(#studioBackdrop,.console-viewport)::before,html[data-motion-paused=true] .console-viewport::after,html[data-motion-paused=true] :is(.playful-mascot>img,.playful-star,.playful-orbit,.console-monitor-toolbar i) {animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce) {
  html[data-studio-background=studio] #studioBackdrop::before {animation:none!important;transform:none!important;will-change:auto!important}
  html body *,html body *::before,html body *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;will-change:auto!important}
  html body :is(button,.button,.project-card,.studio-model-card):is(:hover,:active) {translate:none!important;scale:1!important}
}