:root { color-scheme: light; --ink:#17202a; --muted:#6b7280; --line:#d9dee5; --paper:#f6f7f9; --white:#fff; --accent:#0f766e; --accent-dark:#115e59; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; }
html.fusion-mode body{background:#eef4f2}.fusion-mode .workspace{display:block}.fusion-mode .form-panel,.fusion-mode .results-panel{background:#fff;border:1px solid #d7e4e0;border-radius:18px;box-shadow:0 16px 40px #41675c18}.fusion-mode .form-panel{padding:18px}.fusion-mode .results-panel{margin-top:16px;padding:18px}.fusion-mode .field-grid{margin-top:14px;padding:12px;border:1px solid #dbe8e4;border-radius:12px;background:#f8fcfb}.fusion-mode #sizeNote,.fusion-mode #review{margin-top:12px}.fusion-mode .fusion-canvas{margin-top:0}.fusion-mode .results-panel .result-grid{min-height:180px}
.fusion-board{position:relative;min-height:680px;overflow:hidden;border:1px solid #dfe8e5;border-radius:14px;background:#fff;background-image:radial-gradient(#b9d2cc 1px,transparent 1px);background-size:20px 20px}.fusion-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1}.fusion-wires path{fill:none;stroke:#3f8e81;stroke-width:3;stroke-linecap:round}.fusion-nodes{position:absolute!important;inset:0;display:block!important;overflow:hidden;padding:0!important;z-index:2}.fusion-node.image-node{position:absolute!important;width:250px;min-height:190px;padding:14px;border:1px solid #b7d7d0;border-radius:14px;background:#fff;box-shadow:0 12px 24px #375f5618;cursor:grab;display:flex;flex-direction:column;gap:9px;touch-action:none;user-select:none;will-change:left,top}.fusion-node.image-node.dragging{cursor:grabbing;box-shadow:0 16px 34px #375f5630;z-index:8}.fusion-node.image-node .node-prompt{user-select:text}.fusion-node.image-node.opened{border-color:#0f766e;box-shadow:0 0 0 3px #0f766e24,0 15px 30px #375f5622}.node-plus{width:100%;height:62px;border:1px dashed #80b6aa;border-radius:10px;background:#f3faf8;color:#0f766e;font-size:28px}.node-prompt{min-height:58px;resize:vertical;border:1px solid #d8e2df;padding:8px;font-size:12px}.node-edit{display:none}.fusion-result-controls{margin:0 0 12px;padding:10px 12px;border:1px solid #dbe8e4;border-radius:12px;background:#f8fcfb}.fusion-result-controls .field-grid{display:grid}.fusion-mode #fieldGridHome>.field-grid{display:none}.fusion-mode #fusionResultControls.hidden{display:block!important}
.wire-handle{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid #1f2423;border-radius:50%;background:#fff;z-index:4;opacity:.35;transition:opacity .18s,transform .18s}.wire-left{left:-8px}.wire-right{right:-8px}.fusion-wire-mode .wire-handle{opacity:1;cursor:crosshair}.wire-handle:hover{transform:scale(1.25);background:#1f2423}
.node-plus{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;overflow:hidden}.fusion-node.image-node.opened .node-plus{height:170px;min-height:170px;background-color:#f7fbfa}.fusion-node.image-node.opened .node-prompt{display:none}.fusion-context-menu{position:fixed;z-index:1000;min-width:180px;padding:6px;border:1px solid #c8d8d3;border-radius:10px;background:#fff;box-shadow:0 16px 36px #203c351f}.fusion-context-menu button{display:block;width:100%;padding:9px 11px;border:0;border-radius:7px;background:transparent;text-align:left;color:var(--ink);cursor:pointer}.fusion-context-menu button:hover{background:#e8f5f2;color:var(--accent-dark)}
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1260px; margin:0 auto; padding:28px 22px 36px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:20px; }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.settings-panel { padding:14px 16px; margin-bottom:18px; }
.settings-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.settings-panel > label { margin:0; }
.settings-actions { display:flex; align-items:end; justify-content:flex-end; gap:8px; margin-top:10px; flex-wrap:wrap; }
.auth-inline { display:flex; align-items:center; gap:8px; margin:0; font-size:12px; font-weight:600; }
.auth-inline input { width:220px; padding:7px 8px; }
.settings-note { margin-top:8px; font-size:12px; }
.settings-message { margin-top:8px; padding:8px 10px; border:1px solid #b9dfd8; background:#f0fbf9; color:var(--accent-dark); font-size:12px; overflow-wrap:anywhere; }
.settings-message.fail { border-color:#efb4ad; background:#fff5f3; color:var(--danger); }
h1,h2,p { margin:0; } h1 { font-size:28px; letter-spacing:0; } h2 { font-size:18px; letter-spacing:0; }
.muted { color:var(--muted); } .eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:1.4px; margin-bottom:5px; }
.status { border:1px solid var(--line); background:var(--white); padding:8px 12px; font-size:12px; }
.status.ok { color:var(--accent-dark); border-color:#9ed7cf; background:#f0fbf9; }
.setup-area { display:block; }
.setup-area.collapsed { display:none; }
.panel { background:var(--white); border:1px solid var(--line); border-radius:7px; box-shadow:0 2px 10px #16202a0a; }
.keybar { display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:12px; margin-bottom:18px; } .key-row { display:flex; align-items:center; gap:10px; } .key-row label { font-weight:600; white-space:nowrap; min-width:112px; margin:0; } .key-row input { flex:1; min-width:0; }
.customer-access { border:1px solid #bfe5df; background:#f7fcfb; border-radius:6px; padding:12px; margin-bottom:2px; }
.customer-access-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.customer-login-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto auto; gap:8px; align-items:center; }
.group-select-row { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); align-items:end; gap:12px; margin-top:10px; }
.group-select-row label { margin:0; }
.group-meta { color:#44505c; font-size:12px; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:5px; min-height:38px; }
.customer-message { margin-top:9px; padding:8px 10px; border-radius:5px; border:1px solid #b9dfd8; background:#f0fbf9; color:var(--accent-dark); font-size:12px; }
.customer-message.fail { border-color:#efb4ad; background:#fff5f3; color:var(--danger); }

/* Redesign surface: an editorial workbench rather than a stacked form */
html { scroll-behavior:smooth; }
body { background:radial-gradient(circle at 12% 0%,#e6f3ef 0,transparent 32rem),linear-gradient(135deg,#f5f7f5 0%,#eef2f0 100%); font-family:"Aptos","Avenir Next","Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:.005em; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(#73938c 0.55px,transparent .55px); background-size:13px 13px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.shell { max-width:1440px; padding:34px clamp(18px,4vw,58px) 60px; }
.topbar { align-items:flex-end; margin-bottom:28px; }
.topbar h1 { font-size:clamp(32px,4vw,54px); line-height:.98; letter-spacing:-.055em; font-weight:750; text-wrap:balance; }
.topbar .muted { max-width:42rem; margin-top:12px; font-size:14px; }
.panel { border:1px solid #d5dfdc; border-radius:18px; box-shadow:0 18px 45px #55776d12, inset 0 1px #ffffffd9; }
.keybar,.diagnostic,.settings-panel { backdrop-filter:blur(14px); background:#ffffffc9; }
.tabs { display:flex; gap:6px; padding:7px; border-radius:14px; background:#dfeae6; }
.tab { border:0; border-radius:10px; padding:11px 15px; color:#45615b; background:transparent; transition:transform .2s,background .2s,color .2s; }
.tab:hover { transform:translateY(-1px); background:#f7fbfa; }
.tab.active { color:#123d38; background:#fff; box-shadow:0 5px 14px #365d551a; }
button,input,textarea,select { border-radius:10px; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #70b9ad88; outline-offset:2px; }
.button { transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-1px); box-shadow:0 8px 18px #0f766e22; }
.button:active { transform:translateY(1px) scale(.98); }
.workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; align-items:start; }
.workspace > .panel { min-height:100%; }
.skill-shelf,.commerce-lab,.fusion-canvas { border-radius:16px; }
.skill-module { transition:transform .2s,box-shadow .2s,border-color .2s; }
.skill-module:hover { transform:translateY(-3px); box-shadow:0 10px 22px #0f766e1c; border-color:#64a89d; }
@media(max-width:900px){.workspace{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}}
.diagnostic { display:grid; grid-template-columns:minmax(180px,auto) auto minmax(0,1fr); align-items:center; gap:14px; padding:12px; margin-bottom:18px; }
.diagnostic h2 { font-size:16px; }
.diagnostic-actions { display:flex; gap:8px; flex-wrap:wrap; }
.diagnostic-results { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; }
.diagnostic-results.ok { color:var(--accent-dark); }
.diagnostic-results.fail { color:var(--danger); }
.diagnostic-options { grid-column:1/-1; display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; padding-top:9px; border-top:1px solid var(--line); } .diagnostic-options label { display:flex; align-items:center; gap:6px; margin:0; font-size:12px; font-weight:600; cursor:pointer; } .diagnostic-options input { width:16px; height:16px; margin:0; padding:0; accent-color:var(--accent); }
.assistant-panel { padding:14px 16px; margin-bottom:18px; }
input, textarea, select { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:5px; padding:9px 10px; outline:none; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #0f766e18; }
#apiKey { flex:1; min-width:0; }
.button { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:5px; padding:9px 14px; font-weight:600; }
.button:hover { border-color:#9aa5b1; } .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .button.primary:hover { background:var(--accent-dark); }
.button.ghost { background:transparent; } .button.small { padding:5px 9px; font-size:12px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tab { border:0; background:transparent; color:var(--muted); padding:10px 15px; border-bottom:2px solid transparent; font-weight:600; }
.tab.active { color:var(--accent-dark); border-bottom-color:var(--accent); }
.workspace { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:18px; align-items:start; }
.form-panel, .results-panel { padding:18px; } .form-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.model-chip { border:1px solid #bfe5df; color:var(--accent-dark); background:#f2fbf9; padding:5px 8px; font-size:12px; white-space:nowrap; }
.model-picker { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.model-picker select { min-width:120px; padding:5px 8px; font-size:12px; }
label { display:grid; gap:6px; font-weight:600; margin-bottom:14px; } textarea { width:100%; resize:vertical; min-height:150px; font-weight:400; }
.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .field-grid label { margin:0; }
.local-prompt-notice { color:#44505c; background:#f2fbf9; border:1px solid #caebe6; border-radius:5px; padding:9px 10px; margin-bottom:14px; font-size:13px; }
.size-note { display:grid; gap:3px; color:var(--accent-dark); background:#f2fbf9; border:1px solid #caebe6; border-radius:5px; padding:8px 10px; margin:14px 0; font-size:13px; }
.four-k-note { color:#44505c; font-size:12px; }
.upload-area { border:1px dashed #aeb8c3; padding:12px; margin:14px 0; } .upload-button { display:inline-flex; width:max-content; background:#f6f8fa; border:1px solid var(--line); padding:8px 11px; border-radius:5px; cursor:pointer; margin:0 10px 6px 0; } .upload-button input { display:none; }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .thumbs img { width:68px; height:68px; object-fit:cover; border:1px solid var(--line); border-radius:4px; }
.panel-inset { background:#f8fafb; border:1px solid var(--line); padding:11px; margin-top:16px; color:#44505c; min-height:44px; }
.error-message { margin-top:10px; padding:10px 11px; border:1px solid #efb4ad; border-radius:5px; background:#fff5f3; color:var(--danger); overflow-wrap:anywhere; }
.review strong { color:var(--ink); } .submit { width:100%; margin-top:14px; position:sticky; bottom:12px; z-index:4; box-shadow:0 4px 14px #16202a24; }
.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-height:420px; } .result-card { position:relative; border:1px solid var(--line); background:#fbfcfd; } .result-card img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#eef1f4; } .result-card a { display:block; padding:8px 9px; color:var(--accent-dark); text-decoration:none; overflow-wrap:anywhere; } .result-select { position:absolute; z-index:1; top:6px; left:6px; display:flex; align-items:center; gap:4px; margin:0; padding:4px 6px; background:#fffffff0; border:1px solid var(--line); border-radius:4px; font-size:11px; font-weight:600; } .result-select input { width:14px; height:14px; margin:0; padding:0; accent-color:var(--accent); }
.empty-state { grid-column:1/-1; display:grid; place-items:center; color:var(--muted); border:1px dashed var(--line); min-height:230px; }
.progress-area { margin:-5px 0 14px; } .progress-note { color:#44505c; font-size:12px; margin-bottom:5px; } .progress { height:8px; background:#e6ebef; border-radius:4px; overflow:hidden; } .progress span { display:block; height:100%; width:0; background:var(--accent); transition:width .35s ease; } .progress-percent { color:var(--accent-dark); text-align:right; font-size:12px; font-variant-numeric:tabular-nums; margin-top:3px; } .job-status { min-height:20px; margin-top:5px; color:#44505c; font-size:12px; overflow-wrap:anywhere; } .result-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.history-area { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; } .history-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .history-heading h3 { margin:0; font-size:14px; } .history-list { display:grid; gap:8px; max-height:430px; overflow:auto; } .history-item { border:1px solid var(--line); background:#fbfcfd; padding:9px; font-size:12px; } .history-item p { margin:5px 0; color:#44505c; overflow-wrap:anywhere; } .history-images { display:flex; gap:6px; overflow:auto; } .history-images img { display:block; width:58px; height:58px; object-fit:cover; border:1px solid var(--line); border-radius:3px; }
.local-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#44505c; margin-bottom:8px; font-size:13px; } .tool-segments { display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:5px; overflow:hidden; } .tool-button { border:0; border-right:1px solid var(--line); background:#fff; color:var(--muted); min-width:58px; padding:7px 10px; font-weight:600; } .tool-button:last-child { border-right:0; } .tool-button.active { background:var(--accent); color:#fff; } .local-actions { display:flex; gap:6px; } .canvas-wrap { position:relative; width:100%; background:#e9edf1; border:1px solid var(--line); overflow:hidden; } #annotationCanvas { display:block; width:100%; height:auto; max-height:520px; object-fit:contain; cursor:crosshair; touch-action:none; } #annotationCanvas.background-mode { cursor:text; } .empty-canvas { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); pointer-events:none; min-height:180px; } .local-image-caption { margin:0; padding:9px 11px; border:1px solid #caebe6; border-top:0; border-radius:0 0 7px 7px; color:var(--accent-dark); background:#f2fbf9; font-size:12px; font-weight:600; } .background-prompt-field { margin-top:10px; padding:11px; border:1px solid #b9ddd5; border-radius:8px; background:#f4fbf9; } .background-prompt-field label { display:block; margin:0 0 6px; font-size:12px; color:var(--accent-dark); } .background-prompt-field textarea { min-height:72px; margin:0; background:#fff; } .background-prompt-field small { display:block; margin-top:5px; color:var(--muted); font-size:11px; } .local-note { margin-top:8px; font-size:12px; }
.range-field { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:9px; margin:10px 0 0; font-size:12px; } .range-field input { width:100%; padding:0; accent-color:var(--accent); }
.region-list { display:grid; gap:7px; margin-top:10px; } .empty-regions { border:1px dashed var(--line); color:var(--muted); padding:10px; text-align:center; font-size:12px; } .region-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid var(--line); background:#f8fafb; padding:7px; } .region-item.selected { border-color:#72b9b1; box-shadow:0 0 0 2px #0f766e12; } .region-number { display:grid; place-items:center; width:26px; height:26px; color:#fff; border-radius:50%; font-weight:700; font-size:12px; } .region-prompt { width:100%; min-width:0; padding:7px 8px; } .region-remove { width:30px; height:30px; padding:0; font-size:18px; line-height:1; }
.prompt-assistant { margin:0 0 12px; } .assistant-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px; } .assistant-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; } .prompt-assistant textarea { min-height:82px; margin-bottom:8px; } .assistant-controls { display:flex; align-items:end; justify-content:flex-end; gap:8px; margin-top:10px; } .assistant-controls label { display:flex; align-items:center; gap:7px; margin:0; font-size:12px; font-weight:600; } .assistant-controls select { width:220px; padding:7px 8px; } .assistant-skill-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px; } .skill-toggle { display:inline-flex; align-items:center; gap:6px; width:max-content; margin:0; font-size:12px; font-weight:600; } .skill-toggle input { accent-color:var(--accent); } .skill-upload { display:inline-flex; width:max-content; background:#f6f8fa; border:1px solid var(--line); padding:7px 10px; border-radius:5px; cursor:pointer; margin:0; font-size:12px; font-weight:600; } .skill-upload input { display:none; } .assistant-skill-note { margin-top:5px; font-size:12px; } .assistant-output { margin-top:12px; } .assistant-output > label { display:block; margin-bottom:6px; font-size:12px; } .assistant-output textarea { min-height:130px; background:#fbfcfd; } .assistant-output-actions { display:flex; justify-content:flex-end; margin-top:6px; } .assistant-reply { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:12px; } .assistant-reply.fail { color:var(--danger); }
.hidden { display:none !important; } .footer { margin-top:18px; text-align:center; font-size:12px; }
@media (max-width:860px) { .workspace { grid-template-columns:1fr; } .result-grid { min-height:220px; } }
@media (max-width:560px) { .shell { padding:18px 12px 26px; } .topbar, .keybar, .diagnostic { align-items:stretch; flex-direction:column; } .topbar-actions { justify-content:space-between; } .key-row { align-items:stretch; flex-direction:column; } .key-row label { min-width:0; } .field-grid { grid-template-columns:1fr; } .tabs { overflow:auto; } .tab { white-space:nowrap; padding-inline:11px; } }
@media (max-width:560px) { .workspace, .form-panel, .results-panel, .form-heading { min-width:0; } .form-heading { flex-wrap:wrap; } .model-chip { white-space:normal; } input, textarea, select, .button { max-width:100%; } .keybar > * { width:100%; } }
@media (max-width:560px) { .local-toolbar { align-items:stretch; flex-direction:column; } .tool-segments { width:100%; } .tool-button { flex:1; min-width:52px; padding-inline:6px; } .local-actions .button { flex:1; } .region-item { grid-template-columns:auto minmax(0,1fr) auto; } .assistant-heading, .assistant-heading-actions { align-items:stretch; flex-direction:column; } .assistant-heading-actions { align-items:flex-end; } .assistant-controls { align-items:stretch; flex-direction:column; } .assistant-controls label { align-items:stretch; flex-direction:column; } .assistant-controls select { width:100%; } .settings-heading { align-items:stretch; flex-direction:column; } .settings-actions { align-items:stretch; flex-direction:column; } .auth-inline { align-items:stretch; flex-direction:column; } .auth-inline input { width:100%; } .customer-login-row, .group-select-row { grid-template-columns:1fr; } .customer-login-row .button { width:100%; } }
.generation-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}.preset-card{display:flex;flex-direction:column;gap:5px;text-align:left;padding:13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);cursor:pointer}.preset-card span{font-size:12px;color:var(--muted)}.preset-card.active{border-color:var(--accent);box-shadow:0 0 0 2px #0f766e18;background:#f4fbfa}.skill-command-menu{position:absolute;z-index:5;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 24px #0002;padding:5px}.skill-command-menu button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:9px;border-radius:4px;cursor:pointer}.skill-command-menu button:hover{background:#eef8f6}.overall-prompt-field{position:relative}.batch-toggle{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:13px}.batch-toggle input{accent-color:var(--accent)}
@media(max-width:700px){.generation-presets{grid-template-columns:repeat(2,1fr)}}
.node-local-prompt{min-height:58px;resize:vertical;border:1px solid #9bcfc4;padding:8px;font-size:12px;background:#f4fbf9;color:#145c54}.node-local-prompt:read-only{cursor:default}.background-region-item{border-color:#9bcfc4;background:#f3fbf9}.background-number{background:var(--accent-dark)!important}
.compare-panel{margin-top:14px;border:1px solid var(--line);padding:12px;background:#fbfcfd}.compare-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-grid figure{margin:0;border:1px solid var(--line);background:#fff;padding:8px}.compare-grid img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#eef1f3}.compare-grid figcaption{text-align:center;font-size:12px;color:var(--muted);padding-top:6px}
.compare-overlay{position:fixed;inset:0;background:#07151dcc;z-index:20;display:grid;place-items:center;padding:22px}.compare-dialog{width:min(980px,100%);background:#fff;border-radius:10px;padding:16px}.compare-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.compare-grid figure{margin:0;border:1px solid var(--line);padding:8px}.compare-grid img{width:100%;aspect-ratio:1;object-fit:contain;background:#eef1f3}.compare-grid figcaption{text-align:center;font-size:12px;color:var(--muted);padding-top:6px}
.batch-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px;padding:10px;background:#f7fafb;border:1px solid var(--line);border-radius:6px}.batch-fields label{margin:0;font-size:12px}.batch-fields input{margin-top:5px}@media(max-width:560px){.batch-fields{grid-template-columns:1fr}}
.continue-edit{display:block;width:100%;margin-top:7px}.customer-summary{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.audit-note{font-size:12px;margin:0 0 9px}.history-item small{display:block;margin:6px 0}
@media(max-width:700px){.customer-login-row{grid-template-columns:1fr}.customer-login-row .button{width:100%}.customer-access-heading{align-items:stretch;flex-direction:column}.customer-summary{justify-content:flex-start}.result-actions{display:flex;flex-wrap:wrap;gap:6px}.result-actions .button{flex:1;min-width:80px}.result-card{min-width:0}.result-card img{max-height:280px;object-fit:contain}.compare-grid{grid-template-columns:1fr}.tabs{scroll-snap-type:x proximity}.tab{scroll-snap-align:start}.form-panel,.results-panel{width:100%;overflow:hidden}}
:root{--ink:#172126;--paper:#f5f7f6;--accent:#0f766e;--accent-dark:#0a514c}.shell{max-width:1440px}.panel{border-color:#d7e1df;box-shadow:0 18px 50px #14312b0d}.skill-add-button{width:34px;height:34px;border:1px solid var(--accent);border-radius:50%;background:#eff8f6;color:var(--accent);font-size:22px;line-height:1;cursor:pointer}.skill-shelf{margin:0 0 16px;padding:18px;background:linear-gradient(135deg,#f2f8f6,#fff);border:1px solid #c8ded9;border-radius:12px}.shelf-heading{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.skill-module{display:grid;grid-template-columns:auto 1fr;column-gap:8px;text-align:left;padding:11px;border:1px solid #d5e4e0;border-radius:8px;background:#fff;cursor:pointer;transition:.2s}.skill-module span{grid-row:span 2;color:var(--accent);font-size:18px}.skill-module small{color:var(--muted);font-size:11px}.skill-module:hover,.skill-module.selected{border-color:var(--accent);background:#eaf6f3;transform:translateY(-1px)}.generation-presets{margin-top:10px}.tabs{margin-top:8px}.upload-hint{font-size:12px}
@media(max-width:780px){.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fusion-canvas{margin-top:12px;padding:16px;border:1px dashed #a6c9c1;border-radius:10px;background:#f4faf8;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px}.fusion-node{min-height:76px;padding:12px;background:#fff;border:1px solid #bdd9d3;border-radius:8px;display:flex;flex-direction:column;gap:6px}.fusion-node span{font-size:11px;color:var(--muted)}.fusion-wire{height:1px;background:#6baaa0;position:relative}.fusion-wire:after{content:'›';position:absolute;right:-3px;top:-11px;color:var(--accent);font-size:20px}@media(max-width:700px){.fusion-canvas{grid-template-columns:1fr;}.fusion-wire{width:1px;height:14px;margin:auto}.fusion-wire:after{right:-6px;top:0;transform:rotate(90deg)}}
.preset-add{display:flex;align-items:center;justify-content:center;border:1px dashed #8dbab1;border-radius:8px;background:#f2faf8;color:var(--accent);font-weight:700;cursor:pointer}.commerce-lab{display:grid;grid-template-columns:1.5fr .7fr 1fr 1fr auto;gap:10px;align-items:end;margin:0 0 16px;padding:14px;border:1px solid #b9d8d1;border-radius:10px;background:#f3faf8}.commerce-lab>div{display:flex;flex-direction:column;gap:5px}.commerce-lab>div span{font-size:12px;color:var(--muted)}.commerce-lab label{margin:0;font-size:12px}.commerce-lab input{margin-top:5px}.commerce-lab.active{box-shadow:0 0 0 2px #0f766e18}@media(max-width:780px){.commerce-lab{grid-template-columns:1fr 1fr}.commerce-lab>div{grid-column:1/-1}}
.fusion-canvas{display:block;position:relative;min-height:210px}.fusion-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.fusion-nodes{display:flex;align-items:center;gap:18px;min-height:130px;overflow:auto;padding:12px}.fusion-node{flex:0 0 180px;cursor:grab;transition:.2s;position:relative}.fusion-node:after{content:'⋯';position:absolute;right:8px;top:6px;color:#8aa}.fusion-node.connected{border-color:var(--accent);box-shadow:0 0 0 3px #0f766e22}.fusion-node.input-node:before,.fusion-node.prompt-node:before{content:'→';position:absolute;right:-17px;top:40%;color:var(--accent);font-size:20px;z-index:2}.fusion-node:active{cursor:grabbing;transform:scale(.98)}

/* Superboard viewport: pan, zoom, resize, and a guaranteed single-column output flow. */
.fusion-mode .workspace{display:flex;flex-direction:column;width:100%;gap:18px}
.fusion-mode .form-panel,.fusion-mode .results-panel{width:100%;min-width:0}
.fusion-mode .results-panel{order:2;margin-top:0}
.fusion-mode .fusion-canvas{width:100%;padding:16px;box-sizing:border-box}
.fusion-board{height:760px;min-height:420px;max-height:none;overflow:hidden;cursor:default;touch-action:none;background-color:#fff}
.fusion-board.panning{cursor:grabbing}
.fusion-board>.fusion-nodes,.fusion-board>.fusion-wires{transform-origin:0 0;will-change:transform}
.fusion-board>.fusion-nodes{overflow:visible!important}
.fusion-board>.fusion-wires{overflow:visible;pointer-events:none}
.fusion-resize-handle{height:14px;margin-top:5px;border-radius:9px;background:linear-gradient(90deg,transparent 0 42%,#80b6aa 42% 58%,transparent 58% 100%);cursor:ns-resize;touch-action:none;user-select:none}
.fusion-resize-handle:hover,.fusion-resize-handle.resizing{background:linear-gradient(90deg,transparent 0 38%,#0f766e 38% 62%,transparent 62% 100%)}
.fusion-toolbar{flex-wrap:wrap;gap:10px}
@media(max-width:700px){.fusion-board{height:620px}.fusion-resize-handle{height:18px}.fusion-tools{display:flex;flex-wrap:wrap}}

/* taste-skill visual pass: calm studio workbench, one accent, consistent geometry */
:root{
  --ink:#172126;
  --muted:#61716f;
  --line:#d8e2df;
  --paper:#f1f5f3;
  --white:#ffffff;
  --accent:#0f766e;
  --accent-dark:#0a514c;
  --surface-soft:#f6faf8;
  --surface-tint:#edf7f4;
  --radius-panel:16px;
  --radius-control:9px;
}
body{
  background:
    radial-gradient(circle at 10% -10%,#dceee9 0,transparent 30rem),
    linear-gradient(145deg,#f7faf8 0%,#eef3f1 100%);
  color:var(--ink);
  font-family:"Aptos","Avenir Next","Segoe UI","Microsoft YaHei",sans-serif;
}
body:before{opacity:.12;background-size:18px 18px}
.shell{max-width:1480px;padding:30px clamp(18px,3.8vw,56px) 58px}
.topbar{margin-bottom:24px;gap:18px}
.topbar h1{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.045em}
.topbar .muted{max-width:48rem;margin-top:9px;color:#60716e}
.panel{border:1px solid #d4dfdc;border-radius:var(--radius-panel);box-shadow:0 14px 34px #355c5310,inset 0 1px #ffffffdd}
.form-panel,.results-panel{padding:22px}
.form-heading{margin-bottom:16px}
.eyebrow{color:var(--accent);letter-spacing:1.15px;font-size:10px}
.model-chip,.status{border-radius:999px}
.model-chip{padding:6px 10px;background:var(--surface-tint);border-color:#b9ddd5}
.tabs{gap:4px;padding:5px;margin:8px 0 20px;border:1px solid #d7e5e1;border-radius:12px;background:#e6f0ed}
.tab{padding:10px 14px;border-radius:8px;color:#4e6560}
.tab.active{border-bottom-color:transparent;background:#fff;color:var(--accent-dark);box-shadow:0 4px 12px #345d5517}
button,input,textarea,select{border-radius:var(--radius-control)}
input,textarea,select{border-color:#cfdcd8;background:#fff}
input::placeholder,textarea::placeholder{color:#82928f;opacity:1}
input:focus,textarea:focus,select:focus{border-color:#4da398;box-shadow:0 0 0 3px #0f766e18}
.button{border-radius:var(--radius-control);padding:9px 13px;box-shadow:none}
.button.primary{background:var(--accent);border-color:var(--accent);box-shadow:0 7px 16px #0f766e20}
.button.primary:hover{background:var(--accent-dark);box-shadow:0 9px 20px #0f766e2b}
.button.ghost{background:#fff;border-color:#d2dfdb}
.button.ghost:hover{border-color:#7eb9af;background:#f4fbf9}
.field-grid{gap:12px}
.field-grid label,.upload-area label{font-size:12px}
.size-note,.local-prompt-notice,.panel-inset{background:var(--surface-soft);border-color:#cfe3de;border-radius:var(--radius-control)}
.upload-area{border-color:#a8c7c0;border-radius:var(--radius-control);background:#fbfdfc}
.submit{border-radius:var(--radius-control);margin-top:16px}
.results-panel{background:rgba(255,255,255,.92)}
.result-grid{gap:12px;min-height:360px}
.result-card{border-color:#d6e1de;border-radius:12px;overflow:hidden;background:#fcfefd;box-shadow:0 6px 18px #355c530b}
.result-card img{background:#eef4f1}
.result-card a{color:var(--accent-dark)}
.empty-state{border-color:#b8d0ca;border-radius:12px;background:#f9fcfb}
.progress{height:7px;background:#dfe9e5;border-radius:99px}
.progress span{border-radius:99px}
.customer-access,.diagnostic,.assistant-panel,.skill-shelf,.commerce-lab{border-radius:12px}
.customer-access{background:#f4fbf9;border-color:#c3e0d9}
.diagnostic,.assistant-panel{background:rgba(255,255,255,.78);border:1px solid #d7e3df}
.skill-shelf{background:linear-gradient(135deg,#edf8f5,#fff);border-color:#c5dfd9}
.skill-module{border-radius:10px;border-color:#d4e3df}

/* Superboard gets a studio surface instead of another generic card. */
.fusion-mode body{background:#edf3f1}
.fusion-mode .form-panel{padding:20px;background:#fff}
.fusion-mode .results-panel{padding:20px}
.fusion-mode .fusion-canvas{margin-top:10px;padding:0;border:1px solid #c7ddd7;border-radius:14px;background:#f3f9f7;overflow:hidden;box-shadow:0 10px 24px #315a5010}
.fusion-toolbar{padding:14px 16px;margin:0;border-bottom:1px solid #d4e4df;background:#f8fcfb}
.fusion-toolbar strong{font-size:16px;letter-spacing:-.01em}
.fusion-toolbar .muted{display:block;margin-top:3px;font-size:12px;color:#6b817c}
.fusion-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fusion-tools .button{white-space:nowrap}
.fusion-tools #fusionGenerate{box-shadow:0 6px 14px #0f766e1c}
.fusion-viewport-status{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:30px;padding:0 9px;border:1px solid #c8ddd8;border-radius:999px;background:#eff8f5;color:var(--accent-dark);font-size:11px;font-variant-numeric:tabular-nums}
.fusion-board{margin:14px;border-color:#cadbd7;border-radius:11px;background-color:#fff;background-image:radial-gradient(#b5cfca 1px,transparent 1px);box-shadow:inset 0 0 0 1px #ffffff}
.fusion-node.image-node{width:250px;min-height:190px;border-color:#c4dcd6;border-radius:12px;box-shadow:0 10px 24px #315a5015}
.fusion-node.image-node:hover{border-color:#7db9ae;box-shadow:0 14px 28px #315a5022}
.fusion-node.image-node:focus-visible{outline:3px solid #70b9ad;outline-offset:4px}
.fusion-node.image-node.keyboard-selected{box-shadow:0 0 0 3px #70b9ad55,0 14px 28px #315a5020}
.fusion-node.image-node.opened{border-color:var(--accent);box-shadow:0 0 0 3px #0f766e1c,0 14px 28px #315a5020}
.node-plus{border-color:#85bcb1;background-color:#f5fbf9;color:var(--accent);border-radius:9px}
.node-prompt,.node-local-prompt{border-radius:8px;background:#fbfdfc}
.wire-handle{border-color:var(--accent);box-shadow:0 0 0 3px #fff}
.fusion-wire-mode .wire-handle{box-shadow:0 0 0 3px #dff0ec}
.fusion-context-menu{border-color:#c7ddd7;border-radius:10px;box-shadow:0 16px 34px #244b421c}
.fusion-resize-handle{margin:0 14px 8px}
.fusion-mode .results-panel .form-heading{margin-bottom:14px}
.fusion-mode .results-panel .result-grid{min-height:220px}
.fusion-mode .submit{position:static}
@media(max-width:700px){
  .fusion-toolbar{align-items:flex-start}
  .fusion-toolbar>div:first-child{width:100%}
  .fusion-tools{width:100%}
  .fusion-tools .button{flex:1 1 auto}
  .fusion-board{margin:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media(max-width:560px){
  .diagnostic{grid-template-columns:1fr;gap:10px}
  .diagnostic-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .diagnostic-actions .button{min-height:40px;white-space:normal}
}

/* Final customer surface: routing is handled by the two group selectors. */
.setup-area,.status,#toggleSetup{display:none!important}

/* Customer-facing simplification: account groups are the only routing controls. */
.group-access-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 7px;border:1px solid #c9ded9;border-radius:12px;background:#f7fcfa}
.group-access-controls label{display:flex;align-items:center;gap:5px;margin:0;color:#48635e;font-size:11px;font-weight:700;white-space:nowrap}
.group-access-controls select{min-width:128px;padding:6px 8px;border-radius:8px;font-size:12px;background:#fff}
.skill-add-button{background:transparent!important;box-shadow:none!important}
.skill-add-button{position:relative;z-index:2;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:40px;padding:0 14px;border-radius:10px!important;font-size:13px;font-weight:700;letter-spacing:.01em}
.assistant-skill-row{display:flex;justify-content:flex-end;align-items:center;margin:0 0 8px}
.assistant-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:8px 10px;border:1px solid #c9ded9;border-radius:12px;background:#f7fcfa}
.assistant-controls label{margin:0}
#buildPrompts{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 7px 16px #0f766e26}
#buildPrompts:hover{background:var(--accent-dark)!important;border-color:var(--accent-dark)!important}
.workflow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:14px}
.workflow-grid .preset-card,.workflow-grid .preset-add{min-height:86px}
@media(max-width:900px){.workflow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.assistant-controls{align-items:stretch;flex-direction:column}.assistant-controls label{width:100%}.assistant-controls select{width:100%}.skill-add-button{width:100%}}
.skill-shelf:not(.hidden){display:block!important;position:relative;z-index:6;animation:skillShelfIn .2s ease-out}
@keyframes skillShelfIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.assistant-skill-row{margin-top:10px;min-height:34px}
.assistant-skill-note,.assistant-heading-actions .muted,.assistant-heading-actions #refreshAssistantModels{display:none!important}
.assistant-controls{justify-content:flex-start}
.assistant-controls select{min-width:260px}
.server-mode .manual-key-row,.server-mode .diagnostic{display:none!important}
.customer-access{padding:10px 12px}
.server-mode.customer-authenticated .customer-login-row,.server-mode.customer-authenticated .group-select-row,.server-mode.customer-authenticated .customer-message{display:none!important}
.settings-panel{max-width:760px;margin-left:auto}

/* Infinite-canvas controls and overview. */
.fusion-board{isolation:isolate}
.fusion-minimap{position:absolute;right:18px;bottom:18px;width:172px;height:110px;z-index:5;overflow:hidden;border:1px solid #bcd2cd;border-radius:10px;background:#f8fcfbd9;box-shadow:0 10px 28px #173a321c;backdrop-filter:blur(8px)}
.minimap-node{position:absolute;display:block;min-width:5px;min-height:4px;border:1px solid #0a514c;border-radius:2px;background:#69a99d;cursor:pointer}
.minimap-node:hover{background:#0f766e}
.minimap-viewport{position:absolute;inset:auto;border:1px solid #e68a2e;background:#f6ad5520;pointer-events:none}
.batch-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:0 0 14px;padding:12px;background:#f5faf8;border:1px solid #c8ded8;border-radius:12px}.batch-inline label{margin:0;font-size:12px;font-weight:600}.batch-inline textarea{display:block;width:100%;margin-top:6px;min-height:72px;font-family:ui-monospace,monospace;font-size:12px}.batch-inline span{font-size:12px;padding-bottom:9px}.batch-file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.batch-file-row label{cursor:pointer}@media(max-width:700px){.batch-inline{grid-template-columns:1fr}}
.batch-failure-list{margin-top:10px;padding:10px;border:1px solid #e8b4ac;border-radius:10px;background:#fff8f6}.batch-failure-item{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px}.billing-request-ids{display:block;margin-top:4px;word-break:break-all;font-family:ui-monospace,monospace;font-size:10px}
.billing-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fbfcfd}.billing-filters label{margin:0;font-size:11px;font-weight:600}.billing-filters select,.billing-filters input{display:block;min-width:180px;margin-top:4px}
.asset-library{margin:12px 0;padding:14px;background:#fbfdfc;border-color:#d2e2de}.asset-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.asset-heading strong{display:block;font-size:14px}.asset-heading span{display:block;margin-top:3px;font-size:11px}.asset-actions{display:flex;align-items:center;gap:8px}.asset-actions select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px}.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}.asset-card{position:relative;overflow:hidden;border:1px solid #d5e4e0;border-radius:10px;background:#fff}.asset-card img{display:block;width:100%;height:112px;object-fit:cover;background:#f1f6f4}.asset-card>div{padding:7px 8px 2px}.asset-card strong,.asset-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-card strong{font-size:12px}.asset-card small{margin-top:3px;color:var(--muted);font-size:10px}.asset-delete{margin:5px 7px 8px}@media(max-width:700px){.asset-heading{flex-direction:column}.asset-actions{width:100%}.asset-actions select{flex:1}}
.workspace-admin{margin:12px 0;padding:14px;background:#fbfdfc;border-color:#d2e2de}.workspace-admin-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.workspace-admin-heading strong{display:block;font-size:14px}.workspace-admin-heading span{display:block;margin-top:3px;font-size:11px}.workspace-admin-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:10px;margin-top:10px}.workspace-admin-grid label{margin:0;font-size:12px}.workspace-admin-grid input,.workspace-admin-grid textarea{display:block;width:100%;margin-top:5px}.workspace-admin-grid textarea{font-family:ui-monospace,monospace;font-size:12px}.workspace-admin-actions{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px}@media(max-width:700px){.workspace-admin-grid{grid-template-columns:1fr}.workspace-admin-actions{align-items:stretch;flex-direction:column}}
.fusion-wires path{stroke:#151918;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #fff);pointer-events:stroke;cursor:pointer}
.skill-command-menu button{display:flex;flex-direction:column;gap:2px}.skill-command-menu button strong{color:var(--accent-dark);font-size:13px}.skill-command-menu button span{font-size:11px;color:var(--muted)}
.fusion-wire-mode .wire-handle{transform:scale(1.16);background:#0f766e}
.fusion-node.dragging{transition:none!important;cursor:grabbing!important;box-shadow:0 18px 42px #183d3428!important}
.fusion-node .node-plus{aspect-ratio:16/10;width:100%;min-height:116px;background-color:#f5faf8}
.fusion-node.opened .node-plus{min-height:150px}
.fusion-node .node-prompt{field-sizing:content;min-height:58px;max-height:220px;overflow:auto}
.asset-actions input[type=search]{min-width:150px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:12px}
.asset-card-actions{display:flex;gap:5px;flex-wrap:wrap;margin:5px 7px 8px}.asset-card-actions .button{margin:0;padding-inline:7px;font-size:10px}.asset-card-actions .asset-delete{margin:0}
@media(max-width:700px){.fusion-minimap{width:132px;height:86px;right:12px;bottom:12px}.fusion-tools #fusionExport,.fusion-tools #fusionImport{display:none}}