:root {
  color-scheme: dark;
  --bg: #111415; --chrome: #191d1e; --panel: #171b1c; --panel-soft: #232829; --editor: #15191a;
  --line: #343b3c; --line-strong: #5d5d60; --text: #e5e8e5; --muted: #a7b0af; --muted-2: #919b9a;
  --brand: #e4bf80; --brand-strong: #e4bf80; --brand-soft: #333336;
  --warn: #d5b577; --danger: #d5968d; --info: #a2bccb; --success: #e4bf80;
  --library-size: 242px; --inspector-size: 260px; --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 320px; overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.6 "Segoe UI","Microsoft YaHei","PingFang SC",sans-serif; }
button, .button, input, select, textarea { font: inherit; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 33px; padding: 5px 11px; border: 1px solid transparent; border-radius: 3px; background: var(--brand); color: #242427; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 170ms ease,border-color 170ms ease,color 170ms ease; }
button:hover, .button:hover { background: var(--brand-strong); }
button:disabled { opacity: .43; cursor: not-allowed; }
button.ghost, .button.ghost { border-color: #4a4a4d; background: transparent; color: #c7cfc8; font-weight: 400; }
button.ghost:hover, .button.ghost:hover { border-color: #b9aa91; background: #2f2f32; color: var(--brand-strong); }
button:focus-visible, .button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid #454548; border-radius: 3px; outline: none; background: #111617; color: var(--text); }
input, select { height: 34px; padding: 0 9px; font-size: 13px; }
textarea { display: block; padding: 14px; font-size: 15px; line-height: 1.95; resize: vertical; tab-size: 2; }
input:focus, select:focus, textarea:focus { border-color: #b9aa91; box-shadow: 0 0 0 2px rgba(198,216,174,.07); }
input::placeholder, textarea::placeholder { color: var(--muted-2); opacity: 1; }
input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
select:disabled { color: #a3ada6; background: var(--panel-soft); }
label { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* One fixed-height production desk, with independently scrolling work areas. */
.studio-shell { display: grid; grid-template-rows: auto minmax(0,1fr) 28px; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
.studio-topbar { display: flex; align-items: center; gap: 20px; min-height: 62px; padding: 10px 17px; border-bottom: 1px solid #414144; background: #1d2223; }
.studio-brand { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }
.studio-brand-mark { width: 31px; height: 32px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linejoin: round; }
.studio-brand strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: .4px; }
.studio-brand div > span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .5px; }
.studio-breadcrumb { display: flex; align-items: center; min-width: 0; gap: 10px; color: var(--muted-2); font-size: 12px; }
.breadcrumb-divider { color: var(--muted-2); }
#studioProjectName { min-width: 0; max-width: 240px; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.studio-topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.prompt-library-toggle.is-active, .prompt-library-toggle[aria-current="page"] { border-color: #b9aa91; background: #333336; color: var(--text); }
.studio-topbar button, .studio-topbar .button { min-height: 31px; padding: 5px 9px; font-size: 12px; }
.icon-button svg, .inspector-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#toggleLibraryBtn[aria-expanded="true"], #toggleInspectorBtn[aria-expanded="true"] { border-color: #b9aa91; background: #333336; color: var(--text); }
.studio-body { position: relative; display: grid; grid-template-columns: var(--library-size) minmax(0,1fr) var(--inspector-size); min-height: 0; overflow: hidden; transition: grid-template-columns 440ms var(--ease); }
.studio-library, .studio-inspector { display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; background: var(--chrome); opacity: 1; visibility: visible; transition: opacity 330ms var(--ease),transform 440ms var(--ease),visibility 0s; }
.studio-library { width: 242px; border-right: 1px solid var(--line); }
.studio-inspector { width: 260px; border-left: 1px solid var(--line); }
body.is-library-closed { --library-size: 0px; }
body.is-inspector-closed { --inspector-size: 0px; }
body.is-library-closed .studio-library { visibility: hidden; opacity: 0; transform: translateX(-12px); pointer-events: none; transition: opacity 260ms ease,transform 440ms var(--ease),visibility 0s 440ms; }
body.is-inspector-closed .studio-inspector { visibility: hidden; opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity 260ms ease,transform 440ms var(--ease),visibility 0s 440ms; }
.studio-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
.workflow-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; flex: 0 0 auto; min-height: 48px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #1a1f20; }
.workflow-step { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 12px 14px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; transition: color 200ms ease,background 200ms ease,border-color 200ms ease; }
.workflow-step:hover { background: #262d2f; color: var(--text); }
.workflow-step.is-active { border-bottom-color: var(--brand); color: var(--text); background: #2d2d30; }
.workflow-step-index { color: var(--muted-2); font: 11px/1.6 Consolas,monospace; }
.workflow-step-copy strong { font-size: 13px; font-weight: 500; }
.workflow-step-copy small { display: none; }
.workspace-intro { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 16px; padding: 15px 22px 16px; }
.view-heading { min-width: 0; }
.view-eyebrow { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; letter-spacing: 1.1px; }
.workspace-intro h1 { margin: 0; font-size: 21px; font-weight: 550; line-height: 1.5; letter-spacing: .1px; }
.workspace-intro p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.studio-selection { flex: 0 0 auto; max-width: 34%; padding: 4px 8px; overflow: hidden; border: 1px solid #48484b; border-radius: 2px; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-view { flex: 1; min-width: 0; min-height: 0; padding: 0 20px 17px; overflow: auto; }
[data-workbench-view]:not([hidden]) { animation: studio-view-enter 520ms var(--ease) both; }
@keyframes studio-view-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.studio-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-width: 0; padding: 0 14px; border-top: 1px solid #3f3f42; background: #191e1f; color: var(--muted); font-size: 12px; }
.studio-statusbar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-indicator { display: inline-flex; align-items: center; gap: 7px; }
.local-indicator i { width: 5px; height: 5px; border-radius: 50%; background: #e4bf80; }
.studio-footer-brand { color: var(--muted-2); letter-spacing: .6px; }

/* Flat surfaces and thin rules; the editor supplies the visual weight. */
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--panel); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.panel-head > div:first-child { min-width: 0; }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 550; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mini-actions, .panel-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.panel-foot { padding: 10px 15px; border-top: 1px solid var(--line); }
.mini-actions button, .mini-actions .button { min-height: 30px; padding: 4px 9px; font-size: 12px; }
.studio-library .panel { flex: 0 0 auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.studio-library .panel-head { flex-wrap: wrap; padding: 14px 13px 10px; border: 0; }
.studio-library .panel-head h2 { color: var(--text); font-size: 13px; }
.studio-library .panel-head p { color: var(--muted-2); font-size: 12px; }
.project-panel .panel-head { gap: 7px; }
.project-panel .mini-actions { gap: 5px; }
.project-panel .mini-actions button { min-height: 27px; padding: 3px 7px; font-size: 12px; }
.project-fields { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 7px; padding: 0 13px; }
.project-fields label > span, .project-name-field > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.project-fields input, .project-fields select { height: 32px; font-size: 12px; }
.project-fields button { min-height: 32px; padding-inline: 7px; font-size: 12px; }
.project-meta { padding: 10px 13px 12px; }
.project-meta > summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.project-meta > label { display: block; margin-top: 10px; }
.field-status { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.queue-tools { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; padding: 1px 13px 11px; }
.queue-tools input, .queue-tools select { height: 31px; font-size: 12px; }
.episode-list { min-height: 120px; max-height: 380px; overflow-y: auto; padding: 0 9px 10px; }
.episode-empty, .inference-menu-empty { margin: 0; padding: 15px 10px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.library-export { padding: 0 13px 13px; gap: 6px; }
.library-export button { flex: 1; min-height: 29px; padding: 4px 6px; font-size: 12px; }
#exportZipBtn { border: 1px solid #69696c; background: #333336; color: var(--text); }
.episode-item { display: block; width: 100%; min-height: 64px; margin: 0 0 5px; padding: 10px; border: 1px solid transparent; border-radius: 2px; background: #262629; color: var(--text); text-align: left; white-space: normal; }
.episode-item:hover { border-color: #535356; background: #282e30; }
.episode-item.active { border-color: #b9aa91; background: #353538; }
.episode-item strong { display: block; margin-bottom: 4px; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.episode-item span { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.library-history { flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.library-history > summary { padding: 13px; color: var(--text); font-size: 13px; cursor: pointer; }
.section-kicker { color: var(--muted-2); font-size: 11px; letter-spacing: 1px; }
.library-history .section-kicker { float: right; }
.library-history .inference-menu-list { max-height: 400px; }
.sidebar-bottom { margin-top: auto; padding: 18px 13px 13px; }
.promotion-panel { padding: 10px; border: 1px dashed #49494c; }
.promotion-label { color: var(--muted); font-size: 12px; }
#promotionSlot { min-height: 48px; }

/* Primary editing views. */
[data-workbench-view="input"] { display: flex; flex-direction: column; gap: 11px; }
.script-panel { display: flex; flex: 1 0 340px; flex-direction: column; min-height: 340px; }
.script-panel .panel-head { flex: 0 0 auto; }
#scriptInput { flex: 1; min-height: 220px; height: auto; padding: 25px 27px; border: 0; border-radius: 0; background: var(--editor); font-size: 16px; line-height: 2.05; box-shadow: none; resize: none; }
.script-panel .panel-foot { flex: 0 0 auto; background: #1d2223; }
.output-panel { flex: 0 0 auto; background: #1a1f20; }
.output-panel > summary { display: flex; justify-content: flex-start; gap: 11px; padding: 11px 14px; border-bottom: 0; list-style: none; cursor: pointer; }
.output-panel > summary::-webkit-details-marker { display: none; }
.output-panel > summary::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-top: 1px solid #b9aa91; border-right: 1px solid #b9aa91; transform: rotate(45deg); transition: transform 240ms var(--ease); }
.output-panel[open] > summary::before { transform: rotate(135deg); }
.output-panel .panel-head h2 { font-size: 13px; }
.output-panel .panel-head p { font-size: 12px; color: var(--muted); }
.output-content { padding: 0 14px 14px; }
.output-content .mini-actions { margin-bottom: 11px; }
#packageOutput { min-height: 230px; height: 310px; font-size: 14px; }
.chunk-panel { flex: 0 0 auto; }
.chunk-size { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.chunk-size input { width: 90px; height: 30px; }
.chunk-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 10px; padding: 13px; }
.chunk-card { border: 1px solid var(--line); border-radius: 2px; background: #202526; overflow: hidden; }
.chunk-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.chunk-card strong { color: var(--text); font-size: 13px; }
.chunk-card p { min-height: 72px; max-height: 128px; margin: 0; padding: 10px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
[data-workbench-view="rules"] { display: flex; flex-direction: column; gap: 14px; }
.prompt-library-note { flex: 0 0 auto; margin: 0; max-width: 820px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.prompt-library-grid { display: grid; flex: 0 0 auto; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px; }
.prompt-library-card { display: flex; flex-direction: column; min-width: 0; }
.prompt-library-card > .panel-head { align-items: flex-start; }
.prompt-library-card-body { flex: 1; padding: 14px 15px 12px; }
.prompt-library-card-body > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.prompt-library-card-body > select { width: 100%; min-width: 0; }
.prompt-library-info { margin: 10px 0 0; min-height: 38px; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.prompt-library-status { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.prompt-library-status:empty { display: none; }
.custom-prompt-editor { flex: 0 0 auto; }
.custom-prompt-editor > summary { padding: 13px 15px; color: var(--text); font-size: 13px; cursor: pointer; }
.custom-prompt-editor[open] > summary { border-bottom: 1px solid var(--line); }
.custom-prompt-fields { display: flex; flex-direction: column; gap: 10px; padding: 15px; }
.custom-prompt-meta { display: grid; grid-template-columns: minmax(150px,1fr) minmax(180px,2fr); gap: 12px; margin-bottom: 4px; }
.custom-prompt-meta label { min-width: 0; }
.custom-prompt-meta label > span { display: block; margin-bottom: 7px; }
.custom-prompt-meta select, .custom-prompt-meta input { width: 100%; min-width: 0; }
.custom-prompt-fields label { color: var(--muted); font-size: 12px; }
#customPromptContent { min-height: 220px; height: clamp(220px,36vh,420px); padding: 16px; font-size: 14px; line-height: 1.9; background: var(--editor); }
.prompt-use-row { display: flex; flex: 0 0 auto; align-items: flex-end; flex-wrap: wrap; gap: 9px 12px; padding: 12px 14px; border: 1px solid var(--line); background: #1e1e21; }
.prompt-use-row > label { flex: 1 1 230px; min-width: 0; max-width: 620px; }
.prompt-use-row > label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.prompt-use-row select { width: 100%; min-width: 0; }
.prompt-use-row > button { flex: 0 0 auto; min-height: 34px; padding: 6px 11px; font-size: 12px; }
.prompt-use-row .prompt-use-status { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.prompt-use-status:empty { display: none; }
.storyboard-prompt-section { margin: 12px 0; }
.prompt-panel, .context-panel { flex: 0 0 auto; }
.main-template-row { display: flex; align-items: end; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: #1d2223; }
.main-template-row label { flex: 1; }
.main-template-row label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
#basePrompt { min-height: 350px; height: clamp(350px,47vh,650px); padding: 24px 27px; border: 0; border-radius: 0; background: var(--editor); font-size: 15px; line-height: 2; box-shadow: none; }
.context-panel .panel-head { align-items: flex-start; }
.script-context-panel { flex: 0 0 auto; }
.script-context-panel > summary { cursor: pointer; border-bottom: 0; }
.script-context-panel[open] > summary { border-bottom: 1px solid var(--line); }
.section-note { flex: 0 0 auto; padding: 1px 6px; border: 1px solid #555558; color: var(--muted); font-size: 12px; }
#globalContext { width: calc(100% - 30px); min-height: 170px; height: 220px; margin: 14px 15px 0; padding: 15px; font-size: 15px; }
.context-options { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 20px; padding: 13px 15px 16px; }
.check-row { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 12px; cursor: pointer; }
.check-row input { flex: 0 0 15px; margin-top: 3px; }
.context-options p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* Inspector: compact measurements, generation options and independent logs. */
.inspector-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 15px 13px; border-bottom: 1px solid var(--line); }
.inspector-head h2 { margin: 3px 0 0; color: var(--text); font-size: 15px; font-weight: 550; }
#closeInspectorBtn { min-height: 27px; width: 27px; padding: 0; border-color: transparent; font-size: 20px; }
.inspector-section { flex: 0 0 auto; margin: 0; padding: 13px; border-bottom: 1px solid var(--line); }
.inspector-section > h3 { margin: 0 0 11px; color: var(--text); font-size: 13px; font-weight: 500; }
.inspector-section > summary { color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.inspector-section > summary::marker, .library-history > summary::marker { color: var(--muted-2); }
.metrics { display: flex; flex-direction: column; gap: 10px; }
.metrics > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.metrics strong { color: var(--text); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.batch-settings-bar { display: flex; flex-direction: column; gap: 9px; padding: 13px 0 11px; }
.batch-settings-bar label { width: 100%; }
.batch-settings-bar label > span, .field-caption { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.batch-settings-bar p, .field-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.inspector-range { padding: 10px 0 12px; border-top: 1px solid var(--line); }
.range-inputs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.range-field { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.range-field input { width: 50px; height: 31px; padding: 0 5px; font-size: 12px; }
.inspector-config-link { width: 100%; justify-content: space-between; font-size: 12px; }
.split-settings { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 13px 0 0; }
.split-settings label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.split-settings input, .split-settings select { height: 32px; font-size: 12px; }
.workflow-options { margin: 0 0 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; }
.workflow-options > summary { cursor: pointer; color: var(--text); font-size: 13px; }
.workflow-options-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 24px; }
.workflow-options .inspector-range { padding: 13px 0 0; border: 0; }
.workflow-options .batch-settings-bar { padding-bottom: 0; }
.workflow-options .batch-settings-bar select { max-width: 200px; }
.workflow-options .split-settings { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.script-panel > .workflow-options { margin: 0 18px 14px; }
@media (max-width: 650px) { .workflow-options-body, .workflow-options .split-settings { grid-template-columns: minmax(0,1fr); } }
.inspector-logs { flex: 1 0 260px; min-height: 240px; }
.inference-log-panel { display: flex; flex-direction: column; min-width: 0; min-height: 190px; }
.inference-log-panel .inference-menu-head { padding: 10px 0 4px; color: var(--muted-2); font-size: 12px; }
.inference-log-list { flex: 1; min-height: 150px; max-height: 460px; overflow-y: auto; padding-top: 9px; }
.inference-log-item { margin: 0 0 13px; padding: 3px 5px 3px 9px; border-left: 2px solid #606063; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.inference-log-item time { display: block; margin-bottom: 3px; color: var(--muted-2); font-size: 12px; }
.inference-log-item.is-info { border-color: var(--info); }
.inference-log-item.is-think { border-color: #b8a7bf; }
.inference-log-item.is-think span { display: block; max-height: 280px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.inference-log-item.is-wait { border-color: var(--warn); color: var(--warn); }
.inference-log-item.is-ok { border-color: var(--success); }
.inference-log-item.is-error { border-color: var(--danger); color: var(--danger); }

/* Results and every dynamic history state. */
[data-workbench-view="inference"] { display: flex; flex-direction: column; gap: 12px; }
.inference-action-bar { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; background: transparent; }
.inference-generation-controls, .inference-result-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.inference-result-controls { padding-top: 10px; border-top: 1px solid var(--line); }
.inference-result-controls button { min-height: 30px; font-size: 12px; }
.inference-result-controls .danger-btn { margin-left: auto; }
.inference-body { display: flex; flex: 1 0 400px; min-height: 400px; }
.inference-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 380px; border: 1px solid var(--line); background: var(--editor); }
.batch-status { flex: 0 0 auto; max-height: 82px; padding: 10px 15px; overflow-y: auto; border-bottom: 1px solid var(--line); background: #202628; color: var(--muted); font-size: 12px; line-height: 1.7; }
.result-edit-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.result-edit-bar strong { color: var(--text); font-size: 14px; font-weight: 550; }
.result-edit-bar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.result-edit-bar button { flex: 0 0 auto; min-height: 31px; font-size: 12px; }
#inferenceOutput { flex: 1; min-height: 230px; height: auto; padding: 25px 27px; border: 0; border-radius: 0; background: var(--editor); resize: none; font-size: 16px; line-height: 2.05; box-shadow: none; }
.inference-menu { min-width: 0; }
.inference-menu-list { min-height: 0; padding: 0 9px 10px; overflow: auto; }
.inference-menu-item { display: block; width: 100%; height: auto; margin-bottom: 6px; padding: 10px; border: 1px solid transparent; border-radius: 2px; background: #202426; color: var(--text); text-align: left; white-space: normal; font-size: 13px; font-weight: 400; cursor: pointer; }
.inference-menu-item:hover { border-color: #4a5556; background: #282e30; }
.inference-menu-item.active { border-color: #b9aa91; background: #333336; }
.inference-menu-item.is-failed { border-color: #a8796d; }
.inference-menu-item.is-live { border-color: #b59b61; }
.inference-menu-item strong, .inference-menu-item span, .inference-menu-item em { display: block; }
.inference-menu-item strong { font-size: 13px; font-weight: 550; }
.inference-menu-item span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inference-menu-item em { margin-top: 5px; color: var(--success); font-size: 12px; font-style: normal; }
.inference-menu-item.is-failed em { color: var(--danger); }
.inference-menu-item.is-live em { color: var(--warn); }
.inference-menu-item.run-item[draggable="true"] { cursor: grab; }
.inference-menu-item .run-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 5px; }
.inference-menu-item .run-head strong { flex: 1; min-width: 40px; }
.inference-menu-item .run-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.inference-menu-item .run-actions button { min-height: 24px; height: 24px; padding: 2px 5px; border-radius: 2px; font-size: 12px; }
.inference-menu-item .run-retry { color: var(--muted); border-color: #5a5a5d; background: #2a3335; }
.inference-menu-item .run-delete { flex: 0 0 auto; min-height: 24px; padding: 2px 5px; background: transparent; border: 1px solid #8b6b60; color: #d5ad9b; font-size: 12px; }
.inference-menu-item .run-delete:hover { background: #4a3930; border-color: #c6927d; }
.inference-menu-item .run-stamp { margin: 2px 0; color: var(--muted); font-size: 12px; }
.inference-menu-list.is-locked .run-delete { display: none; }
.inference-menu-item.is-dragging { opacity: .4; }
.inference-menu-item.drop-before { box-shadow: 0 -3px 0 var(--brand); }
.inference-menu-item.drop-after { box-shadow: 0 3px 0 var(--brand); }

/* Complete API and animation integration forms. */
.model-provider-settings { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 20px; padding: 16px 17px; border-bottom: 1px solid var(--line); }
.model-provider-settings > label { width: min(250px,100%); }
.model-provider-settings > label > span { display: block; margin-bottom: 6px; color: var(--text); font-size: 13px; }
.model-provider-settings > p { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.codex-provider-panel { padding: 17px; border-bottom: 1px solid var(--line); background: #1f1f22; }
.codex-provider-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.codex-provider-head > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.codex-provider-head strong { font-size: 14px; font-weight: 550; }
.codex-provider-head > div > span { color: var(--muted); font: 12px/1.6 Consolas,monospace; }
.codex-provider-panel > p { margin: 12px 0 0; color: var(--text); font-size: 13px; line-height: 1.85; }
.codex-provider-panel > .codex-model-note { margin-top: 8px; color: var(--muted); font-size: 12px; }
.codex-status-row { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
#codexStatus[data-state="ready"] { color: var(--success); }
#codexStatus[data-state="unavailable"] { color: var(--warn); }
.is-codex-provider .api-default-hint, .is-codex-provider .api-token-hint { display: none; }
#codexBatchHint { color: var(--brand); }
.api-panel > .panel-head { align-items: flex-start; flex-wrap: wrap; padding: 17px; }
.api-panel > .panel-head > div:first-child { flex: 1 1 300px; }
.api-status-line { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.api-default-hint { color: var(--muted); }
.api-token-hint { display: block; flex-basis: 100%; color: var(--muted); font-size: 12px; }
.advanced-settings { border-bottom: 1px solid var(--line); }
.advanced-settings:last-child { border-bottom: 0; }
.advanced-settings > summary { padding: 13px 17px; background: #202627; color: var(--text); font-size: 13px; font-weight: 550; cursor: pointer; }
.advanced-settings > summary::marker { color: var(--muted); }
.advanced-settings[open] > summary { border-bottom: 1px solid var(--line); }
.api-profile-list { display: flex; flex-direction: column; }
.api-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 16px; padding: 17px; border-bottom: 1px solid var(--line); }
.api-settings.is-default { box-shadow: inset 2px 0 0 #b9aa91; background: #1b2021; }
.api-settings label > span, .zzdh-import-settings label > span, .zzdh-prompt-editor-fields label > span, .zzdh-style-name-field > span, .zzdh-style-modal-fields label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.api-settings input { font-size: 13px; }
.api-endpoint-row, .api-key-row { display: flex; align-items: center; gap: 6px; }
.api-endpoint-row input, .api-key-input { flex: 1; min-width: 0; }
.api-key-input { font-family: Consolas,monospace; font-size: 12px !important; }
.api-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.api-default-btn, .api-delete-btn, .api-test-btn { min-height: 30px; padding: 4px 9px; font-size: 12px; }
button.api-default-btn { border-color: #69858c; background: #29393d; color: #c4dae1; }
button.api-default-btn.is-default { background: #3b545d; border-color: #95b6c1; color: #dcebf0; }
button.api-delete-btn { background: #3c332e; border-color: #8b7365; color: #dfbdab; }
.api-key-toggle { flex: 0 0 33px; width: 33px; min-height: 33px; padding: 0; }
.api-key-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.api-key-toggle .icon-eye-off, .api-key-toggle.is-visible .icon-eye { display: none; }
.api-key-toggle.is-visible .icon-eye-off { display: block; }
.api-settings .checkbox-label { display: flex; align-items: center; gap: 8px; }
.api-settings .checkbox-label span { margin: 0; }
.zzdh-import-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 16px; padding: 17px; }
.zzdh-import-settings > label:first-child { grid-column: 1/-1; }
.zzdh-style-select-row { display: flex; align-items: center; gap: 7px; }
.zzdh-style-select-row select { flex: 1; min-width: 0; }
.zzdh-style-select-row button { flex: 0 0 auto; padding: 4px 7px; font-size: 12px; }
#importToZzdhBtn { min-height: 34px; }
.zzdh-prompt-editor { margin: 0 17px 17px; border: 1px solid #4d4d50; border-radius: 2px; }
.zzdh-prompt-editor > summary { padding: 12px 14px; color: var(--text); font-size: 13px; cursor: pointer; }
.zzdh-prompt-editor-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; color: var(--muted); font-size: 12px; }
.zzdh-prompt-editor-fields, .zzdh-style-modal-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 5px 14px 15px; }
.zzdh-prompt-editor-fields textarea { min-height: 210px; font-size: 14px; }
.zzdh-video-prompt-field { grid-column: 1/-1; }
.zzdh-video-prompt-field textarea { min-height: 120px; }
.zzdh-prompt-editor-fields textarea:disabled { background: #252a2c; color: var(--muted); }
button.danger-btn { border-color: #8d705f; color: #ddb29b; }
button.danger-btn:hover { border-color: #cc967a; color: #f0c1a4; background: #4b382c; }

/* Modals, status and accessible reduced motion. */
/* Novel adaptation presents one step at a time. */
.adaptation-view { display: flex; flex-direction: column; gap: 14px; }
.novel-wizard-header { flex: 0 0 auto; }
.novel-wizard-nav { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.novel-wizard-nav > button { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); background: #1f1f22; color: var(--muted); text-align: left; }
.novel-wizard-nav > button > span { color: var(--muted-2); font: 11px/1 Consolas,monospace; }
.novel-wizard-nav > button > strong { font-size: 12px; font-weight: 500; white-space: nowrap; }
.novel-wizard-nav > button.is-complete { border-color: #4b4b4e; color: #e4bf80; }
.novel-wizard-nav > button.is-active, .novel-wizard-nav > button[aria-current="step"] { border-color: #b9aa91; background: #333336; color: var(--text); }
.novel-wizard-nav > button[aria-current="step"] > span { color: #e4bf80; }
.novel-wizard-nav > button:disabled { opacity: .45; }
.novel-wizard-status { margin: 10px 1px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.novel-wizard-task.novel-task-bar { flex: 0 0 auto; margin: 0; padding: 10px 13px; border: 1px solid var(--line); background: #1c1c1f; }
.novel-wizard-task > button { flex: 0 0 auto; min-height: 30px; padding: 4px 10px; font-size: 12px; }
.novel-step { flex: 0 0 auto; }
.novel-step-enter { animation: studio-view-enter 520ms var(--ease) both; }
.novel-step-head { align-items: flex-start; gap: 12px; padding: 16px; }
.novel-back { flex: 0 0 auto; min-height: 30px; padding: 5px 9px; font-size: 12px; }
.novel-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 15px; }
.novel-plan-content { min-width: 0; padding: 16px; }
.novel-count-selection { display: flex; flex-direction: column; gap: 14px; margin-bottom: 17px; padding: 15px; border: 1px solid var(--line); border-radius: 2px; background: #1f1f22; }
.novel-count-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.novel-count-field > label { color: var(--text); font-size: 13px; font-weight: 550; }
.novel-count-field > select { width: 100%; max-width: 320px; }
.novel-count-recommendation { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 15px; min-width: 0; }
.novel-count-recommendation > button { flex: 0 0 auto; }
.novel-count-recommendation > p { flex: 1 1 240px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.novel-count-input { display: flex; align-items: center; gap: 9px; }
.novel-count-input > input { width: 160px; max-width: calc(100% - 25px); min-width: 0; }
.novel-count-input > span { color: var(--muted); font-size: 13px; }
#novelEpisodeCountHint { margin: 0; overflow-wrap: anywhere; }
.novel-plan-requirements { margin-bottom: 15px; }
#novelPlanRequirements { min-height: 95px; height: 110px; border: 0; border-radius: 0; }
.novel-plan-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 15px; }
.novel-plan-toolbar > .novel-note { flex: 1 1 220px; line-height: 1.8; overflow-wrap: anywhere; }
.novel-plan-list { display: flex; flex-direction: column; gap: 13px; margin-top: 17px; }
.novel-plan-list:empty { display: none; }
.novel-plan-item { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 2px; background: #1f1f22; }
.novel-plan-item-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.novel-plan-item-head > strong { color: var(--text); font-size: 13px; font-weight: 550; }
.novel-plan-item > summary { cursor: pointer; list-style: none; }
.novel-plan-item > summary::after { content: "+"; margin-left: auto; color: var(--muted); }
.novel-plan-item[open] > summary::after { content: "−"; }
.novel-plan-item label { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; color: var(--muted); font-size: 12px; }
.novel-plan-item input, .novel-plan-item textarea { width: 100%; min-width: 0; }
.novel-plan-item textarea { min-height: 95px; height: 120px; font-size: 14px; line-height: 1.8; }
.novel-episode-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 17px; }
.novel-episode-picker > label { color: var(--text); font-size: 13px; font-weight: 550; }
.novel-episode-picker > select { width: 100%; max-width: 620px; }
.novel-episode-picker > p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.novel-selected-prompt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; padding: 11px 13px; border: 1px solid var(--line); background: #1e1e21; }
.novel-selected-prompt > p { flex: 1 1 230px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.novel-selected-prompt > button { flex: 0 0 auto; min-height: 30px; padding: 5px 10px; font-size: 12px; }
.novel-step-title { display: flex; align-items: flex-start; gap: 12px; }
.novel-step-number { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--muted); font: 12px/1 Consolas,monospace; }
.novel-step-title h2 { padding-top: 2px; font-size: 15px; }
.novel-source-section, .novel-analysis-section, .novel-outline-content, .novel-openings-section, .novel-confirm-section, .novel-script-content { min-width: 0; padding: 16px; }
.novel-openings-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 15px; margin-bottom: 20px; }
.novel-openings-toolbar > .novel-note { flex: 1 1 220px; line-height: 1.8; }
#novelSynopsis { min-height: 150px; height: 180px; margin-bottom: 22px; padding: 16px; background: var(--editor); }
#novelOutline { min-height: 230px; height: 300px; margin-bottom: 10px; padding: 16px; background: var(--editor); }
.novel-openings-section { border-bottom: 1px solid var(--line); }
.novel-field-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px 14px; margin-bottom: 10px; }
.novel-field-head > label, .novel-field-head > h3, .novel-custom-content > label { margin: 0; color: var(--text); font-size: 13px; font-weight: 550; }
.novel-field-head .mini-actions { min-width: 0; }
.novel-note, .novel-section-note { color: var(--muted); font-size: 12px; font-weight: 400; }
.novel-section-note { margin: 0 0 12px; line-height: 1.8; }
#novelSourceName { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adaptation-view textarea { font-size: 15px; line-height: 1.95; }
.adaptation-view textarea[readonly] { background: #1b2021; color: #cbd1ce; }
#novelSource { min-height: 220px; height: 280px; padding: 18px; background: var(--editor); }
.novel-disclosure { border: 1px solid var(--line); border-radius: 2px; }
.novel-disclosure > summary { padding: 11px 13px; background: #202627; color: var(--text); font-size: 13px; cursor: pointer; }
.novel-disclosure > summary::marker { color: var(--muted); }
.novel-disclosure > summary .novel-note { margin-left: 9px; }
.novel-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.novel-requirements { margin-top: 12px; }
.novel-analysis-disclosure { margin-bottom: 17px; }
#novelRequirements { min-height: 95px; height: 110px; border: 0; border-radius: 0; }
.novel-task-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 13px; }
#novelTaskStatus { flex: 1 1 200px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
#novelAnalysis { min-height: 160px; height: 200px; }
.novel-candidates { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr)); gap: 10px; }
.novel-candidates:empty::before { content: "点击生成开头候选，再选择首集开场。"; grid-column: 1 / -1; padding: 22px 16px; border: 1px dashed #4d4d50; color: var(--muted-2); font-size: 13px; line-height: 1.8; text-align: center; }
.novel-candidates > .novel-empty { grid-column: 1 / -1; margin: 0; padding: 20px 16px; color: var(--muted); font-size: 13px; }
button.novel-candidate { display: block; align-self: stretch; width: 100%; height: auto; min-height: 175px; padding: 15px; border: 1px solid #47474a; border-radius: 3px; background: #202426; color: var(--text); text-align: left; white-space: normal; font-size: 13px; font-weight: 400; }
button.novel-candidate:hover { border-color: #767679; background: #282e30; }
button.novel-candidate.is-selected, button.novel-candidate.selected, button.novel-candidate.active, button.novel-candidate[aria-pressed="true"] { border-color: #b9aa91; background: #333336; box-shadow: inset 2px 0 0 var(--brand); }
.novel-candidate-index { display: inline-block; margin-bottom: 8px; color: var(--muted); font: 12px/1.6 Consolas,"Microsoft YaHei",sans-serif; }
.novel-candidate strong, .novel-candidate h4 { display: block; margin: 0 0 9px; color: var(--text); font-size: 14px; font-weight: 550; line-height: 1.65; }
.novel-candidate p { margin: 0 0 10px; color: #cbd1ce; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.novel-candidate small { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid #454548; color: var(--muted); font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.novel-custom-section { margin-top: 13px; }
.novel-custom-content { display: flex; flex-direction: column; gap: 10px; padding: 13px; }
.novel-custom-result { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.novel-custom-result > label { color: var(--text); font-size: 13px; font-weight: 550; }
#novelCustomIdea { min-height: 100px; height: 120px; }
#novelCustomOpening { min-height: 150px; height: 190px; }
.novel-custom-content > .mini-actions { margin-bottom: 4px; }
#novelOpening { min-height: 170px; height: 225px; margin-bottom: 12px; }
.novel-prompt-section { margin-bottom: 15px; }
.novel-generate-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 15px; margin-bottom: 0; }
#novelGenerationHint { flex: 1 1 230px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
#novelScriptTaskStatus { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
#novelScriptTaskStatus:empty { display: none; }
#novelDraft { min-height: 320px; height: 430px; padding: 19px; background: var(--editor); font-size: 16px; line-height: 2; }
.novel-draft-actions { gap: 8px; }
.novel-review { margin-bottom: 19px; padding: 15px 16px; border: 1px solid #555558; background: #202023; color: var(--text); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.novel-review h3, .novel-review h4 { margin: 0 0 8px; font-size: 14px; font-weight: 550; }
.novel-review p { margin: 7px 0; color: var(--muted); }
.novel-review ul, .novel-review ol { margin: 9px 0 0; padding-left: 22px; }
.novel-review li + li { margin-top: 7px; }
.novel-review-score { color: #e4bf80; font: 600 22px/1.3 Consolas,"Microsoft YaHei",sans-serif; }
.novel-review-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.novel-review.is-warning, .novel-review.is-failed { border-color: #73644b; background: #27251e; }
.novel-revision-section { margin-bottom: 19px; }
.novel-revision-content { display: flex; flex-direction: column; gap: 10px; padding: 13px; }
.novel-revision-content > label { color: var(--text); font-size: 13px; font-weight: 550; }
.novel-revision-content > p { margin: 0; }
#novelRevisionNotes { min-height: 100px; height: 120px; }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,9,7,.72); }
.modal-card { width: min(590px,100%); max-height: calc(100dvh - 48px); padding: 22px; overflow-y: auto; border: 1px solid #767679; border-radius: 5px; background: #202527; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
.modal-head h3 { margin: 0 0 8px; color: var(--text); font-size: 18px; font-weight: 550; }
.modal-head p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.modal-card textarea { min-height: 135px; font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.test-reply-field { display: block; margin-top: 15px; }
.test-reply-field > span { display: block; margin-bottom: 7px; color: var(--text); font-size: 12px; }
#testReplyOutput { min-height: 150px; background: #151b1d; }
.range-modal-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.range-modal-fields label > span { display: block; margin-bottom: 7px; color: var(--text); font-size: 12px; }
.modal-error { margin: 12px 0 0; color: var(--danger); font-size: 13px; }
.modal-preview { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.confirm-hot { color: #e4b997; font-weight: 600; }
.confirm-list { display: block; max-height: 220px; margin: 12px 0; padding: 10px 12px; overflow-y: auto; border: 1px solid #555558; background: #1b2223; }
.confirm-list-item { display: block; color: var(--text); font-size: 13px; line-height: 1.8; }
.zzdh-style-modal-card { width: min(870px,100%); }
.zzdh-style-name-field { display: block; margin-bottom: 16px; }
.zzdh-style-modal-fields { padding: 0; }
.zzdh-style-modal-fields textarea { min-height: 145px; }
#toast { position: fixed; z-index: 110; right: 22px; bottom: 44px; max-width: min(460px,calc(100% - 30px)); padding: 12px 16px; border: 1px solid #b9aa91; border-radius: 3px; background: #293134; color: var(--text); box-shadow: 0 10px 35px rgba(0,0,0,.3); font-size: 13px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 320ms var(--ease),transform 420ms var(--ease); }
#toast.show { opacity: 1; transform: translateY(0); }
.studio-library, .studio-inspector, .workbench-view, textarea, .episode-list, .inference-menu-list, .inference-log-list, .batch-status, .modal-card { scrollbar-width: thin; scrollbar-color: #5a5a5d transparent; scrollbar-gutter: stable; }

@media (min-width: 1600px) {
  .workbench-view { padding-inline: 28px; } .workspace-intro { padding-inline: 29px; }
  .api-settings, .zzdh-import-settings { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1179.98px) {
  .novel-wizard-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .studio-body { grid-template-columns: var(--library-size) minmax(0,1fr); }
  .studio-inspector { position: absolute; z-index: 35; inset: 0 0 0 auto; width: 292px; box-shadow: -12px 0 35px rgba(0,0,0,.35); }
  body.is-inspector-closed .studio-inspector { transform: translateX(100%); }
  .studio-breadcrumb { flex: 1; } #studioProjectName { max-width: 180px; }
  .studio-topbar { gap: 14px; }
  .workflow-steps { padding-inline: 7px; } .workflow-step { flex: 1; gap: 5px; padding-inline: 8px; } .workflow-step-index { display: none; }
  .workspace-intro { padding: 13px 16px; } .workspace-intro h1 { font-size: 19px; }
  .workbench-view { padding-inline: 15px; padding-bottom: 15px; }
  .panel-head { flex-wrap: wrap; } .inference-result-controls .danger-btn { margin-left: 0; }
}
@media (max-width: 900px) {
  .studio-breadcrumb { display: none; } .studio-topbar { gap: 12px; }
  .studio-topbar-actions { gap: 6px; } .studio-topbar button, .studio-topbar .button { padding-inline: 7px; font-size: 12px; }
  .workflow-step-copy strong { font-size: 12px; } .studio-selection { max-width: 32%; font-size: 12px; }
  #scriptInput, #inferenceOutput { padding: 20px; font-size: 15px; }
  .api-settings, .zzdh-import-settings, .zzdh-prompt-editor-fields { grid-template-columns: minmax(0,1fr); }
  .inference-generation-controls button, .inference-result-controls button { font-size: 12px; }
}
@media (max-width: 759.98px) {
  .studio-shell { grid-template-rows: auto minmax(0,1fr) 27px; }
  .studio-body { grid-template-columns: minmax(0,1fr); }
  .studio-library { position: absolute; z-index: 36; inset: 0 auto 0 0; width: min(292px,90vw); box-shadow: 14px 0 35px rgba(0,0,0,.4); }
  body.is-library-closed .studio-library { transform: translateX(-100%); }
  .studio-inspector { width: min(292px,90vw); }
  .studio-topbar { min-height: 56px; flex-wrap: wrap; gap: 8px 12px; padding: 9px 11px; }
  .studio-brand strong { font-size: 15px; } .studio-brand div > span { display: none; } .studio-brand-mark { width: 26px; height: 28px; }
  .studio-topbar-actions { flex: 1 1 auto; justify-content: flex-end; }
  .studio-topbar button, .studio-topbar .button { min-height: 28px; padding: 4px 7px; font-size: 12px; }
  .workflow-steps { min-height: 44px; padding-inline: 5px; } .workflow-step { flex: 1; padding: 10px 4px; } .workflow-step-copy strong { font-size: 12px; white-space: nowrap; }
  .workspace-intro { padding: 11px 12px; } .workspace-intro h1 { font-size: 17px; } .view-eyebrow { font-size: 11px; }
  .workspace-intro p { font-size: 12px; } .studio-selection { max-width: 32%; font-size: 12px; }
  .workbench-view { padding: 0 10px 12px; } .panel-head { padding: 11px 12px; } .panel-head h2 { font-size: 13px; }
  .script-panel { flex-basis: 330px; min-height: 330px; } #scriptInput { min-height: 225px; padding: 18px; }
  .panel-foot { padding: 9px 12px; } .output-panel > summary { padding: 10px 12px; }
  .result-edit-bar { flex-wrap: wrap; padding: 11px 13px; } .result-edit-bar button { margin-left: auto; } #inferenceOutput { padding: 18px; }
  .inference-main { min-height: 370px; } .main-template-row { padding: 11px 12px; gap: 8px; } .main-template-row button { font-size: 12px; padding-inline: 8px; }
  #basePrompt { min-height: 350px; height: 420px; padding: 20px; }
  .api-panel > .panel-head, .api-settings, .zzdh-import-settings { padding: 13px; } .advanced-settings > summary { padding: 12px 13px; }
  .zzdh-prompt-editor { margin: 0 13px 13px; } .zzdh-style-modal-fields { grid-template-columns: minmax(0,1fr); }
  .modal { padding: 12px; } .modal-card { max-height: calc(100dvh - 24px); padding: 18px; }
  .studio-statusbar { padding-inline: 10px; font-size: 12px; } .studio-footer-brand { display: none; }
}
@media (max-width: 460px) {
  .studio-topbar-actions { flex-basis: 100%; justify-content: space-between; } .studio-topbar-actions button, .studio-topbar-actions .button { flex: 1; }
  #toggleLibraryBtn { margin-left: auto; } .studio-brand { gap: 7px; }
  .workspace-intro p { font-size: 12px; } .studio-selection { display: none; }
  .inference-result-controls { gap: 6px; } .inference-result-controls button { padding-inline: 7px; }
  .chunk-list { grid-template-columns: minmax(0,1fr); } .studio-statusbar > :last-child { max-width: 50%; }
}
@media (max-width: 600px) {
  .workflow-steps { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; padding-inline: 5px; }
  .workflow-step { min-height: 39px; padding: 9px 4px; }
  .prompt-library-grid, .custom-prompt-meta { grid-template-columns: minmax(0,1fr); }
  .prompt-use-row { padding: 11px 12px; }
  .prompt-use-row > label { flex-basis: 180px; }
  .novel-step-head { padding: 13px 12px; }
  .novel-wizard-nav { gap: 4px; }
  .novel-wizard-nav > button { justify-content: center; flex-direction: column; gap: 6px; padding: 9px 3px; }
  .novel-wizard-nav > button > strong { font-size: 11px; }
  .novel-step-head { flex-wrap: wrap; }
  .novel-step-title { gap: 9px; }
  .novel-step-title h2 { font-size: 14px; }
  .novel-step-number { flex-basis: 25px; width: 25px; height: 26px; }
  .novel-source-section, .novel-analysis-section, .novel-outline-content, .novel-openings-section, .novel-confirm-section, .novel-script-content, .novel-plan-content { padding: 13px 12px; }
  .novel-field-head { align-items: flex-start; }
  .novel-field-head .mini-actions { width: 100%; justify-content: space-between; }
  .novel-count-selection { padding: 12px; }
  .novel-count-field > select { max-width: none; }
  .novel-count-recommendation { flex-direction: column; }
  .novel-count-recommendation > p { flex: 0 1 auto; width: 100%; }
  #novelSourceName { max-width: 150px; }
  #novelSource { height: 250px; padding: 15px; }
  #novelSynopsis, #novelOutline { padding: 13px; }
  #novelOutline { height: 260px; }
  .novel-review { padding: 12px; }
  .novel-candidates { grid-template-columns: minmax(0,1fr); }
  button.novel-candidate { min-height: 0; padding: 13px; }
  .novel-disclosure > summary { padding-inline: 11px; }
  .novel-disclosure > summary .novel-note { display: inline; margin-left: 6px; }
  .novel-custom-content { padding: 11px; }
  #novelDraft { min-height: 300px; height: 390px; padding: 16px; font-size: 15px; }
  .novel-draft-actions button { padding-inline: 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The screenplay editor is optional between novel adaptation and storyboards. */
.handoff-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid #b9aa91; background: #1e1e21; }
.handoff-bar > div:first-child { flex: 1 1 270px; min-width: 0; }
.handoff-bar strong { color: var(--text); font-size: 14px; font-weight: 550; }
.handoff-bar p, .handoff-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.handoff-bar .mini-actions { flex-wrap: wrap; }
.handoff-note { padding: 12px 18px; }
.novel-draft-actions #novelToStoryboardBtn { margin-right: 4px; }
@media (max-width: 600px) {
  .handoff-bar { padding: 12px; gap: 10px; }
  .handoff-bar .mini-actions { width: 100%; }
  .handoff-bar .mini-actions button { flex: 1 1 auto; font-size: 12px; }
  .handoff-note { padding: 10px 12px; }
}
/* 分镜候选稿与交付正文分开，检查信息按需展开。 */
.storyboard-review-status { margin: 0; padding: 12px 18px; color: var(--accent, #e4bf80); border-bottom: 1px solid var(--border, #37373a); font-size: 12px; line-height: 1.6; }
.storyboard-failure { margin: 18px; padding: 18px 20px; border: 1px solid #75554c; border-left: 3px solid #b77f6f; background: #28211f; }
.storyboard-failure strong { color: #dfab9b; font-size: 16px; font-weight: 550; }
.storyboard-failure p { margin: 9px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #c4b7b0; font-size: 13px; line-height: 1.8; }
.storyboard-regenerate-actions { display: flex; justify-content: flex-end; padding: 10px 18px; }
.storyboard-score-panel { padding: 16px 18px; border-bottom: 1px solid #424245; background: #202023; }
.storyboard-score-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.storyboard-score-heading strong { color: #e4bf80; font-size: 16px; font-weight: 550; }
.storyboard-score-heading span, .storyboard-score-panel p { color: #b9aa91; font-size: 12px; line-height: 1.7; }
.storyboard-score-panel > p { margin: 9px 0; }
.storyboard-score-dimensions { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; margin: 12px 0; }
.storyboard-score-dimension { padding: 10px 12px; border: 1px solid #3c3c3f; background: #1a1a1d; }
.storyboard-score-dimension strong { display: block; color: #e4bf80; font-size: 12px; }
.storyboard-score-dimension p { margin: 6px 0 0; overflow-wrap: anywhere; }
.storyboard-score-panel details { font-size: 12px; color: #e4bf80; }
.storyboard-score-panel summary { cursor: pointer; }
.storyboard-score-panel ul { padding-left: 20px; line-height: 1.8; }
.storyboard-score-panel li { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.storyboard-score-panel .storyboard-score-note { margin-bottom: 0; color: #b9aa91; }

/* Account quota and the browser's request ledger have distinct scopes. */
.usage-panel { margin: 0 18px 18px; padding: 17px 18px; border: 1px solid var(--line); background: #1d1d20; }
.usage-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.usage-panel h3 { margin: 0; color: var(--text); font-size: 14px; font-weight: 550; }
.usage-panel h4 { margin: 13px 0 10px; color: var(--muted); font-size: 12px; font-weight: 500; }
.usage-panel-note, .usage-panel-status { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.usage-panel-status { color: #e4bf80; }
.usage-panel-status:empty { display: none; }
.usage-window-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.usage-window { padding: 13px 14px; border: 1px solid #3b3b3e; background: #18181b; }
.usage-window-label { display: block; color: var(--muted); font-size: 12px; }
.usage-remaining { display: inline-block; margin: 7px 10px 8px 0; color: #e4bf80; font-size: 23px; font-weight: 500; letter-spacing: -.5px; }
.usage-used { color: var(--muted); font-size: 12px; white-space: nowrap; }
.usage-meter { height: 5px; overflow: hidden; background: #363639; }
.usage-meter > span { display: block; height: 100%; background: #b9aa91; }
.usage-reset { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; }
.usage-quota[data-stale="true"] .usage-remaining { color: #aaa997; }
.usage-tokens { margin-top: 12px; padding-top: 3px; border-top: 1px solid var(--line); }
.usage-token-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.usage-token-metric > span, .usage-token-metric > small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
.usage-token-metric > strong { display: block; margin-top: 5px; color: var(--text); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.usage-latest { margin-top: 13px; }
.usage-retention { opacity: .8; font-size: 11px; }
.usage-help { display: inline-block; margin-top: 9px; color: #b9aa91; font-size: 11px; }
.usage-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 15px; }
.usage-filters label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.usage-filters select { width: auto; min-width: 115px; padding: 5px 10px; }
.usage-stage-list, .usage-recent { margin-top: 18px; }
.usage-stage-row { display: grid; grid-template-columns: minmax(0,1fr) 55px minmax(100px,1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #2f2f32; color: var(--muted); font-size: 12px; }
.usage-stage-row > strong { justify-self: end; color: var(--text); font-weight: 500; }
.usage-recent-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 9px 0; border-bottom: 1px solid #2f2f32; }
.usage-recent-row > div { min-width: 0; }
.usage-recent-row strong { display: block; color: var(--text); font-size: 12px; font-weight: 500; }
.usage-recent-row > div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.usage-recent-total { flex-shrink: 0; color: #e4bf80; font-size: 12px; }
.usage-coverage { margin-top: 15px; }
.usage-account { margin-top: 19px; border-top: 1px solid var(--line); }
.usage-account > summary { padding: 13px 0 0; color: var(--muted); cursor: pointer; font-size: 12px; }
.usage-account-body { padding-top: 4px; }
.usage-account-body > button { margin-top: 10px; }
@media (max-width: 600px) {
  .usage-panel { margin: 0 13px 13px; padding: 13px; }
  .usage-window-grid { grid-template-columns: minmax(0,1fr); }
  .usage-token-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .usage-panel-head > button { flex-shrink: 0; font-size: 12px; }
}

/* Hongyuan / warm graphite workspace. Navigation stays visible; tools open on demand. */
:root {
  --bg: #0d0e11; --chrome: #111216; --panel: #191a20; --panel-soft: #202128; --editor: #14151a;
  --line: #2b2c34; --line-strong: #51505a; --text: #efedf1; --muted: #a5a3af; --muted-2: #85838e;
  --brand: #e4b76e; --brand-strong: #f2ce92; --brand-soft: #30281e;
  --success: #9dc9af; --warn: #e6ba76; --danger: #e69b98; --info: #acbbd6;
  --navigation-width: 208px;
}
body { font-size: 14px; -webkit-font-smoothing: antialiased; }
button, .button { min-height: 37px; padding: 8px 14px; border-radius: 9px; color: #292014; font-weight: 550; transition: background 220ms ease,border-color 220ms ease,box-shadow 220ms ease; }
button:not(.ghost):not(:disabled):hover, .button:not(.ghost):hover { box-shadow: 0 3px 16px #e4b76e18; }
button.ghost, .button.ghost { background: #ffffff03; border-color: #383840; color: #cecad3; }
button.ghost:hover, .button.ghost:hover { background: #ffffff08; border-color: #71604b; color: #f0d4a7; }
input, select, textarea { border-color: #373740; border-radius: 9px; background: #ffffff04; }
input, select { height: 38px; padding-inline: 11px; }
input:focus, select:focus, textarea:focus { border-color: #b68c51; box-shadow: 0 0 0 3px #e4b76e0d; }
select option { background: #1b1c22; color: var(--text); }
button:disabled { opacity: .45; }
.studio-shell { grid-template-rows: 66px minmax(0,1fr) 26px; }
.studio-topbar { padding: 10px 22px; gap: 20px; background: #111216; border-color: var(--line); }
.studio-brand { min-width: 166px; gap: 11px; }
.studio-brand-mark { width: 30px; height: 30px; padding: 4px; background: #e4b76e10; border-radius: 8px; stroke: var(--brand); }
.studio-brand strong { font-size: 16px; letter-spacing: 1px; color: #e9c58c; }
.studio-brand div > span { font-size: 9px; letter-spacing: 1.8px; color: #85808a; }
.studio-topbar-actions { gap: 9px; }
.studio-topbar button, .studio-topbar .button { min-height: 33px; border-radius: 8px; padding-inline: 11px; }
.studio-breadcrumb { font-size: 12px; }
#toggleLibraryBtn[aria-expanded="true"], #toggleInspectorBtn[aria-expanded="true"] { background: #e4b76e12; border-color: #8a6d42; color: var(--brand); }
.studio-body { grid-template-columns: var(--navigation-width) minmax(0,1fr); transition: none; }
.studio-navigation { grid-column: 1; display: flex; flex-direction: column; min-height: 0; padding: 20px 13px 16px; overflow-y: auto; border-right: 1px solid var(--line); background: radial-gradient(ellipse at top left,#e4b76e08,transparent 55%),#111216; }
.navigation-space { display: flex; gap: 10px; align-items: center; padding: 11px 10px; margin-bottom: 20px; border: 1px solid #35343c; border-radius: 12px; background: linear-gradient(115deg,#ffffff05,#ffffff01); }
.navigation-space-mark { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 8px; background: #e4b76e15; color: var(--brand); font: 500 17px Georgia,serif; }
.navigation-space strong { display: block; font-size: 12px; font-weight: 500; }
.navigation-space div > span { color: var(--muted-2); font-size: 10px; }
.workflow-steps { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 0; border: 0; background: transparent; }
.navigation-caption { display: block; margin: 19px 10px 6px; color: #85818d; font-size: 11px; letter-spacing: 1px; }
.navigation-caption:first-child { margin-top: 0; }
.workflow-step, .workflow-steps .prompt-library-toggle { position: relative; display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; gap: 12px; width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #b6b2bf; font-size: 13px; text-align: left; }
.workflow-step svg, .workflow-steps .prompt-library-toggle svg { flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.workflow-step-copy strong { font-size: 13px; font-weight: 450; }
.workflow-step:hover, .workflow-steps .prompt-library-toggle:hover { background: #ffffff05; border-color: #ffffff08; color: #eee8de; }
.workflow-step.is-active, .workflow-steps .prompt-library-toggle.is-active { border-color: #7d674652; background: linear-gradient(100deg,#e4b76e14,#c7b0ff05); color: #eac48a; box-shadow: inset 0 1px #ffffff05; }
.workflow-step.is-active::before, .workflow-steps .prompt-library-toggle.is-active::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--brand); }
.studio-navigation .sidebar-bottom { margin-top: auto; padding: 26px 2px 0; }
.promotion-panel { min-height: 98px; padding: 14px; border: 1px dashed #3b3540; border-radius: 12px; background: #ffffff02; }
.promotion-label { color: #85818d; font-size: 11px; }
.studio-main { grid-column: 2; background: radial-gradient(ellipse at 10% 0%,#c5974e06,transparent 50%),var(--bg); }
.workspace-intro { width: min(100%,1256px); margin-inline: auto; padding: 30px 36px 24px; }
.view-eyebrow { color: #aa8c62; font-size: 10px; letter-spacing: 2px; margin-bottom: 7px; }
.workspace-intro h1 { font-size: 27px; font-weight: 600; letter-spacing: .5px; line-height: 1.4; }
.workspace-intro p { margin-top: 8px; font-size: 13px; color: #96929f; }
.studio-selection { border-color: #47403a; border-radius: 20px; background: #e4b76e07; color: #c7b89f; padding: 5px 12px; }
.workbench-view { width: min(100%,1256px); margin-inline: auto; padding: 0 36px 30px; }
.panel { border-radius: 14px; border-color: var(--line); background: linear-gradient(130deg,#1c1d23,#17181e); box-shadow: 0 6px 22px #00000014; }
.panel-head { padding: 18px 20px; border-color: #ffffff08; }
.panel-head h2 { font-size: 15px; font-weight: 550; }
.panel-head p { margin-top: 6px; font-size: 12px; color: var(--muted); }
.panel-foot { padding: 13px 20px; border-radius: 0 0 14px 14px; }
.script-panel .panel-foot, .main-template-row { background: #ffffff02; }
.script-panel { min-height: 380px; }
#scriptInput, #inferenceOutput { padding: 28px; font-size: 15px; line-height: 2.1; background: #121318; }
.script-panel .panel-head, .result-edit-bar { background: transparent; }
.handoff-bar { border: 1px solid #6a553233; border-radius: 12px; padding: 16px 20px; background: linear-gradient(105deg,#e4b76e0b,#ffffff02); }
.handoff-bar strong { font-size: 13px; color: #ddc5a0; }
.handoff-bar p { color: var(--muted); }
.handoff-note { padding-inline: 20px; }
.prompt-use-row { border-radius: 11px; background: #ffffff02; }
.prompt-library-card-body { padding: 20px; }
.prompt-library-card > .panel-foot { background: #ffffff02; }
.prompt-library-info { margin-top: 13px; }
.chunk-card { border-radius: 10px; background: #202127; }
.section-note { border-radius: 5px; border-color: #514537; color: #b8aa96; }
.output-panel, .script-context-panel { background: #17181e; box-shadow: none; }
.output-panel > summary, .script-context-panel > summary { padding: 16px 20px; }
.studio-library, .studio-inspector { position: absolute; top: 12px; bottom: 12px; z-index: 40; width: min(300px,calc(100% - var(--navigation-width) - 24px)); border: 1px solid #41404a; border-radius: 14px; background: #1a1b22; box-shadow: 0 16px 64px #0009; }
.studio-library { left: calc(var(--navigation-width) + 12px); right: auto; }
.studio-inspector { right: 12px; left: auto; }
body.is-library-closed .studio-library { transform: translateX(-12px); }
body.is-inspector-closed .studio-inspector { transform: translateX(12px); }
.library-drawer-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 13px 16px; border-bottom: 1px solid var(--line); color: #dfc397; font-size: 13px; }
#closeLibraryBtn { width: 28px; min-height: 28px; padding: 0; border-color: transparent; font-size: 20px; }
.studio-library .panel { box-shadow: none; }
.studio-library .panel-head { padding: 17px 15px 12px; }
.project-fields, .project-meta, .queue-tools { padding-inline: 15px; }
.episode-item, .inference-menu-item { border-radius: 9px; background: #22232b; margin-bottom: 8px; }
.episode-item:hover, .inference-menu-item:hover { background: #2a2a33; border-color: #54505b; }
.episode-item.active, .inference-menu-item.active { background: #e4b76e0e; border-color: #8b6c45; }
#exportZipBtn { background: #e4b76e12; color: #e1be86; border-color: #765e3f; }
.inference-menu-item .run-actions button { border-radius: 5px; }
.inference-main { border-radius: 14px; overflow: hidden; }
.batch-status { background: #1c1d24; padding: 12px 20px; }
.result-edit-bar { padding: 17px 20px; }
.storyboard-score-panel, .novel-review { border-color: #62513a; background: #e4b76e08; }
.novel-review { border-radius: 11px; }
.storyboard-score-dimension { border-radius: 9px; border-color: #393630; background: #ffffff03; }
.storyboard-score-heading strong, .novel-review-score, .storyboard-score-dimension strong { color: #e4bf80; }
.storyboard-failure { border-radius: 10px; }
.novel-wizard-header { margin-bottom: 18px; }
.novel-wizard-nav { gap: 8px; background: transparent; }
.novel-wizard-nav > button { border-radius: 10px; border: 1px solid #2d2d35; background: #16171c; min-height: 51px; padding: 10px 12px; gap: 8px; }
.novel-wizard-nav > button > span { border-radius: 7px; background: #ffffff05; color: #9c98a5; border: 0; }
.novel-wizard-nav > button.is-active { background: linear-gradient(115deg,#e4b76e12,#ffffff02); border-color: #8b6d435c; color: #efd1a0; }
.novel-wizard-nav > button.is-active > span { background: #e4b76e1c; color: #f0c989; }
.novel-wizard-status { margin-top: 12px; color: #a49fae; }
.novel-step-head { padding: 21px 24px; }
.novel-step-title { gap: 13px; }
.novel-step-number { border-radius: 10px; background: #e4b76e12; border-color: #e4b76e20; color: #e7bc79; }
.novel-step-title h2 { font-size: 17px; }
.novel-source-section, .novel-outline-content, .novel-openings-section, .novel-confirm-section, .novel-script-content, .novel-plan-content { padding: 22px 24px; }
.novel-source-section > .novel-prompt-section { padding: 15px; margin-bottom: 20px; }
#novelSource { height: clamp(230px,32vh,420px); padding: 20px; background: #121318; }
.novel-disclosure { border-radius: 10px; background: #ffffff02; border-color: #313139; }
.novel-step-actions { padding-top: 18px; gap: 10px; }
.novel-count-selection, .novel-plan-item, button.novel-candidate { border-radius: 11px; background: #ffffff02; }
.novel-count-selection { padding: 18px; }
.novel-candidate.is-selected { border-color: #aa834b; background: #e4b76e0c; }
.api-panel { overflow: hidden; }
.model-provider-settings, .api-settings, .zzdh-import-settings { padding: 20px; }
.codex-provider-panel { background: #ffffff02; padding: 20px; }
.usage-panel { border-radius: 12px; background: #ffffff02; }
.usage-window { border-radius: 10px; background: #131419; }
.usage-meter { border-radius: 5px; background: #343139; }
.usage-meter > span { background: var(--brand); }
.modal { background: #06070bcc; backdrop-filter: blur(6px); }
.modal-card { border-color: #51493e; border-radius: 16px; padding: 26px; background: #1b1c23; }
#toast { border-color: #746044; border-radius: 10px; background: #25232a; }
.studio-statusbar { background: #111216; border-color: var(--line); color: #93909b; font-size: 10px; padding-inline: 20px; }
.local-indicator i { background: #82bd9a; }
.studio-footer-brand { font-size: 9px; letter-spacing: 1.4px; }
.studio-navigation, .studio-library, .studio-inspector, .workbench-view, textarea, .episode-list, .inference-menu-list, .inference-log-list, .batch-status, .modal-card { scrollbar-color: #46434d transparent; }
@media (max-width: 1179.98px) {
  :root { --navigation-width: 184px; }
  .studio-topbar { padding-inline: 17px; gap: 14px; }
  .studio-brand { min-width: 150px; }
  .workspace-intro { padding: 25px 24px 20px; }
  .workbench-view { padding-inline: 24px; }
  .workflow-step { padding-inline: 10px; }
  .studio-breadcrumb { display: none; }
  .workspace-intro h1 { font-size: 25px; }
}
@media (max-width: 759.98px) {
  :root { --navigation-width: 76px; }
  .studio-shell { grid-template-rows: auto minmax(0,1fr) 25px; }
  .studio-topbar { min-height: 60px; gap: 8px 12px; padding: 10px 12px; }
  .studio-brand { min-width: 0; }
  .studio-brand strong { font-size: 14px; }
  .studio-brand div > span { display: none; }
  .studio-topbar-actions { justify-content: flex-end; gap: 6px; }
  .studio-topbar button, .studio-topbar .button { padding-inline: 8px; font-size: 11px; }
  .studio-navigation { padding: 16px 5px 12px; }
  .navigation-space { justify-content: center; padding: 0 0 14px; margin-bottom: 0; border: 0; background: transparent; }
  .navigation-space > div, .navigation-caption, .studio-navigation .sidebar-bottom { display: none; }
  .workflow-steps { gap: 9px; }
  .workflow-step, .workflow-steps .prompt-library-toggle { flex-direction: column; gap: 5px; padding: 10px 2px; min-height: 62px; }
  .workflow-step-copy strong, .workflow-steps .prompt-library-toggle { font-size: 10px; }
  .workflow-step svg, .workflow-steps .prompt-library-toggle svg { flex-basis: 20px; }
  .workspace-intro { padding: 22px 16px 18px; }
  .workspace-intro h1 { font-size: 22px; }
  .workspace-intro p { font-size: 12px; }
  .workbench-view { padding: 0 14px 22px; }
  .studio-selection { display: none; }
  .novel-step-head, .novel-source-section, .novel-outline-content, .novel-openings-section, .novel-confirm-section, .novel-script-content, .novel-plan-content { padding: 16px; }
  .novel-wizard-nav { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .novel-wizard-nav > button { padding: 9px 3px; gap: 5px; }
  .panel-head { padding: 15px; }
  #scriptInput, #inferenceOutput { padding: 18px; }
  .panel-foot { padding: 12px 15px; }
  .studio-library { left: calc(var(--navigation-width) + 8px); }
  .studio-inspector { right: 8px; }
  .studio-library, .studio-inspector { top: 8px; bottom: 8px; width: min(300px,calc(100% - var(--navigation-width) - 16px)); }
  .prompt-library-grid { grid-template-columns: minmax(0,1fr); }
  .handoff-bar { padding: 15px; }
  .api-settings, .zzdh-import-settings, .usage-panel { padding: 15px; }
}
@media (max-width: 460px) {
  .studio-topbar-actions { flex-basis: 100%; }
  .studio-topbar-actions > * { flex: 1; }
  .novel-step-title h2 { font-size: 15px; }
  .novel-step-number { display: none; }
  .workspace-intro { padding-inline: 13px; }
  .workbench-view { padding-inline: 10px; }
  .novel-step-actions > button { width: 100%; white-space: normal; }
  .novel-field-head .mini-actions { flex-wrap: wrap; }
}
/* Keep the complete navigation reachable while leaving room for mobile creation. */
.public-workbench .studio-navigation [data-studio-view="agent"],
.public-workbench .studio-navigation [data-studio-view="novelCreate"] { display: none; }
@media (max-width: 759.98px) {
  :root { --navigation-width: 60px; }
  .studio-topbar-actions { min-width: 0; }
  .studio-topbar-actions .account-member-note { display: none; }
  .studio-topbar-actions .commerce-account-button { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .studio-topbar-actions > #toggleInspectorBtn { flex: 0 0 auto; }
  #toggleInspectorBtn span { display: none; }
  #toggleInspectorBtn { min-width: 36px; min-height: 36px; }
  .media-notice { overflow-wrap: anywhere; margin: 8px 10px; }
  .studio-statusbar { font-size: 10px; }
}
:root { --creation-control-border: rgba(206, 173, 113, .28); }
.creation-model-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; padding:14px 16px; margin:0 0 16px; border:1px solid var(--creation-control-border); border-radius:12px; background:rgba(255,255,255,.035); }
.creation-model-bar label { flex:1 1 240px; min-width:0; max-width:520px; display:flex; flex-direction:column; gap:7px; }
.creation-model-bar label>span { font-size:12px; color:#d8c39e; }
.creation-model-bar select { width:100%; min-height:40px; background:#18191e; color:#eee; border:1px solid #48434d; border-radius:8px; padding:8px 12px; }
.creation-model-bar p { flex-basis:100%; margin:0; color:#a6a3af; font-size:12px; line-height:1.6; }
.storyboard-compose .creation-model-bar { margin:10px 0; padding:10px 12px; }
.reference-pricing-view { width:100%; max-width:1180px; margin:0 auto; }
.reference-pricing-view .panel { margin:18px 0; padding:24px; }
.reference-price-tabs { display:flex; flex-wrap:wrap; gap:10px; }
.reference-table-scroll { overflow:auto; }
.reference-price-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.reference-price-table th,.reference-price-table td { padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.09); line-height:1.6; }
.reference-price-table th { color:#d8c39e; font-weight:500; }
.reference-price-notes { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px; }
.reference-price-notes article { padding:16px; background:rgba(255,255,255,.025); border-radius:10px; }
.reference-price-notes h3 { font-size:14px; margin:0 0 10px; }
.reference-price-notes p,.reference-pricing-view .panel-head p { color:#aaa6b1; font-size:13px; line-height:1.8; }
@media(max-width:640px) { .reference-pricing-view .panel { padding:16px; } .creation-model-bar label { max-width:none; } }