:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #12151a;
  --panel-2: #171b21;
  --line: #272d35;
  --text: #f3f5f7;
  --muted: #89929e;
  --accent: #b8ff3d;
  --accent-dark: #18230d;
  --danger: #ff6b6b;
  --warning: #ffbe55;
  --success: #5fe19a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); margin: .3rem 0 0; font-size: .88rem; }
.eyebrow, .step { color: var(--accent); font-size: .72rem; letter-spacing: .15em; font-weight: 800; margin: 0 0 .45rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.055em; margin-bottom: .6rem; }
h2 { font-size: 1.8rem; letter-spacing: -.04em; margin-bottom: 0; }
h3 { font-size: 1.08rem; margin-bottom: 1.25rem; }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--accent); color: #0a0b0c; font-weight: 950; font-size: 1.5rem; margin-bottom: 1.4rem; transform: rotate(-4deg); }
.brand-mark.small { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; margin: 0; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at 75% 20%, rgba(184,255,61,.09), transparent 30%), linear-gradient(135deg, #090b0d, #0f1318); }
.login-card { width: min(440px, 100%); border: 1px solid var(--line); background: rgba(18,21,26,.9); padding: 2.4rem; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.stack { display: grid; gap: 1rem; margin-top: 2rem; }
label { display: grid; gap: .45rem; color: #c4cad1; font-size: .82rem; font-weight: 650; }
input, select, textarea { width: 100%; background: #0e1115; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: .78rem .85rem; outline: none; transition: border-color .18s, box-shadow .18s; }
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: #7fae30; box-shadow: 0 0 0 3px rgba(184,255,61,.08); }
select[multiple] { padding: .3rem; min-height: 130px; }
select[multiple] option { padding: .55rem; border-radius: 6px; }
.primary, .secondary, .ghost, .danger-button { border: 0; border-radius: 10px; padding: .78rem 1rem; font-weight: 800; }
.primary { background: var(--accent); color: #10140b; }
.primary:hover { filter: brightness(.92); }
.secondary { color: var(--text); background: #20252c; border: 1px solid #303741; }
.ghost { background: transparent; color: var(--muted); text-align: left; padding: .4rem 0; }
.danger-button { color: #ffb0b0; background: rgba(255,107,107,.12); padding: .45rem .7rem; font-size: .75rem; }
.wide { width: 100%; margin-top: .8rem; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 1.1rem; border-right: 1px solid var(--line); background: #0d1014; display: flex; flex-direction: column; }
.sidebar-brand { display: flex; align-items: center; gap: .8rem; font-weight: 900; padding: .3rem .4rem 1.6rem; }
nav { display: grid; gap: .35rem; }
.nav-item { display: flex; align-items: center; gap: .75rem; border: 0; color: #9ca5b0; background: transparent; padding: .8rem; border-radius: 10px; text-align: left; font-weight: 700; }
.nav-item span { color: #68727e; width: 18px; font-size: 1.1rem; }
.nav-item:hover, .nav-item.active { color: var(--text); background: #191e24; }
.nav-item.active span { color: var(--accent); }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding: 1rem .4rem .2rem; }
.user-pill { font-weight: 800; font-size: .88rem; }
.user-pill small { color: var(--muted); display: block; margin-top: .2rem; font-weight: 500; }
.workspace { min-width: 0; padding: 1.4rem 2rem 3rem; }
.topbar { min-height: 85px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.summary-chips { display: flex; gap: .5rem; }
.summary-chips span { border: 1px solid var(--line); background: #101318; color: var(--muted); padding: .5rem .7rem; border-radius: 99px; font-size: .75rem; }
.panel { display: none; }
.panel.active { display: block; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 1.25rem; align-items: start; }
.accounts-layout { grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.35rem; }
.form-card { display: grid; gap: 1rem; }
.side-card { position: sticky; top: 1.2rem; background: linear-gradient(160deg, #151a20, #101318); }
.section-heading { display: flex; justify-content: space-between; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.section-heading h3 { margin: 0; }
.section-heading.compact { margin-top: .7rem; }
.grid { display: grid; gap: .9rem; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.four { grid-template-columns: 1.2fr 1.2fr .7fr 1fr; align-items: end; }
.checkbox-label { display: flex; align-items: center; gap: .55rem; min-height: 43px; }
.checkbox-label input { width: 18px; height: 18px; accent-color: var(--accent); }
.inline-checks { display: flex; gap: 1.4rem; }
.help { color: var(--muted); font-size: .75rem; margin: -.1rem 0 .2rem; }
.input-selectors { display: grid; gap: .85rem; background: #0f1216; border: 1px dashed #303741; border-radius: 12px; padding: 1rem; }
.tips-list { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 1rem; counter-reset: item; }
.tips-list li { display: grid; grid-template-columns: 28px 1fr; column-gap: .7rem; }
.tips-list li::before { counter-increment: item; content: counter(item); grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #3b444f; border-radius: 50%; color: var(--accent); font-size: .7rem; font-weight: 900; }
.tips-list strong { font-size: .88rem; }
.tips-list span { color: var(--muted); font-size: .78rem; margin-top: .2rem; line-height: 1.45; }
.notice { margin-top: 1.4rem; padding: 1rem; border: 1px solid rgba(184,255,61,.2); background: var(--accent-dark); border-radius: 12px; }
.notice span { color: var(--accent); font-size: .7rem; font-weight: 900; }
.notice p { margin: .35rem 0 0; color: #b9c5a4; font-size: .8rem; line-height: 1.45; }
.card-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.card-toolbar h3 { margin: 0; }
.table-card { padding: 0; overflow: hidden; }
.table-card .card-toolbar { padding: 1.25rem 1.35rem 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { color: #68727e; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; text-align: left; background: #0f1216; }
th, td { padding: .9rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; }
td strong { display: block; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td small { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: .4rem; border-radius: 99px; padding: .35rem .55rem; font-size: .7rem; font-weight: 900; background: #222831; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.succeeded { color: var(--success); background: rgba(95,225,154,.1); }
.status.failed, .status.expired, .status.cancelled { color: var(--danger); background: rgba(255,107,107,.1); }
.status.running, .status.queued, .status.submitting { color: var(--warning); background: rgba(255,190,85,.1); }
.upload-card { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; background: linear-gradient(110deg, #12151a, #16200f); }
.upload-card h3 { margin-bottom: .3rem; }
.upload-form { display: flex; gap: .6rem; align-items: center; }
.upload-form input { max-width: 320px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.asset-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.asset-preview { aspect-ratio: 16/9; display: grid; place-items: center; background: #090b0e; color: #58616c; overflow: hidden; }
.asset-preview video, .asset-preview img { width: 100%; height: 100%; object-fit: cover; }
.asset-preview.audio { font-size: 2rem; }
.asset-info { padding: .85rem; }
.asset-info strong { display: block; font-size: .84rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.asset-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .7rem; margin-top: .5rem; }
.asset-actions { display: flex; gap: .5rem; margin-top: .8rem; }
.asset-actions a { color: var(--accent); font-size: .75rem; text-decoration: none; }
.list-stack { display: grid; gap: .7rem; }
.list-item { border: 1px solid var(--line); background: var(--panel-2); border-radius: 11px; padding: .9rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.list-item strong { font-size: .88rem; }
.list-item small { display: block; color: var(--muted); margin-top: .25rem; }
.list-actions { display: flex; gap: .4rem; }
.toast { position: fixed; z-index: 100; right: 1.4rem; top: 1.4rem; max-width: 420px; background: #20262d; border: 1px solid #343d47; border-radius: 11px; padding: .85rem 1rem; box-shadow: 0 15px 45px rgba(0,0,0,.4); opacity: 0; transform: translateY(-12px); pointer-events: none; transition: .2s; font-size: .82rem; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255,107,107,.5); color: #ffb5b5; }
.empty { color: var(--muted); padding: 2.3rem 1rem; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }
.enhance-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.enhance-presets button { font-size: .72rem; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: 99px; background: #14181d; color: var(--muted); }
.enhance-presets button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dark); }

/* Visual workflow canvas */
.workflow-shell { display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1rem; min-height: 700px; }
.workflow-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; margin-bottom: 0; padding: .9rem 1rem; grid-column: 1; grid-row: 1; min-width: 0; }
.workflow-project-controls { display: grid; grid-template-columns: 1fr; gap: .65rem; flex: 0 0 auto; min-width: 0; }
.workflow-project-controls label { gap: .3rem; }
.workflow-project-controls input, .workflow-project-controls select { padding: .58rem .7rem; width: 100%; min-width: 0; }
.workflow-toolbar-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.workflow-toolbar-actions button { white-space: nowrap; flex: 1 1 auto; }
.workflow-assets { padding: 1rem; display: flex; flex-direction: column; min-height: 0; grid-column: 1; grid-row: 2; min-width: 0; }
.workflow-assets h3 { margin-bottom: .45rem; }
.workflow-asset-tray { display: grid; align-content: start; gap: .65rem; margin-top: 1rem; max-height: 585px; overflow-y: auto; padding-right: .2rem; }
.workflow-file-drop { margin-top: .8rem; padding: .8rem; border: 1px dashed #3b4652; border-radius: 10px; background: #11151a; text-align: center; cursor: pointer; transition: .18s; }
.workflow-file-drop:hover, .workflow-file-drop.dragging { border-color: var(--accent); background: var(--accent-dark); }
.workflow-file-drop input { display: none; }
.workflow-file-drop strong, .workflow-file-drop span { display: block; }
.workflow-file-drop strong { color: #dce2e8; font-size: .76rem; }
.workflow-file-drop span { color: var(--muted); font-size: .63rem; margin-top: .2rem; }
.workflow-tray-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: .65rem; align-items: center; background: #191d23; border: 1px solid #2b323b; border-radius: 10px; padding: .45rem; cursor: grab; user-select: none; }
.workflow-tray-item:active { cursor: grabbing; }
.workflow-tray-item:hover { border-color: #566273; transform: translateY(-1px); }
.workflow-tray-thumb { width: 58px; aspect-ratio: 16/10; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: #090b0d; color: #7b8794; font-weight: 900; }
.workflow-tray-thumb img, .workflow-tray-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.workflow-tray-meta { min-width: 0; }
.workflow-tray-meta strong { display: block; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-tray-meta small { display: block; color: var(--muted); margin-top: .2rem; font-size: .67rem; }
.workflow-viewport { min-width: 0; height: 100%; min-height: 650px; border: 1px solid var(--line); border-radius: 16px; overflow: auto; background: #0a0c0f; box-shadow: inset 0 0 50px rgba(0,0,0,.2); grid-column: 2; grid-row: 1 / 3; }
.workflow-viewport.panning, .workflow-viewport.panning * { cursor: grabbing !important; user-select: none !important; }
.workflow-zoom-sizer { position: relative; }
.workflow-surface { position: relative; width: 2200px; height: 1300px; background-color: #0c0f13; background-image: radial-gradient(circle, #303640 1px, transparent 1.2px); background-size: 22px 22px; transform: scale(1); transform-origin: 0 0; }
.workflow-edges { position: absolute; z-index: 1; inset: 0; width: 2200px; height: 1300px; pointer-events: none; overflow: visible; }
.workflow-edge { fill: none; stroke: #5c93c7; stroke-width: 3; opacity: .9; marker-end: url(#workflowArrow); filter: drop-shadow(0 0 3px rgba(76,152,220,.32)); }
.workflow-edge.output { stroke: var(--accent); }
.workflow-edge.draft { stroke: #d8e7f5; stroke-dasharray: 6 5; marker-end: none; }
.workflow-edges marker path { fill: #5c93c7; }
.workflow-nodes { position: absolute; z-index: 2; inset: 0; }
.workflow-empty { position: absolute; z-index: 0; left: 360px; top: 270px; width: 420px; padding: 2.5rem; border: 1px dashed #343b45; border-radius: 18px; color: #737e8b; text-align: center; pointer-events: none; }
.workflow-empty strong, .workflow-empty span { display: block; }
.workflow-empty strong { color: #b5bdc7; margin-bottom: .5rem; }
.workflow-drop-overlay { position: sticky; z-index: 50; left: calc(50% - 210px); top: 180px; width: 420px; padding: 2.4rem; text-align: center; border: 2px dashed var(--accent); border-radius: 18px; color: var(--accent); background: rgba(19,29,12,.94); box-shadow: 0 25px 80px rgba(0,0,0,.5); pointer-events: none; }
.workflow-drop-overlay strong, .workflow-drop-overlay span { display: block; }
.workflow-drop-overlay span { margin-top: .4rem; color: #bac7a7; font-size: .75rem; }
.workflow-node { position: absolute; border: 1px solid #343b45; border-radius: 14px; background: #171a1f; box-shadow: 0 18px 45px rgba(0,0,0,.35); overflow: visible; }
.workflow-node:hover { border-color: #4b5663; }
.workflow-node.asset-node { width: 250px; }
.workflow-node.generation-node { width: 370px; }
.workflow-node.result-node { width: 290px; border-color: rgba(184,255,61,.35); }
.workflow-node-header { min-height: 42px; padding: .65rem .75rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-bottom: 1px solid #2b3139; cursor: move; user-select: none; background: #1b1f25; border-radius: 13px 13px 0 0; }
.workflow-node-header strong { min-width: 0; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-node-header > div:first-child { min-width: 0; }
.workflow-node-header strong { display: block; }
.workflow-node-type { display: block; color: var(--accent); font-size: .56rem; letter-spacing: .09em; font-weight: 900; margin-bottom: .12rem; }
.workflow-node-actions { display: flex; align-items: center; gap: .35rem; }
.workflow-icon-button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid #3b444f; background: #242a31; color: #d7dce2; font-weight: 900; }
.workflow-icon-button:hover { border-color: var(--accent); color: var(--accent); }
.workflow-remove-node { color: #9aa3ad; background: transparent; border: 0; padding: .2rem; }
.workflow-node-body { padding: .75rem; }
.workflow-node-preview { aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: #090b0e; color: #6e7985; }
.workflow-node-preview img, .workflow-node-preview video { width: 100%; height: 100%; object-fit: cover; }
.workflow-node-info { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .66rem; margin-top: .55rem; }
.workflow-operation-menu { position: absolute; z-index: 20; left: calc(100% + 8px); top: 8px; width: 180px; background: #22262b; border: 1px solid #3b424b; border-radius: 12px; padding: .45rem; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.workflow-operation-menu p { margin: .25rem .4rem .35rem; color: var(--muted); font-size: .65rem; }
.workflow-operation-menu button { width: 100%; display: flex; align-items: center; gap: .55rem; color: #edf1f5; background: transparent; border: 0; border-radius: 8px; padding: .65rem; text-align: left; font-weight: 700; }
.workflow-operation-menu button:hover { background: #30363d; }
.workflow-operation-menu small { margin-left: auto; color: var(--muted); }
.workflow-generation-form { display: grid; gap: .65rem; }
.workflow-generation-form label { gap: .25rem; font-size: .66rem; }
.workflow-generation-form input, .workflow-generation-form select, .workflow-generation-form textarea { padding: .55rem .6rem; border-radius: 8px; font-size: .73rem; }
.workflow-generation-form textarea { min-height: 98px; resize: vertical; }
.workflow-form-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding-top: .15rem; }
.workflow-form-section-title:not(:first-child) { margin-top: .15rem; padding-top: .65rem; border-top: 1px solid #292f36; }
.workflow-form-section-title strong { color: #e8edf2; font-size: .7rem; }
.workflow-form-section-title span { color: var(--muted); font-size: .59rem; text-align: right; }
.workflow-prompt-field textarea { width: 100%; }
.workflow-generation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.workflow-generation-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.workflow-generation-options label { display: flex; align-items: center; gap: .3rem; min-height: auto; }
.workflow-generation-options input { width: 14px; height: 14px; padding: 0; }
.workflow-input-summary { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem; background: #111419; border-radius: 8px; min-height: 34px; }
.workflow-input-summary span { border-radius: 99px; padding: .25rem .45rem; background: #282e36; color: #b9c1ca; font-size: .62rem; }
.workflow-input-summary span button { margin-left: .3rem; padding: 0; border: 0; background: transparent; color: #89939f; }
.workflow-input-summary span button:hover { color: var(--danger); }
.workflow-input-summary .empty-input { color: #6f7883; background: transparent; padding-left: 0; }
.workflow-node-submit { padding: .6rem .75rem; font-size: .73rem; }
.workflow-node-submit:disabled { opacity: .55; cursor: wait; }
.workflow-node-status { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .55rem; border-top: 1px solid #292f36; font-size: .68rem; color: var(--muted); }
.workflow-node-status .status { font-size: .62rem; padding: .28rem .45rem; }
.workflow-result-links { display: flex; gap: .5rem; margin-top: .6rem; }
.workflow-result-links a { color: var(--accent); font-size: .7rem; text-decoration: none; }
.workflow-handle { position: absolute; z-index: 5; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 4px solid #171a1f; box-shadow: 0 0 0 1px #647181; cursor: crosshair; transition: transform .15s, box-shadow .15s, opacity .15s; }
.workflow-handle:hover { transform: scale(1.22); box-shadow: 0 0 0 2px #dce7f0, 0 0 16px rgba(116,184,242,.6); }
.workflow-output-handle { right: -12px; top: 64px; background: #74b8f2; }
.generation-node .workflow-output-handle { top: 20px; background: var(--accent); }
.workflow-result-input { left: -12px; top: 20px; background: var(--accent); cursor: default; }
.workflow-output-handle.connect-source { transform: scale(1.28); box-shadow: 0 0 0 3px #dceaf5, 0 0 22px rgba(116,184,242,.9); }
.workflow-input-handle.connect-compatible { animation: workflowHandlePulse .85s ease-in-out infinite alternate; box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 0 16px currentColor; }
.workflow-input-handle.connect-incompatible { opacity: .25; cursor: not-allowed; }
.workflow-surface.connecting { cursor: crosshair; }
@keyframes workflowHandlePulse { from { transform: scale(1); } to { transform: scale(1.28); } }
.workflow-input-handle { left: -12px; }
.workflow-input-handle[data-handle="first_frame"] { top: 72px; background: #69d69b; }
.workflow-input-handle[data-handle="last_frame"] { top: 111px; background: #ffbe55; }
.workflow-input-handle[data-handle="reference"] { top: 150px; background: #b48cff; }
.workflow-handle-label { position: absolute; left: 13px; width: 48px; color: #8e98a4; font-size: .58rem; pointer-events: none; }
.workflow-input-handle[data-handle="first_frame"] .workflow-handle-label { top: -2px; }
.workflow-input-handle[data-handle="last_frame"] .workflow-handle-label { top: -2px; }
.workflow-input-handle[data-handle="reference"] .workflow-handle-label { top: -2px; }
.workflow-legend { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: .8rem 0 0 245px; font-size: .7rem; color: #a9b1bb; }
.workflow-legend span { display: flex; align-items: center; gap: .35rem; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.asset-dot { background: #74b8f2; }.first-dot { background: #69d69b; }.last-dot { background: #ffbe55; }.ref-dot { background: #b48cff; }
.workflow-saving { color: var(--warning); }
.workflow-saved { color: var(--success); }

/* === 画布视频节点：选中 + 浮动工具栏 + 超分面板 === */
.workflow-node.selectable { cursor: pointer; }
.workflow-node.selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(184,255,61,.45), 0 18px 45px rgba(0,0,0,.5); }
.workflow-node.selected::before {
  content: ""; position: absolute; left: -6px; top: -6px; right: -6px; bottom: -6px;
  border: 1px dashed rgba(184,255,61,.55); border-radius: 18px; pointer-events: none;
}

.workflow-selection-toolbar {
  position: absolute; z-index: 30;
  display: flex; align-items: stretch; gap: 2px;
  padding: 6px; border-radius: 16px;
  background: rgba(20,24,29,.95); border: 1px solid #363e48;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.workflow-toolbar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 56px;
  padding: 6px 9px; border: 0; border-radius: 11px;
  background: transparent; color: #d6dce3;
  font-size: .66rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.workflow-toolbar-item:hover { background: #2a313a; color: #fff; }
.workflow-toolbar-item.primary { background: rgba(184,255,61,.08); color: var(--accent); }
.workflow-toolbar-item.primary:hover { background: rgba(184,255,61,.16); }
.workflow-toolbar-item.active { background: var(--accent); color: #0a0c0a; }
.workflow-toolbar-item.active .workflow-toolbar-label,
.workflow-toolbar-item.active .workflow-toolbar-icon { color: #0a0c0a; }
.workflow-toolbar-item.utility { min-width: 32px; padding: 6px; }
.workflow-toolbar-item.utility .workflow-toolbar-label { display: none; }
.workflow-toolbar-divider {
  width: 1px; margin: 4px 4px; background: #353c45;
}
.workflow-toolbar-icon { font-size: 1rem; line-height: 1; font-weight: 900; color: inherit; }
.workflow-toolbar-label { font-size: .62rem; color: inherit; }

.workflow-enhance-panel {
  position: absolute; z-index: 30; width: 360px;
  background: rgba(18,21,26,.97); border: 1px solid #383f49; border-radius: 16px;
  padding: 1rem 1.1rem; box-shadow: 0 25px 70px rgba(0,0,0,.55);
  display: grid; gap: .7rem;
}
.workflow-enhance-panel::before {
  content: ""; position: absolute; left: 50%; top: -10px; width: 14px; height: 14px;
  background: rgba(18,21,26,.97); border-left: 1px solid #383f49; border-top: 1px solid #383f49;
  transform: translateX(-50%) rotate(45deg);
}
.workflow-enhance-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.workflow-enhance-header > div { min-width: 0; }
.workflow-enhance-header strong { font-size: 1.05rem; letter-spacing: -.02em; display: block; color: var(--accent); }
.workflow-enhance-header small { color: var(--muted); font-size: .72rem; margin-top: .25rem; display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-enhance-close { background: transparent; border: 0; color: #8a929c; font-size: 1.4rem; line-height: 1; padding: 0 .2rem; }
.workflow-enhance-close:hover { color: var(--danger); }
.workflow-enhance-form { display: grid; gap: .8rem; }
.workflow-enhance-form label { gap: .35rem; font-size: .78rem; }
.workflow-enhance-form select, .workflow-enhance-form input {
  font-size: .82rem; padding: .55rem .7rem; border-radius: 9px;
}
.workflow-enhance-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6f7985 50%), linear-gradient(135deg, #6f7985 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.workflow-enhance-form .badge-new { display: inline-block; margin-left: .4rem; padding: .1rem .35rem; border-radius: 99px; background: rgba(184,255,61,.18); color: var(--accent); font-size: .55rem; letter-spacing: .12em; font-weight: 900; }
.workflow-enhance-fps-row { display: grid; grid-template-columns: 28px 1fr 58px 28px 36px; gap: .4rem; align-items: center; }
.workflow-enhance-fps-step {
  height: 36px; border: 1px solid #383f49; border-radius: 8px; background: #242a31; color: #d6dce3;
  font-size: 1rem; font-weight: 900; line-height: 1;
}
.workflow-enhance-fps-step:hover { background: #2f3640; }
.workflow-enhance-slider { width: 100%; padding: 0; height: 36px; background: transparent; border: 0; }
.workflow-enhance-slider:focus { box-shadow: none; }
.workflow-enhance-fps-number {
  text-align: center; padding: .4rem .2rem !important; font-weight: 800;
}
.workflow-enhance-submit {
  background: var(--accent); color: #0b0d0a; border: 0; border-radius: 10px;
  font-size: 1.1rem; font-weight: 900; height: 36px;
}
.workflow-enhance-submit:hover { filter: brightness(.92); }
.workflow-enhance-submit:disabled { opacity: .55; cursor: wait; }

.workflow-enhance-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.workflow-enhance-presets button {
  font-size: .68rem; padding: .35rem .6rem; border-radius: 99px;
  background: #14181d; color: var(--muted); border: 1px solid #2b323b;
}
.workflow-enhance-presets button:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-dark);
}
.workflow-enhance-busy { color: var(--warning); font-size: .7rem; }

/* Slider */
input[type="range"].workflow-enhance-slider {
  -webkit-appearance: none; appearance: none; background: transparent;
}
input[type="range"].workflow-enhance-slider::-webkit-slider-runnable-track {
  height: 6px; background: #2a313a; border-radius: 99px;
}
input[type="range"].workflow-enhance-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(184,255,61,.12); cursor: pointer;
}
input[type="range"].workflow-enhance-slider::-moz-range-track {
  height: 6px; background: #2a313a; border-radius: 99px;
}
input[type="range"].workflow-enhance-slider::-moz-range-thumb {
  width: 18px; height: 18px; background: var(--accent); border-radius: 50%; border: 0;
  box-shadow: 0 0 0 4px rgba(184,255,61,.12); cursor: pointer;
}

/* === 画布缩放控制 === */
.workflow-zoom-control {
  position: absolute; z-index: 40;
  display: flex; align-items: center; gap: 2px;
  padding: 5px 6px; border-radius: 12px;
  background: rgba(20,24,29,.95); border: 1px solid #363e48;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); backdrop-filter: blur(6px);
  user-select: none;
}
.workflow-zoom-control .zoom-btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: transparent; color: #d6dce3;
  font-size: 1.05rem; font-weight: 900; cursor: pointer; transition: background .15s, color .15s;
}
.workflow-zoom-control .zoom-btn:hover { background: #2a313a; color: #fff; }
.workflow-zoom-control .zoom-btn:active { background: var(--accent-dark); color: var(--accent); }
.workflow-zoom-control .zoom-level {
  min-width: 50px; text-align: center; font-size: .76rem; font-weight: 800;
  color: #d6dce3; user-select: none; cursor: pointer; transition: color .15s;
}
.workflow-zoom-control .zoom-level:hover { color: var(--accent); }
.workflow-zoom-control .zoom-divider { width: 1px; height: 20px; background: #353c45; margin: 0 2px; }
.workflow-zoom-control .zoom-fit { font-size: .85rem; }
.workflow-zoom-control .zoom-fit:hover { background: #2a313a; color: var(--accent); }
.workflow-zoom-control .zoom-reset { font-size: .9rem; }
.workflow-zoom-control .zoom-reset:hover { background: #2a313a; color: var(--accent); }

/* === 沉浸式画布页（?view=canvas 在新标签页打开） === */
#canvasPageBar { display: none; }
.canvas-page-bar {
  align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 46px; margin-bottom: .8rem;
}
.canvas-page-bar .canvas-back {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--text); font-weight: 800; font-size: .88rem; text-decoration: none;
  padding: .52rem .9rem; border-radius: 10px;
  background: #20252c; border: 1px solid #303741; transition: border-color .15s, color .15s;
}
.canvas-page-bar .canvas-back:hover { border-color: #7fae30; color: var(--accent); }
.canvas-page-meta { display: flex; align-items: center; gap: .9rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
.canvas-page-meta .ghost { font-size: .78rem; }
body.mode-canvas { overflow: hidden; }
body.mode-canvas .sidebar,
body.mode-canvas .topbar { display: none; }
body.mode-canvas .app-shell { grid-template-columns: 1fr; }
body.mode-canvas .workspace {
  height: 100vh; box-sizing: border-box; overflow: hidden;
  padding: .9rem 1.1rem 1rem;
  display: flex; flex-direction: column;
}
body.mode-canvas #canvasPageBar { display: flex; }
body.mode-canvas #panel-canvas {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
body.mode-canvas .workflow-shell { flex: 1 1 auto; min-height: 0; }
body.mode-canvas .workflow-assets { min-height: 0; }
body.mode-canvas .workflow-asset-tray { flex: 1 1 auto; min-height: 0; max-height: none; }
body.mode-canvas .workflow-viewport { height: 100%; min-height: 0; }
body.mode-canvas .workflow-legend { margin: .6rem 0 0; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 72px 1fr; }
  .sidebar-brand span:last-child, .nav-item { font-size: 0; }
  .nav-item span { font-size: 1.1rem; }
  .sidebar-bottom { display: none; }
  .two-column, .accounts-layout { grid-template-columns: 1fr; }
  .side-card { position: static; }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-shell { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .workflow-legend { margin-left: 195px; }
  .workflow-enhance-panel { width: 320px; }
}
@media (max-width: 640px) {
  .workspace { padding: 1rem; }
  .topbar { align-items: flex-start; }
  .summary-chips { display: none; }
  .grid.two, .grid.four { grid-template-columns: 1fr; }
  .upload-card, .upload-form { align-items: stretch; flex-direction: column; }
  .workflow-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .workflow-toolbar { grid-column: 1; grid-row: 1; }
  .workflow-assets { grid-column: 1; grid-row: 2; min-height: auto; }
  .workflow-asset-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 250px; }
  .workflow-viewport { grid-column: 1; grid-row: 3; height: 650px; min-height: 650px; }
  .workflow-legend { margin-left: 0; }
  .workflow-selection-toolbar { flex-wrap: wrap; max-width: 100%; }
  .workflow-enhance-panel { width: calc(100vw - 80px); min-width: 0; }
}