:root{color-scheme:light;--bg:#f4f6fa;--panel:#fff;--text:#182437;--muted:#64748b;--line:#dce3ed;--accent:#2166dc;--soft:#edf3fd;--danger:#c42c38}
:root[data-theme=dark]{color-scheme:dark;--bg:#091220;--panel:#101f31;--text:#e7edf5;--muted:#94a7bf;--line:#283d55;--accent:#76a7ff;--soft:#182e49;--danger:#ff8c92}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Microsoft YaHei",sans-serif}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:var(--accent);text-decoration:none}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:9px 14px;color:var(--text);background:var(--panel);white-space:nowrap}button:hover{border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:#2166dc;color:white;border-color:#2166dc}.quiet{background:transparent}.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:17px max(22px,calc((100vw - 1520px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:23px;font-weight:750;color:var(--text)}.brand span{font-size:15px;font-weight:500;margin-left:8px;color:var(--muted)}nav{display:flex;align-items:center;gap:22px}main{max-width:1568px;margin:auto;padding:30px 24px}.heading{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:24px}h1,h2,p{margin:0}h1{font-size:26px}h2{font-size:18px}.heading p,.workspace header p{color:var(--muted);margin-top:5px}.tabs{display:flex;background:var(--soft);padding:5px;border-radius:12px;gap:5px}.tabs button{background:transparent;border-color:transparent}.tabs [aria-selected=true]{background:var(--panel);color:var(--accent);box-shadow:0 2px 8px #10203012}.layout{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:22px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden}.controls{padding:20px}.fields{display:grid;gap:16px}.fields>label,label{display:grid;gap:7px;font-weight:550;min-width:0}input,select,textarea{width:100%;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px}textarea{resize:vertical;max-height:350px}input[type=file]{font-size:13px}details{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}details .fields{margin-top:16px}details label{margin-top:12px}summary{cursor:pointer;font-weight:600}summary span{float:right;font-size:12px;color:var(--muted);font-weight:400}.hint{font-size:12px;color:var(--muted);font-weight:400}.button-row{display:flex;justify-content:flex-end;gap:10px}.dropzone{padding:13px;border:1px dashed var(--line);border-radius:10px;background:var(--bg)}.dropzone.drag-over{border-color:var(--accent);background:var(--soft)}.dropzone small{font-size:12px;font-weight:400;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.check-row{display:flex;flex-wrap:wrap;gap:12px}.check-row label{display:flex;align-items:center}.check-row input{width:auto}fieldset{border:1px solid var(--line);border-radius:9px;margin:0 0 15px;padding:12px}.references{display:flex;gap:8px;flex-wrap:wrap}.references:empty{display:none}.reference{position:relative}.reference img{width:64px;height:64px;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:7px}.reference button{position:absolute;right:-5px;top:-5px;border-radius:50%;padding:0;width:22px;height:22px}.workspace{min-height:620px}.workspace>header{padding:20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.workspace header p{font-size:13px}.tasks{display:grid;gap:18px;padding:20px}.empty{min-height:340px;display:grid;place-content:center;text-align:center;color:var(--muted)}.task{border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}.task header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.task h3{margin:0;font-size:15px;overflow-wrap:anywhere}.task time,.task-id{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.status{background:var(--soft);padding:4px 9px;border-radius:20px;white-space:nowrap;font-size:12px}.task-message{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);margin:10px 0}.task-message.error,#notice{color:var(--danger)}#notice{position:sticky;top:10px;z-index:10;background:var(--panel);border:1px solid var(--danger);border-radius:10px;padding:12px 16px;margin-bottom:18px;white-space:pre-wrap;overflow-wrap:anywhere}.outputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.outputs img{display:block;width:100%;height:260px;object-fit:contain;background:var(--bg);border-radius:9px;cursor:zoom-in}.output{min-width:0}.output button,.output a{display:inline-block;margin-top:7px;font-size:13px}.task-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}.task-actions button{font-size:13px;padding:6px 10px}.files{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.files button{white-space:normal;overflow-wrap:anywhere;max-width:100%;text-align:left}.task-prompt{color:var(--muted);font-size:13px;max-height:90px;overflow:auto;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;max-width:min(520px,calc(100vw - 30px));max-height:90dvh;margin:auto;padding:24px}dialog::backdrop{background:#07102099;backdrop-filter:blur(5px)}dialog form{display:grid;gap:18px}#image-viewer{padding:40px 14px 14px;max-width:95vw;max-height:95dvh}#image-viewer img{display:block;max-width:90vw;max-height:82dvh;object-fit:contain}#viewer-close{position:absolute;right:8px;top:6px;padding:1px 10px;font-size:24px}[hidden]{display:none!important}
@media(max-width:800px){main{padding:20px 14px}.heading{align-items:flex-start;flex-direction:column}.layout{grid-template-columns:1fr}.workspace{min-height:350px}.topbar{padding:14px;flex-wrap:wrap}nav{gap:14px;font-size:13px}.controls{padding:16px}.workspace>header{padding:16px}.tasks{padding:14px}.outputs{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.outputs img{height:200px}.brand{font-size:21px}h1{font-size:23px}}

/* 任务在左、参数在右；窄屏按相同顺序排列。 */
.heading{justify-content:flex-end;margin-bottom:16px}
.layout{grid-template-columns:minmax(0,1fr) minmax(290px,360px)}
.workspace{grid-column:1;grid-row:1}.controls{grid-column:2;grid-row:1}
@media(max-width:800px){.layout{grid-template-columns:minmax(0,1fr)}.workspace{grid-column:1;grid-row:1;min-height:220px}.controls{grid-column:1;grid-row:2}.empty{min-height:160px}.heading{align-items:flex-end}nav{flex-wrap:wrap}}

/* 工作区随视口伸缩，任务和参数独立滚动。 */
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{flex:none;padding-top:12px;padding-bottom:12px}
main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 20px}
.heading{flex:none;margin-bottom:12px}.layout{flex:1;min-height:0;align-items:stretch;gap:14px}
.workspace{min-height:0;display:flex;flex-direction:column}.workspace>header{flex:none;padding:14px 16px}.tasks{flex:1;min-height:0;overflow:auto;align-content:start;padding:14px;overscroll-behavior:contain}
.controls{min-height:0;overflow:auto;padding:16px;overscroll-behavior:contain}.empty{min-height:0;height:100%;padding:32px 12px}.tasks:has(>.empty){align-content:stretch}
.task{padding:12px}.outputs img{height:clamp(160px,28vh,300px)}.key-field{display:grid;gap:7px}.key-combo{position:relative;display:flex}.key-combo input{padding-right:38px}.key-combo>button{position:absolute;right:1px;top:1px;bottom:1px;border:0;padding:0 11px;background:transparent}
#key-options{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #0002;max-height:220px;overflow:auto;padding:4px}
#key-options button{display:block;width:100%;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}#key-options button:hover,#key-options [aria-selected=true]{background:var(--soft)}#key-options p{padding:8px}
@media(max-width:800px){body{height:auto;min-height:100dvh;overflow:auto}main{flex:none;padding:12px}.layout{flex:none}.workspace{height:50dvh;min-height:260px}.controls{overflow:visible}.tasks{min-height:0}.key-combo{max-width:100%}}

.connection{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}.connection .fields{gap:8px}.connection-status{display:flex;gap:8px;justify-content:space-between}.connection-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12px}.connection-actions button{font-size:12px;padding:2px 7px;border:0;color:var(--muted)}
.key-combo{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.key-combo:focus-within{outline:2px solid var(--accent);outline-offset:2px}.key-combo input{border:0;background:transparent;padding-right:40px;outline:none}.key-combo>button{width:38px;padding:0;display:grid;place-items:center;color:var(--text)}.key-combo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:112px;cursor:pointer;text-align:center;border-radius:10px;background:var(--bg)}.dropzone:hover,.dropzone:focus-within{border-color:var(--accent);background:var(--soft)}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;height:100%;width:100%;padding:0}.upload-icon{width:26px;height:26px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.dropzone small{font-size:11px}.references:empty{display:none}.reference img{width:72px;height:72px}.fields{gap:12px}

.fields>.dropzone{display:flex}.upload-icon{flex:none}

.model-parameters{display:grid;gap:12px;margin-bottom:14px}.model-check{display:flex;align-items:center;justify-content:space-between;font-weight:400}.model-check input{width:18px;height:18px}.model-views{display:grid;grid-template-columns:1fr 1fr;gap:10px}.model-views input{font-size:11px}.task-expiry{font-size:12px;color:var(--muted);margin:7px 0}.workspace>header .button-row{flex-wrap:wrap}

/* Task-flow structure and component styles from Lyra_Moi GenerationBoard. */
.generation-flow-card { container: generation-flow-card / inline-size; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 5px 18px rgb(20 22 27 / 6%); }
.generation-flow-card.status-running, .generation-flow-card.status-queued { border-color: var(--status-running-border); }
.generation-flow-card.status-failed, .generation-flow-card.status-interrupted, .generation-flow-card.status-cancelled { border-color: var(--status-error-border); }
.generation-flow-header { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: .75rem; padding: .72rem .85rem; border-bottom: 1px solid var(--border); }
.generation-flow-header-actions { display: flex; flex: none; align-items: center; gap: .35rem; }
.icon-button.mobile-task-toggle { display: none; }
.generation-title { display: grid; min-width: 0; gap: .28rem; }
.generation-title > div { display: flex; min-width: 0; align-items: center; gap: .5rem; }
.generation-title strong { overflow: hidden; font-size: var(--font-control); text-overflow: ellipsis; white-space: nowrap; }
.generation-title > span { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: var(--font-small); }
.generation-title i { font-style: normal; }
.task-number { flex: none; padding: .18rem .4rem; color: var(--text-soft); background: var(--surface-muted); border-radius: .3rem; font-size: var(--font-small); font-weight: 700; }
.status-pill { flex: none; padding: .16rem .42rem; color: #5f646d; background: var(--surface-muted); border-radius: 999px; font-size: var(--font-small); }
.status-pill.status-running, .status-pill.status-queued { color: var(--status-running-text); background: var(--status-running-bg); }
.status-pill.status-succeeded { color: var(--status-success-text); background: var(--status-success-bg); }
.status-pill.status-failed, .status-pill.status-interrupted, .status-pill.status-cancelled { color: var(--status-error-text); background: var(--status-error-bg); }
.generation-flow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(1.6rem, 2.3rem) minmax(0, .9fr) minmax(1.6rem, 2.3rem) minmax(0, 1.05fr); min-width: 0; align-items: center; gap: .35rem; padding: 1rem; }
.generation-flow > * { min-width: 0; }
.flow-column { display: grid; min-width: 0; align-self: stretch; align-content: start; gap: .55rem; padding: .65rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: .6rem; }
.flow-column-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.flow-column-heading > span { color: var(--text-soft); font-size: var(--font-small); font-weight: 700; }
.flow-column-heading small { color: var(--muted); font-size: var(--font-small); }
.flow-input-list { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); gap: .4rem; }
.flow-input-node { display: grid; min-width: 0; overflow: hidden; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .45rem; text-align: left; }
.flow-input-node:hover { border-color: var(--connector); box-shadow: 0 3px 9px rgb(20 22 27 / 8%); }
.flow-input-image { position: relative; display: block; min-width: 0; aspect-ratio: 1; overflow: hidden; background: var(--surface-muted); }
.flow-input-image img { width: 100%; height: 100%; object-fit: contain; }
.flow-input-image b { position: absolute; top: .28rem; left: .28rem; padding: .12rem .28rem; color: #fff; background: rgb(20 22 27 / 72%); border-radius: .25rem; font-size: var(--font-caption); }
.flow-input-copy { display: grid; min-width: 0; gap: .12rem; padding: .35rem .4rem; }
.flow-input-copy strong, .flow-input-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-input-copy strong { font-size: var(--font-small); }
.flow-input-copy small { color: var(--muted); font-size: var(--font-caption); }
.flow-text-input { display: flex; min-height: 5rem; align-items: center; justify-content: center; gap: .5rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: .45rem; }
.flow-text-input > div { display: grid; gap: .15rem; }
.flow-text-input strong { color: var(--text-soft); font-size: var(--font-small); }
.flow-text-input span { color: var(--muted); font-size: var(--font-caption); }
.flow-connector { position: relative; display: block; width: 100%; height: 2px; background: var(--connector); }
.flow-connector::after { position: absolute; top: 50%; right: 0; width: .42rem; height: .42rem; border-top: 2px solid var(--connector); border-right: 2px solid var(--connector); content: ""; transform: translateY(-50%) rotate(45deg); }
.flow-operation-node { position: relative; display: grid; min-width: 0; min-height: 8rem; place-items: center; align-content: center; gap: .28rem; padding: .75rem; background: var(--surface); border: 1px solid var(--node-border); border-radius: .65rem; text-align: center; box-shadow: 0 4px 12px rgb(20 22 27 / 7%); }
.flow-operation-node.status-running, .flow-operation-node.status-queued { border-color: var(--status-running-border); box-shadow: 0 0 0 3px var(--status-running-ring); }
.flow-operation-node.status-failed, .flow-operation-node.status-interrupted, .flow-operation-node.status-cancelled { border-color: var(--status-error-border); }
.flow-operation-icon { display: grid; width: 2rem; height: 2rem; place-items: center; color: #fff; background: #343942; border-radius: .48rem; }
.flow-operation-node > small { color: var(--muted); font-size: var(--font-caption); }
.flow-operation-node > strong { font-size: var(--font-body); }
.flow-provider-label { max-width: 100%; padding: .2rem .4rem; color: var(--text-soft); background: var(--surface-muted); border-radius: .4rem; font-size: var(--font-caption); line-height: 1.35; overflow-wrap: anywhere; }
.flow-operation-node > p { display: -webkit-box; max-width: 100%; overflow: hidden; margin: 0; color: var(--muted); font-size: var(--font-small); line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.flow-stage, .flow-attempt { max-width: 100%; overflow: hidden; padding: .14rem .34rem; color: var(--status-running-text); background: var(--status-running-bg); border-radius: 999px; font-size: var(--font-caption); text-overflow: ellipsis; white-space: nowrap; }
.flow-attempt { color: var(--text-soft); background: var(--surface-muted); }
.flow-edit-button { display: flex; align-items: center; gap: .25rem; margin-top: .18rem; padding: .26rem .4rem; color: var(--text-soft); background: var(--app-bg); border: 1px solid var(--border); border-radius: .35rem; font-size: var(--font-caption); }
.flow-edit-button:hover { color: var(--text); background: var(--surface-muted); border-color: var(--node-border); }
.flow-output-column { background: var(--surface-soft); }
.flow-output-placeholder { min-width: 0; }
.placeholder-image { aspect-ratio: 1.25; border-radius: .5rem; background-color: var(--skeleton-base); background-image: linear-gradient(100deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 40%, var(--skeleton-base) 60%); background-position: 200% 0; background-repeat: no-repeat; background-size: 220% 100%; animation: shimmer 1.6s infinite linear; }
.placeholder-copy { display: grid; gap: .25rem; padding: .65rem .2rem .2rem; }
.placeholder-copy strong { font-size: var(--font-body); }
.placeholder-copy span { color: var(--muted); font-size: var(--font-small); }
.output-grid { display: grid; min-width: 0; gap: .3rem; }
.output-grid.output-count-2, .output-grid.output-count-3, .output-grid.output-count-4 { grid-template-columns: repeat(2, 1fr); }
.output-result { display: grid; min-width: 0; align-content: start; gap: .3rem; }
.output-image { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 1; background: var(--surface-muted); border: 1px solid var(--border); border-radius: .45rem; }
.output-image.selected { box-shadow: inset 0 0 0 3px #315bd2; }
.output-image:focus-visible { outline: 2px solid #315bd2; outline-offset: 2px; }
.output-image img { width: 100%; height: 100%; object-fit: contain; }
.generation-flow-card{--surface:var(--panel);--surface-soft:var(--bg);--surface-muted:var(--soft);--border:var(--line);--text-soft:var(--text);--border-strong:var(--line);--connector:var(--muted);--node-border:var(--line);--font-control:14px;--font-body:14px;--font-small:12px;--font-caption:11px;--skeleton-base:var(--soft);--skeleton-highlight:var(--panel);--app-bg:var(--bg);padding:0;container-type:inline-size}
.generation-flow-card.status-processing,.generation-flow-card.status-submitting{border-color:var(--accent)}.generation-flow-card.status-failed{border-color:var(--danger)}
.generation-flow-card .flow-operation-node button{font-size:11px;padding:5px 7px;white-space:normal}.generation-flow-card .flow-provider-label{font-size:11px}.flow-input-copy{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow-text-input{font-size:12px;padding:12px;text-align:center}
.prompt-detail{border:0;margin:0;padding:0;max-width:100%;font-size:11px}.prompt-detail summary{font-weight:400;color:var(--accent)}.prompt-detail p{max-height:220px;overflow:auto;white-space:pre-wrap;text-align:left;overflow-wrap:anywhere;margin-top:8px}
.image-preview{display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in}.image-preview img{display:block}.result-actions{display:flex;flex-wrap:wrap;gap:5px}.result-actions button{font-size:11px;padding:5px 7px}
.generation-progress{display:block;width:100%;height:8px;margin-top:8px;accent-color:var(--accent);border:0;border-radius:5px;overflow:hidden}.generation-progress::-webkit-progress-bar{background:var(--soft)}.generation-progress::-webkit-progress-value{background:var(--accent);transition:width .3s}.generation-progress:indeterminate{background:linear-gradient(90deg,var(--soft),var(--accent),var(--soft));background-size:200% 100%;animation:shimmer 1.6s linear infinite}.generation-progress:indeterminate::-webkit-progress-bar{background:transparent}.progress-caption{font-size:12px;color:var(--muted);margin-top:10px}
.task-details{border:0;border-top:1px solid var(--line);margin:0;padding:8px 12px;font-size:11px}.task-details summary{font-weight:400;color:var(--muted)}.generation-flow-card>.task-actions{padding:0 12px 12px;margin-top:4px}.flow-output-column .task-message{font-size:12px}.flow-output-column .files button{font-size:11px;padding:5px 7px}
@keyframes shimmer{to{background-position:-200% 0}}
@container(max-width:600px){.generation-flow{grid-template-columns:minmax(0,1fr);gap:14px}.flow-connector{width:24px;justify-self:center;transform:rotate(90deg);margin:8px}.flow-input-list{grid-template-columns:repeat(auto-fit,minmax(70px,100px));justify-content:center}.output-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.flow-operation-node{min-height:0}.output-image{max-height:350px}}
@media(prefers-reduced-motion:reduce){.placeholder-image,.generation-progress:indeterminate{animation:none}}

/* 固定滚动容器，不让网格行压缩任务卡片。 */
.tasks{grid-auto-rows:max-content;overflow-y:auto;scrollbar-gutter:stable}.tasks>.task{min-height:min-content}.tasks:has(>.empty){grid-auto-rows:1fr}

.task-header-actions{display:flex;align-items:center;gap:8px;flex:none}.task-remove{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:20px;line-height:1}.task-remove:hover{color:var(--danger);background:var(--soft)}

.workspace-body{display:flex;flex:1;min-height:0;min-width:0}.workspace-body>.tasks{min-width:0}.model-workspace .workspace-body{display:grid;grid-template-columns:minmax(180px,230px) minmax(0,1fr)}.model-workspace .tasks{padding:10px;border-right:1px solid var(--line)}.model-workspace .generation-flow{display:block;padding:8px}.model-workspace .flow-input-column,.model-workspace .flow-operation-node,.model-workspace .flow-connector{display:none}.model-workspace .flow-output-column{padding:6px}.model-workspace .task-header-actions{gap:2px}.model-workspace .generation-flow-header{padding:8px;flex-wrap:wrap}.model-workspace .files{gap:4px}.model-workspace .files button{font-size:10px;max-width:100%}.model-workspace .task-number{display:none}
#model-viewer-panel{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}#model-viewer-panel>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:12px;border-bottom:1px solid var(--line)}#model-viewer-title{font-size:14px;overflow-wrap:anywhere}.viewer-actions{display:flex;gap:6px}.viewer-actions button{font-size:12px;padding:5px 8px}.model-viewport{position:relative;flex:1;min-height:180px;overflow:hidden}#model-canvas{position:absolute;inset:0}#model-canvas canvas{display:block;width:100%;height:100%;touch-action:none}#model-viewer-message{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;padding:20px;text-align:center;font-size:13px;color:var(--muted)}.viewer-options{display:flex;flex-wrap:wrap;gap:12px;padding:10px}.viewer-options label{display:flex;align-items:center;font-size:12px;gap:4px}.viewer-options input{width:auto}#model-stats{padding:0 10px;font-size:12px;color:var(--muted)}#model-files{padding:10px;margin:0;max-height:140px;overflow:auto}#model-files button{font-size:12px;padding:5px 8px}#model-viewer-panel:fullscreen{height:100dvh;width:100vw}
.output-image-info{display:grid;gap:3px;font-size:11px;overflow-wrap:anywhere;color:var(--muted)}.output-image-info:empty{display:none}
.model-image-picker{position:relative;display:flex;align-items:center;gap:8px;min-height:78px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg);min-width:0}.model-image-picker input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.model-image-picker:focus-within,.model-image-picker:hover{border-color:var(--accent)}.model-image-picker img,.picker-empty{width:56px;height:56px;object-fit:contain;flex:none;background:var(--soft);border-radius:6px}.picker-empty{display:grid;place-content:center;font-size:22px;color:var(--muted)}.picker-copy{min-width:0;display:grid;gap:5px;flex:1}.picker-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.picker-copy small{font-size:10px;color:var(--muted)}.picker-action{font-size:11px;color:var(--accent)}.picker-remove{font-size:11px;padding:4px 8px;justify-self:start}.model-views{grid-template-columns:minmax(0,1fr)}.model-controls #reference-list{display:none}.model-controls #upload-zone{align-items:flex-start;text-align:left;min-height:90px;padding-left:80px;justify-content:center}.model-controls #upload-zone .upload-icon,.model-controls #single-model-preview{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:56px;height:56px;object-fit:contain;background:var(--soft);border-radius:6px}.model-controls #upload-zone:has(#single-model-preview:not([hidden])) .upload-icon{display:none}.model-controls #upload-label{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}#model-clear-image{justify-self:start;font-size:11px;padding:4px 8px}
@media(max-width:1100px){.model-workspace .workspace-body{grid-template-columns:170px minmax(0,1fr)}}@media(max-width:800px){.model-workspace{height:78dvh;min-height:500px}.model-workspace .workspace-body{grid-template-columns:130px minmax(0,1fr)}.model-workspace .tasks{padding:5px}.model-workspace .flow-column-heading{font-size:11px}.model-workspace .generation-flow-header{font-size:11px}.viewer-actions button{font-size:10px}.viewer-options{gap:6px;padding:6px}.model-workspace .files button{font-size:9px;padding:3px}.model-workspace .flow-output-column{border:0;padding:0}}

/* 创作类型紧邻品牌，导航靠右。 */
.topbar{justify-content:flex-start;gap:20px}.topbar .brand{flex:none}.topbar>.tabs{flex:none;margin:0}.topbar>nav{margin-left:auto}.topbar .tabs button{padding:8px 14px}@media(max-width:800px){.topbar{gap:10px}.topbar>nav{width:100%;margin-left:0;justify-content:flex-end}.topbar>.tabs{margin-left:auto}.topbar .tabs button{padding:7px 10px}}

.viewer-progress{position:absolute;left:10%;bottom:24px;width:80%;height:8px;accent-color:var(--accent)}

.task-model-name{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin-top:3px}
@media(max-width:800px){
  .topbar{flex-wrap:wrap;padding:12px;gap:10px}.topbar nav{gap:14px;flex-wrap:wrap;font-size:13px}
  main{padding:10px}.layout{gap:12px;grid-template-columns:minmax(0,1fr)}
  .workspace>header{padding:12px;gap:8px;align-items:flex-start}.workspace>header h2{font-size:17px}.workspace>header button{padding:7px 9px;font-size:12px}
  .workspace{height:65dvh;min-height:340px}.tasks{padding:10px;gap:12px;scrollbar-gutter:auto}
  .generation-flow-header{padding:10px;gap:8px}.generation-title{min-width:0}.task-model-name{font-size:12px;line-height:1.4}
  .generation-flow{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:10px;align-items:start}
  .generation-flow>.flow-input-column{grid-column:1;grid-row:1}.generation-flow>.flow-output-column{grid-column:2;grid-row:1}
  .generation-flow>.flow-operation-node{grid-column:1/-1;grid-row:2;min-height:0;padding:9px}
  .generation-flow>.flow-connector{display:none}.flow-column{padding:7px;min-width:0}.flow-column-heading{font-size:13px}
  .flow-input-list{grid-template-columns:minmax(0,1fr)}.flow-input-node{min-width:0;width:100%}
  .output-grid,.output-grid.output-count-2,.output-grid.output-count-3,.output-grid.output-count-4{grid-template-columns:minmax(0,1fr)}
  .output-image{width:100%;max-height:260px}.result-actions button{padding:6px 8px;font-size:12px}
  .prompt-detail,.task-details{font-size:12px}.model-workspace{height:auto;min-height:0}
  .model-workspace .workspace-body{display:flex;flex-direction:column;min-height:0}
  .model-workspace .tasks{flex:none;width:100%;max-height:50dvh;min-height:180px;border-right:0;border-bottom:1px solid var(--line);padding:10px}
  .model-workspace .generation-flow-header{font-size:14px;padding:10px;flex-wrap:nowrap}.model-workspace .task-number{display:inline}
  .model-workspace .generation-flow{padding:10px}.model-workspace .flow-column-heading{font-size:13px}
  .model-workspace .output-grid{max-width:180px;margin:0 auto 8px}.model-workspace .files button{font-size:13px;padding:7px 10px}
  .model-workspace .flow-output-column>button{font-size:13px;padding:7px 10px}
  #model-viewer-panel{flex:none;height:370px;min-height:370px}.viewer-actions button,.viewer-options label{font-size:12px}
  .controls{padding:14px}select,input,textarea{font-size:16px}
}
.task-prompt{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;margin:8px 0;font-size:13px}