:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(12, 25, 43, .94);
  --panel-2: #0d1b2e;
  --line: rgba(151, 174, 211, .16);
  --line-strong: rgba(151, 174, 211, .3);
  --text: #edf6ff;
  --muted: #8092ab;
  --blue: #377cfb;
  --purple: #835cff;
  --cyan: #00d8d4;
  --green: #24d5a2;
  --red: #ff6577;
  --amber: #ffbd59;
  --topbar: 68px;
  --library-width: 310px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--text); background: var(--bg); }
button, input, textarea { font: inherit; }
button { color: inherit; }

.app-shell { width: 100vw; height: 100vh; background: radial-gradient(circle at 52% 12%, rgba(31, 80, 139, .15), transparent 34%), var(--bg); }
.app-shell.is-home-view .workflow-name-wrap { visibility: hidden; pointer-events: none; }
.topbar { height: var(--topbar); padding: 0 18px; display: grid; grid-template-columns: 310px minmax(220px, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); background: rgba(7, 17, 31, .92); backdrop-filter: blur(18px); position: relative; z-index: 50; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 7px 22px rgba(24, 84, 255, .25); }
.brand div { display: grid; gap: 2px; }
.brand strong { font-size: 16px; letter-spacing: .2px; }
.brand span { color: var(--muted); font-size: 11px; }
.workflow-name-wrap { justify-self: center; display: flex; align-items: center; gap: 8px; }
.workflow-name-wrap input { width: min(320px, 25vw); border: 1px solid transparent; border-radius: 8px; background: transparent; color: #dce9f7; text-align: center; padding: 7px 10px; font-weight: 650; outline: 0; }
.workflow-name-wrap input:hover, .workflow-name-wrap input:focus { border-color: var(--line); background: rgba(255,255,255,.035); }
.workflow-name-wrap span { color: #5f728c; font-size: 11px; white-space: nowrap; }
.workflow-name-wrap span.is-dirty { color: var(--amber); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.top-actions .ghost-button, .top-actions .primary-button, .top-actions .account-badge { height: 42px; }
.ghost-button, .primary-button { min-height: 36px; border-radius: 9px; border: 1px solid var(--line); padding: 0 13px; cursor: pointer; transition: .18s ease; }
.ghost-button { background: rgba(255,255,255,.035); color: #aebdd0; }
.ghost-button:hover { color: white; border-color: rgba(85,133,225,.5); background: rgba(69,111,190,.12); }
.primary-button { border: 0; background: linear-gradient(135deg, #5d54f7, #2580ff); color: white; font-weight: 700; box-shadow: 0 8px 22px rgba(43, 105, 255, .22); }
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.primary-button:disabled { cursor: wait; filter: saturate(.45); opacity: .68; transform: none; }
.account-badge { min-width: 170px; padding: 0 10px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; border: 1px solid rgba(115,143,181,.26); border-radius: 8px; background: rgba(5,15,28,.58); text-decoration: none; margin-left: 2px; box-sizing: border-box; }
.account-badge.is-online { border-color: rgba(94,234,212,.32); }
.account-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #4566ff, #7a5cff); color: #fff; font-size: 12px; font-weight: 800; }
.account-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.account-meta { min-width: 0; display: grid; gap: 1px; line-height: 1.05; }
.account-meta strong { max-width: 108px; overflow: hidden; color: #f3f8ff; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; line-height: 1.05; }
.account-meta small { max-width: 118px; overflow: hidden; color: #8fa5bb; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; line-height: 1.05; }

.workspace { position: relative; height: calc(100vh - var(--topbar)); display: grid; grid-template-columns: var(--library-width) minmax(0, 1fr); }
.library-panel, .inspector-panel { min-width: 0; position: relative; z-index: 25; background: var(--panel); backdrop-filter: blur(16px); }
.library-panel { min-height: 0; height: 100%; border-right: 1px solid var(--line); padding: 15px 12px 0; overflow: hidden; transition: width .2s, transform .2s; display: flex; flex-direction: column; }
.library-resize-handle { position: absolute; z-index: 40; top: 0; bottom: 0; left: var(--library-width); width: 7px; cursor: col-resize; touch-action: none; background: transparent; }
.library-head { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 13px; }
.library-head div { display: grid; gap: 3px; }
.library-head strong { font-size: 14px; }
.library-head span { font-size: 10px; color: var(--muted); }
.library-head button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; color: var(--muted); }
.search-box { height: 37px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(2,9,18,.45); }
.search-box span { color: #6480a4; font-size: 18px; }
.search-box input { min-width: 0; width: 100%; border: 0; background: transparent; color: white; outline: 0; font-size: 12px; }
.quick-tools { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 9px 0 20px; }
.quick-tools button { border: 1px solid var(--line); border-radius: 9px; min-height: 50px; padding: 3px 2px 2px; background: rgba(255,255,255,.025); display: grid; place-items: center; align-content: center; gap: 3px; cursor: grab; }
.quick-tools button:hover { border-color: rgba(84,128,238,.5); background: rgba(53,91,171,.1); }
.quick-tools b { font-size: 11px; font-weight: 550; color: #b8c7d8; }
.tool-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; }
.tool-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.text-icon { background: rgba(95,101,255,.14); color: #918bff; }
.image-icon { background: rgba(0,216,212,.12); color: var(--cyan); }
.model-group { margin: 0 0 16px; }
.model-group-title { padding: 0 5px 7px; color: #617590; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }
.model-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; margin: 0 0 6px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; cursor: grab; }
.model-item:hover { background: rgba(255,255,255,.035); border-color: var(--line); }
.model-item .model-symbol { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(105,85,255,.2), rgba(0,216,212,.12)); color: #8ee5ff; font-weight: 800; font-size: 12px; }
.model-item div { min-width: 0; display: grid; gap: 3px; }
.model-item strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-item small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-item em { color: #51657f; font-style: normal; font-size: 16px; }
.library-tip { display: flex; gap: 8px; margin: 18px 3px 4px; padding: 10px; border: 1px solid rgba(53,112,195,.18); border-radius: 9px; background: rgba(35,80,145,.08); color: #6e85a3; font-size: 10px; line-height: 1.55; }
.library-tip span { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #1e5796; color: white; }
.library-tip p { margin: 0; }

.inspector-panel { flex: 1; min-height: 0; margin-right: -12px; border: 0; padding: 0 12px 14px 3px; overflow-x: hidden; overflow-y: scroll; background: transparent; backdrop-filter: none; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #4b5563 rgba(15,20,28,.45); }
.inspector-panel::-webkit-scrollbar { width: 6px; }
.inspector-panel::-webkit-scrollbar-track { border-radius: 6px; background: rgba(15,20,28,.45); }
.inspector-panel::-webkit-scrollbar-thumb { min-height: 38px; border-radius: 6px; background: #4b5563; }
.inspector-panel::-webkit-scrollbar-thumb:hover { background: #5f6b7a; }
.empty-inspector { height: 100%; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; color: var(--muted); }
.empty-inspector > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(72,82,219,.12); color: #8e83ff; font-size: 22px; }
.empty-inspector strong { color: #b6c7da; font-size: 13px; }
.empty-inspector p { max-width: 180px; margin: 0; font-size: 11px; line-height: 1.6; }
.inspector-title { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.inspector-title span { color: var(--muted); font-size: 10px; }
.inspector-title h2 { margin: 4px 0 0; font-size: 15px; }
.inspector-section { padding: 11px 0; border-bottom: 1px solid var(--line); }
.inspector-section > strong { display: block; margin-bottom: 9px; font-size: 11px; color: #9aacc2; }
.inspector-row { display: flex; justify-content: space-between; gap: 12px; margin: 7px 0; font-size: 10px; color: var(--muted); }
.inspector-row b { color: #c4d2e2; font-weight: 500; text-align: right; word-break: break-all; }
.inspector-panel textarea { width: 100%; min-height: 90px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; background: rgba(1,8,17,.55); color: white; padding: 9px; outline: 0; font-size: 11px; line-height: 1.6; }
.inspector-field { display: grid; gap: 6px; margin: 8px 0; color: var(--muted); font-size: 10px; }
.inspector-field select { width: 100%; height: 31px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: #091728; color: #dceaff; outline: 0; }
.aspect-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.aspect-option { min-height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: #a9bad0; cursor: pointer; }
.aspect-option b { font-size: 11px; color: #d9e7f7; }
.aspect-option span { font-size: 8px; }
.aspect-option:hover,.aspect-option.is-active { border-color: #5874ff; background: rgba(72,91,255,.12); color: white; }
.mask-editor { position: relative; width: 100%; aspect-ratio: 4/3; margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #050d17 center/contain no-repeat; }
.mask-editor canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.mask-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: #71859e; font-size: 10px; line-height: 1.6; text-align: center; pointer-events: none; }
.mask-editor.has-image .mask-empty { display: none; }
.mask-expand-close,.mask-expanded-toolbar,.mask-brush-cursor { display: none; }
.mask-editor-modal { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 5vh 5vw 11vh; background: rgba(0,5,13,.86); backdrop-filter: blur(8px); outline: none; }
.mask-editor.is-expanded { position: relative; width: auto; margin: 0; overflow: visible; flex: none; border-color: rgba(104,132,255,.75); border-radius: 14px; background-color: #030912; background-size: 100% 100%; box-shadow: 0 30px 100px rgba(0,0,0,.75); }
.mask-editor.is-expanded canvas { cursor: none; border-radius: inherit; }
.mask-editor.is-expanded .mask-brush-cursor { position: absolute; z-index: 2; display: block; border: 1.5px solid rgba(255,255,255,.95); border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.75),0 1px 5px rgba(0,0,0,.45); }
.mask-editor.is-expanded .mask-brush-cursor.is-visible { opacity: 1; }
.mask-editor.is-expanded .mask-expand-close { position: absolute; z-index: 3; right: 14px; top: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(4,12,23,.88); color: white; font-size: 25px; cursor: pointer; }
.mask-editor.is-expanded .mask-expanded-toolbar { position: absolute; z-index: 3; left: 50%; bottom: -58px; width: min(430px, calc(100vw - 24px)); transform: translateX(-50%); height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(6,16,29,.96); color: #c8d6e8; box-shadow: 0 8px 25px rgba(0,0,0,.4); }
.mask-expanded-toolbar label { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 11px; }
.mask-expanded-toolbar input { min-width: 72px; width: auto; flex: 1; accent-color: #6d82ff; }
.mask-expanded-toolbar output { min-width: 22px; color: white; text-align: center; font-variant-numeric: tabular-nums; }
.mask-expanded-toolbar button { flex: 0 0 auto; min-width: 72px; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: #526bff; color: white; font-size: 11px; white-space: nowrap; cursor: pointer; }
.mask-tools { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 9px; }
.mask-tools label { display: flex; align-items: center; gap: 5px; }
.mask-tools span { display: flex; gap: 5px; }
.mask-tools input { width: 72px; }
.mask-tools button { height: 27px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.035); color: #aebed0; cursor: pointer; font-size: 9px; }
.danger-button { width: 100%; border: 1px solid rgba(255,101,119,.25); color: #ff8492; background: rgba(255,101,119,.07); border-radius: 8px; padding: 8px; cursor: pointer; }
.node-catalog { display: grid; gap: 7px; }
.node-category { width: 100%; min-height: 52px; display: grid; grid-template-columns: 34px minmax(0,1fr) 20px; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); text-align: left; cursor: grab; }
.node-category:hover { border-color: rgba(91,121,255,.65); transform: translateY(-1px); }
.node-category > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: rgba(91,91,255,.16); color: #aba6ff; font-weight: 800; }
.node-category > span img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.node-category.category-image > span { background: rgba(0,216,212,.12); color: #5ee7df; }
.node-category.category-video > span { background: rgba(59,126,255,.14); color: #80b3ff; }
.node-category div { min-width: 0; display: grid; gap: 3px; }
.node-category strong { font-size: 11px; }
.node-category small { color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-category em { color: #647994; font-size: 16px; font-style: normal; }
.library-subtitle { margin: 18px 0 8px; color: #667c97; font-size: 9px; letter-spacing: 1px; }
.library-head + .library-subtitle { margin-top: 0; }
.quick-tools + .library-subtitle { margin-top: 3px; }
.selection-divider { display: flex; align-items: center; gap: 8px; margin: 22px -12px 14px; color: #6d829e; font-size: 9px; }
.selection-divider::before,.selection-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.compact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.compact-option { height: 34px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: #c3d2e4; cursor: pointer; font-size: 10px; }
.compact-option.is-active,.compact-option:hover { border-color: #5874ff; background: rgba(72,91,255,.13); }
.parameter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.inspector-field input[type="number"] { width: 100%; height: 31px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: #091728; color: #dceaff; outline: 0; }
.compact-danger { padding-top: 8px; border-bottom: 0; }
.model-picker { position: relative; }
.model-picker-trigger { width: 100%; min-height: 52px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(17,33,56,.9); text-align: left; cursor: pointer; }
.model-picker.is-open .model-picker-trigger { border-color: #4b83ff; box-shadow: 0 0 0 2px rgba(75,131,255,.12); }
.picker-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg,rgba(86,95,255,.25),rgba(0,216,212,.15)); color: #b9ecff; font-size: 13px; font-weight: 850; }
.picker-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.picker-meta { min-width: 0; display: grid; gap: 3px; }
.picker-meta b { color: #edf5ff; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-meta small { color: #8398b4; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-picker-trigger em { color: #8ba0ba; font-size: 17px; font-style: normal; transition: transform .16s; }
.model-picker.is-open .model-picker-trigger em { transform: rotate(180deg); }
.model-picker-menu { display: none; margin-top: 6px; gap: 5px; }
.model-picker.is-open .model-picker-menu { display: grid; }
.model-picker-option { width: 100%; min-height: 48px; display: grid; grid-template-columns: 34px minmax(0,1fr) 22px; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20,34,56,.86); text-align: left; cursor: pointer; }
.model-picker-option:hover { border-color: rgba(82,132,255,.62); background: rgba(45,76,135,.22); }
.model-picker-option i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #3d4a60; color: transparent; font-size: 12px; font-style: normal; }
.model-picker-option.is-active { border-color: #4585ff; background: rgba(45,91,175,.27); }
.model-picker-option.is-active i { background: #3482ff; color: white; }
.model-picker-option:disabled { opacity: .45; cursor: not-allowed; }

.canvas-viewport { position: relative; overflow: hidden; outline: 0; cursor: default; background: #091524; touch-action: none; }
.canvas-viewport.is-panning { cursor: grabbing; }
.canvas-grid { position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: radial-gradient(circle, rgba(125,153,190,.22) 1px, transparent 1.25px); background-size: 24px 24px; }
.canvas-stage { position: absolute; left: 0; top: 0; width: 20000px; height: 20000px; transform-origin: 0 0; will-change: transform; }
.node-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.edge-layer { position: absolute; z-index: 1; left: 0; top: 0; width: 20000px; height: 20000px; overflow: visible; pointer-events: none; }
.segment-edge-layer { z-index: 3; pointer-events: none; }
.edge-layer #edgePaths { pointer-events: auto; }
.edge-path { fill: none; stroke: url(#edgeGradient); stroke-width: 2; filter: url(#edgeGlow); opacity: .82; pointer-events: stroke; cursor: pointer; }
.edge-hit { fill: none; stroke: rgba(0,0,0,.001); stroke-width: 26; pointer-events: stroke; cursor: pointer; }
.edge-hit:hover + .edge-path { stroke: var(--red); stroke-width: 3; }
.edge-path.is-segment-edge { opacity: .82; pointer-events: stroke; }
.edge-hit.is-segment-edge:hover + .edge-path.is-segment-edge { stroke: #7cf8ff; stroke-width: 3.2; }
.segment-edge-top { fill: none; stroke: #00e5dc; stroke-width: 2; opacity: .82; filter: url(#edgeGlow); pointer-events: none; }
.segment-draft-edge { stroke-dasharray: 6 6; }
.draft-edge { fill: none; stroke: #00e5dc; stroke-width: 2; stroke-dasharray: 6 6; filter: url(#edgeGlow); }

.brand-logo-shine { position: relative; flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; }
.brand-logo-shine::after { position: absolute; z-index: 2; left: -42px; top: -68px; width: 24px; height: 100px; content: ""; background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); transform: rotate(35deg); animation: workflow-logo-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes workflow-logo-shine { 0%,18% { left: -42px; top: -68px; opacity: 0; } 27% { opacity: .46; } 60% { left: 62px; top: 32px; opacity: .5; } 70%,100% { left: 62px; top: 32px; opacity: 0; } }

.workflow-node { position: absolute; z-index: 1; isolation: isolate; width: 310px; min-height: 190px; border: 1px solid rgba(115,143,181,.28); border-radius: 14px; background: linear-gradient(145deg, rgba(17,34,56,.98), rgba(10,23,41,.98)); box-shadow: 0 18px 45px rgba(0,0,0,.25); overflow: visible; user-select: none; transition: border-color .15s, box-shadow .15s; pointer-events: auto; }
.workflow-node:hover { z-index: 10; border-color: rgba(106,139,215,.55); }
.workflow-node.is-selected { z-index: 30; border-color: #5d71ff; box-shadow: 0 0 0 2px rgba(93,113,255,.15), 0 22px 55px rgba(0,0,0,.3); }
.workflow-node.is-running { z-index: 20; border-color: rgba(0,216,212,.8); box-shadow: 0 0 0 2px rgba(0,216,212,.09), 0 22px 55px rgba(0,0,0,.32); }
.workflow-node.is-running.is-selected { z-index: 30; }
.workflow-node.is-success { border-color: rgba(36,213,162,.48); }
.workflow-node.is-error { border-color: rgba(255,101,119,.55); }
.node-head { height: 56px; display: grid; grid-template-columns: 34px minmax(0,1fr) 20px; align-items: center; gap: 9px; padding: 0 11px; border-bottom: 1px solid var(--line); cursor: grab; }
.node-head:active { cursor: grabbing; }
.node-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(116,83,255,.28), rgba(0,216,212,.12)); color: #a4e9ff; font-weight: 850; }
.node-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.material-shell { position: relative; width: 100%; height: 145px; overflow: hidden; border-radius: 8px; }
.material-shell .material-preview { height: 100%; }
.material-replace { position: absolute; z-index: 99; display: grid; place-items: center; pointer-events: auto !important; left: 0; right: 0; bottom: 0; height: 26px; padding: 0; border: 0; color: #fff; background: rgba(0,0,0,.68); font: inherit; font-size: 10px; cursor: pointer; opacity: 0; visibility: visible; transform: translateY(0); transition: opacity .16s ease; }
.material-shell:hover .material-replace, .material-replace:focus-visible { opacity: 1; }
.material-replace:hover { background: rgba(49,92,255,.9); }
.material-cos-replace { position: absolute; z-index: 99; right: 0; bottom: 0; width: 50%; height: 26px; padding: 0; border: 0; color: #fff; background: rgba(20,80,125,.82); font-size: 9px; cursor: pointer; opacity: 0; transition: opacity .16s ease; }
.material-shell:hover .material-cos-replace,.material-cos-replace:focus-visible { opacity: 1; }
.material-shell:has(.material-cos-replace) .material-replace { right: 50%; }
.node-title { min-width: 0; display: grid; gap: 3px; }
.node-title strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-title span { font-size: 9px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-menu { width: 16px; height: 16px; padding: 0; border: 1px solid rgba(114,135,166,.18); border-radius: 50%; background: rgba(255,255,255,.026); color: #8295ad; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.node-menu:hover { background: rgba(255,86,112,.16); border-color: rgba(255,119,139,.46); color: #ffd2d8; box-shadow: 0 0 0 3px rgba(255,86,112,.08); }
.node-content { position: relative; min-height: 96px; padding: 11px; overflow: hidden; }
.segment-node .node-content { z-index: 3; overflow: visible; }
.segment-node .node-footer { position: relative; z-index: 1; }
.app-segmented-node .result-shell { overflow: visible; }
.app-segmented-node .result-overlay { align-content: stretch; overflow: visible; }
.node-footer { height: 39px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.node-state { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.node-state i { width: 6px; height: 6px; border-radius: 50%; background: #53677f; }
.is-running .node-state i { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); animation: pulse 1s infinite; }
.is-success .node-state i { background: var(--green); }
.is-error .node-state i { background: var(--red); }
.node-actions { display: flex; gap: 6px; }
.node-actions button { height: 25px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #879ab2; font-size: 9px; cursor: pointer; }
.node-run { padding: 0 9px; }
.node-preview { width: 27px; }
.node-actions button:hover { color: white; border-color: #4968a3; }
.image-result { cursor: zoom-in; }
.image-preview-modal[hidden] { display: none; }
.image-preview-modal { position: fixed; z-index: 7000; inset: 0; display: grid; place-items: center; padding: 5vh 5vw; background: rgba(0,5,13,.9); backdrop-filter: blur(9px); }
.image-preview-modal img { display: block; max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 10px; box-shadow: 0 28px 90px rgba(0,0,0,.72); }
.image-preview-modal button { position: fixed; z-index: 1; right: 28px; top: 22px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(5,14,27,.86); color: white; font-size: 28px; line-height: 1; cursor: pointer; }
.node-port { position: absolute; top: 85px; z-index: 8; display: flex; align-items: center; gap: 5px; color: #687c96; font-size: 8px; }
.node-port span { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #7091b7; background: #0b1829; box-shadow: 0 0 0 3px rgba(7,17,31,.9); cursor: crosshair; transition: .15s; }
.node-port:hover span { border-color: var(--cyan); transform: scale(1.18); box-shadow: 0 0 12px rgba(0,216,212,.5); }
.port-in { left: -7px; transform: translateX(-100%); }
.port-in span { order: 2; }
.port-out { right: -7px; transform: translateX(100%); }
.port-out em, .port-in em { font-style: normal; }
.input-node .port-in, .material-node .port-in { display: none; }

.text-node-input { width: 100%; min-height: 94px; resize: vertical; border: 1px solid rgba(125,153,190,.15); border-radius: 9px; outline: 0; padding: 10px; background: rgba(3,11,21,.55); color: #dfeeff; font-size: 11px; line-height: 1.55; user-select: text; }
.text-node-input:focus { border-color: rgba(82,117,255,.55); }
.text-node-input { scrollbar-width: thin; scrollbar-color: #1d2a3a transparent; }
.text-node-input::-webkit-scrollbar { width: 4px; height: 4px; }
.text-node-input::-webkit-scrollbar-track { background: transparent; }
.text-node-input::-webkit-scrollbar-thumb { border-radius: 8px; background: #1d2a3a; }
.text-node-input::-webkit-scrollbar-thumb:hover { background: #31455e; }
.text-node-input::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.segment-node > .port-out { display: none; }
.segment-preview { min-height: 104px; display: grid; gap: 7px; align-content: start; }
.segment-summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; color: #8ea3bc; font-size: 10px; }
.segment-count { color: #d6e6f5; font-size: 12px; font-weight: 700; }
.segment-toggle { height: 24px; padding: 0 9px; border: 1px solid rgba(89,111,143,.28); border-radius: 6px; background: rgba(255,255,255,.035); color: #9eb2c9; font-size: 9px; cursor: pointer; }
.segment-toggle:hover { color: white; border-color: #4968a3; }
.segment-list { max-height: 170px; overflow: auto; display: grid; gap: 6px; padding-right: 16px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #1d2a3a transparent; user-select: text; }
.segment-list::-webkit-scrollbar { width: 8px; }
.segment-list::-webkit-scrollbar-track { background: rgba(255,255,255,.025); border-radius: 8px; }
.segment-list::-webkit-scrollbar-thumb { border-radius: 8px; background: #26374b; }
.segment-list::-webkit-scrollbar-thumb:hover { background: #3b526d; }
.segment-card { position: relative; min-width: 0; padding: 7px 34px 7px 8px; border: 1px solid rgba(89,111,143,.22); border-radius: 7px; background: rgba(5,15,27,.72); }
.segment-card strong { display: block; margin-bottom: 3px; color: #8fd7d5; font-size: 10px; }
.segment-card p { margin: 0; color: #b9c9d9; font-size: 9px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.segment-text-edit { width: 100%; min-height: 58px; max-height: 240px; resize: vertical; overflow: auto; display: block; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #b9c9d9; font: inherit; font-size: 9px; line-height: 1.55; user-select: text; scrollbar-width: thin; scrollbar-color: #26374b transparent; }
.segment-text-edit:focus { color: #e4f2ff; }
.segment-text-edit::-webkit-scrollbar { width: 4px; height: 4px; }
.segment-text-edit::-webkit-scrollbar-thumb { border-radius: 8px; background: #26374b; }
.segment-port { position: absolute; z-index: 12; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; cursor: crosshair; user-select: none; pointer-events: auto; }
.segment-port i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #7091b7; background: #0b1829; box-shadow: 0 0 0 3px rgba(7,17,31,.9); transition: .15s; }
.segment-port:hover i { border-color: var(--cyan); transform: scale(1.16); box-shadow: 0 0 12px rgba(0,216,212,.5); }
.segment-node.is-segment-expanded { width: 390px; }
.segment-node.is-segment-expanded .segment-list { max-height: none; overflow: visible; padding-right: 16px; }
.segment-node.is-segment-expanded .segment-card { align-items: start; }
.segment-node.is-segment-expanded .segment-card p { display: block; overflow: visible; -webkit-line-clamp: initial; }
.segment-node.is-segment-expanded .segment-text-edit { max-height: none; }
.app-segmented-node.is-segment-expanded { width: 390px; }
.app-segmented-node.is-segment-expanded .segment-preview { width: 100%; }
.app-segmented-node.is-segment-expanded .segment-list { max-height: none; overflow: visible; padding-right: 0; }
.app-segmented-node.is-segment-expanded .segment-card { align-items: start; }
.app-segmented-node.is-segment-expanded .segment-card p { display: block; overflow: visible; -webkit-line-clamp: initial; }
.app-segmented-node.is-segment-expanded .segment-text-edit { max-height: none; }
.segment-empty { min-height: 104px; display: grid; place-items: center; text-align: center; color: #647a95; font-size: 10px; line-height: 1.6; border: 1px dashed rgba(105,143,190,.24); border-radius: 9px; background: rgba(3,11,21,.35); }
.material-drop { width: 100%; min-height: 112px; padding: 0; border: 1px dashed rgba(105,143,190,.32); border-radius: 9px; display: grid; place-items: center; align-content: center; gap: 5px; background: transparent; font: inherit; cursor: pointer; color: #7187a3; text-align: center; }
.material-drop:hover { border-color: var(--cyan); color: #aac4dd; }
.material-drop b { font-size: 22px; font-weight: 400; }
.material-drop span { font-size: 10px; }
.material-preview { width: 100%; height: 145px; object-fit: contain; border-radius: 8px; background: #050d17; display: block; cursor: zoom-in; pointer-events: auto; }
.result-shell { min-height: 118px; position: relative; border-radius: 9px; background: rgba(3,11,21,.5); overflow: hidden; }
.result-overlay { position: relative; z-index: 2; min-height: 118px; padding: 10px; background: linear-gradient(145deg, #091627, #07111e); display: grid; align-content: center; }
.idle-result { text-align: center; color: #647a95; font-size: 10px; line-height: 1.65; }
.idle-result i { width: 30px; height: 30px; margin: 0 auto 7px; display: grid; place-items: center; border-radius: 9px; background: rgba(90,82,240,.12); color: #938cff; font-style: normal; font-size: 15px; }
.running-result { display: grid; justify-items: center; gap: 8px; color: #91a8c1; font-size: 10px; }
.running-spinner { width: 25px; height: 25px; border: 2px solid rgba(0,216,212,.18); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
.text-result { width: 100%; min-height: 130px; height: 170px; max-height: none; resize: vertical; overflow: auto; user-select: text; white-space: pre-wrap; border: 1px solid rgba(89,111,143,.22); border-radius: 5px; background: #06101c; color: #d8e7f5; padding: 9px 10px; outline: 0; font-size: 10px; line-height: 1.7; box-shadow: inset 0 1px 0 rgba(255,255,255,.015); }
.text-result:hover { border-color: rgba(99,124,162,.34); }
.text-result:focus { border-color: rgba(83,112,173,.7); background: #071321; }
.text-result { scrollbar-width: thin; scrollbar-color: #1d2a3a transparent; }
.text-result::-webkit-scrollbar { width: 4px; height: 4px; }
.text-result::-webkit-scrollbar-track { background: transparent; }
.text-result::-webkit-scrollbar-thumb { border-radius: 8px; background: #1d2a3a; }
.text-result::-webkit-scrollbar-thumb:hover { background: #31455e; }
.text-result::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.image-result { width: 100%; max-height: 240px; object-fit: contain; display: block; border-radius: 7px; background: #040b13; cursor: zoom-in; pointer-events: auto; }
.image-list-result { max-height: 260px; overflow: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; scrollbar-width: thin; scrollbar-color: #1d2a3a transparent; }
.image-list-item { min-width: 0; }
.image-list-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 7px; background: #040b13; cursor: zoom-in; }
.image-list-item strong { display: block; margin-top: 4px; color: #b9cde1; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-list-item a { display: inline-block; margin-top: 2px; color: #6faaff; font-size: 9px; }
.video-result { width: 100%; max-height: 240px; display: block; border-radius: 7px; background: black; }
.result-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.result-notice { margin: 0; color: #555; font-size: 10px; line-height: 1.4; }
.result-link { display: block; margin-top: 7px; color: #6faaff; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.result-meta .result-link { margin-top: 0; }
.result-replace-link { min-height: 23px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.04); color: #8294aa; font-size: 9px; cursor: pointer; }
.result-replace-link:hover { color: white; border-color: #5875a7; }
.manual-video-complete { justify-self: center; margin-top: 8px; color: #b8c9dc; }
.error-result { color: #ff8b98; font-size: 10px; line-height: 1.6; text-align: center; }

.canvas-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(6,17,30,.75); color: #607690; font-size: 9px; pointer-events: none; backdrop-filter: blur(10px); }
.canvas-hint kbd { padding: 1px 4px; border: 1px solid #3f526a; border-radius: 4px; background: #0e1d30; color: #9bb0c9; }
.zoom-controls { position: absolute; right: 14px; bottom: 14px; display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: rgba(6,17,30,.85); backdrop-filter: blur(12px); }
.zoom-controls button { height: 31px; min-width: 32px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #8094ad; cursor: pointer; }
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover { color: white; background: rgba(255,255,255,.05); }
#zoomValue { min-width: 48px; font-size: 9px; }
.run-summary { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); max-width: 520px; padding: 9px 13px; border: 1px solid rgba(0,216,212,.25); border-radius: 9px; background: rgba(5,26,39,.9); color: #9ac9d1; font-size: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }

.login-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(4,10,19,.82); backdrop-filter: blur(18px); }
.login-overlay[hidden] { display: none; }
.login-card { width: min(390px, calc(100vw - 30px)); padding: 33px; text-align: center; border: 1px solid rgba(111,137,189,.25); border-radius: 20px; background: linear-gradient(150deg, #10233c, #091525); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.login-card img { width: 72px; height: 72px; border-radius: 18px; }
.login-card h1 { margin: 17px 0 8px; font-size: 21px; }
.login-card p { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.login-card .primary-button { width: 100%; height: 42px; }
.text-button { margin-top: 12px; border: 0; background: transparent; color: #7592b8; cursor: pointer; font-size: 11px; }
.runtime-host { position: fixed; left: -20000px; top: 0; width: 1440px; height: 900px; z-index: -1; overflow: hidden; opacity: .01; pointer-events: none; background: #fff; }
.runtime-frames { position: absolute; inset: 0; }
.runtime-frames iframe { position: absolute; inset: 0; display: none; width: 100%; height: 100%; border: 0; background: #fff; }
.runtime-frames iframe.is-active { display: block; }
.runtime-toolbar { display: none; }
.runtime-host.is-previewing { left: 0; top: var(--topbar); right: 0; bottom: 0; width: auto; height: auto; z-index: 900; opacity: 1; pointer-events: auto; background: #07111f; }
.runtime-host.is-previewing .runtime-toolbar { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 10px; background: #0c1a2d; border-bottom: 1px solid var(--line); }
.runtime-host.is-previewing .runtime-toolbar strong { font-size: 12px; }
.runtime-host.is-previewing .runtime-toolbar span { color: var(--muted); font-size: 10px; }
.runtime-host.is-previewing .runtime-toolbar button { margin-left: auto; height: 29px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.05); color: #b8c9da; cursor: pointer; }
.runtime-host.is-previewing .runtime-frames { top: 44px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 2200; transform: translate(-50%, 20px); padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(11,25,42,.96); color: #c8d8e9; font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.workspace-home[hidden],.workspace-modal[hidden] { display: none; }
.workspace-home { position: fixed; z-index: 120; inset: var(--topbar) 0 0; overflow: auto; padding: 34px clamp(20px,5vw,72px) 60px; background: #08111d; }
.workspace-home-head { max-width: 1722px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; }
.workspace-view-switch { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 24px; background: #050b13; }
.workspace-view-switch button { min-width: 108px; height: 38px; border: 0; border-radius: 20px; background: transparent; color: #77899f; font-weight: 700; cursor: pointer; }
.workspace-view-switch button.is-active { background: #edf3fb; color: #101722; }
.template-category-filters[hidden],.workspace-home-loading[hidden] { display: none; }
.template-category-filters { max-width: 1722px; margin: 0 auto 22px; display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.template-category-filters button { flex: 0 0 auto; min-width: 76px; height: 36px; padding: 0 17px; border: 1px solid var(--line-strong); border-radius: 18px; background: #0b1320; color: #93a3b8; cursor: pointer; }
.template-category-filters button.is-active { border-color: #edf3fb; background: #edf3fb; color: #111824; font-weight: 700; }
.workspace-home-loading,.workspace-empty { grid-column: 1/-1; min-height: 180px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.workspace-home-grid { width: 100%; max-width: 1722px; margin: 0 auto; display: grid; grid-template-columns: repeat(5,minmax(0,330px)); justify-content: center; gap: 22px 18px; }
.workspace-card,.workspace-new-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #0d1b2a; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.workspace-card-media { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #050c14; }
.workspace-card-media img,.workspace-card-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.template-cover-video { pointer-events: none; background: #02060a; }
.workspace-card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #52637a; font-size: 11px; }
.workspace-card-body { padding: 15px; display: grid; gap: 10px; }
.workspace-card-body strong { font-size: 14px; }
.workspace-card-body p { min-height: 34px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.workspace-card-body > div { display: flex; gap: 8px; }
.workspace-file-card { min-height: 150px; display: grid; align-content: center; }
.workspace-file-card.is-locked { opacity: .55; filter: grayscale(.5); }
.workspace-file-card button:disabled { cursor: not-allowed; }
.workspace-limit-note { grid-column: 1/-1; margin: 2px 0; color: var(--muted); font-size: 10px; }
.template-cover-card { position: relative; aspect-ratio: 9/16; cursor: pointer; background: #050b13; }
.template-cover-card:hover { border-color: rgba(0,216,212,.55); transform: translateY(-2px); transition: .18s ease; }
.template-cover-card .workspace-card-media { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
.template-cover-copy { position: absolute; z-index: 2; inset: auto 0 0; min-height: 34%; padding: 24px 15px 15px; display: grid; align-content: end; gap: 7px; background: linear-gradient(transparent,rgba(3,7,12,.55) 42%); }
.template-cover-copy span { justify-self: start; max-width: 100%; padding: 3px 7px; overflow: hidden; border-radius: 4px; background: #08aebe; color: white; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.template-cover-copy strong { font-size: 17px; line-height: 1.25; }
.template-cover-copy p { margin: 0; display: -webkit-box; overflow: hidden; color: #bac5d3; font-size: 10px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.workspace-new-card { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 10px; cursor: pointer; color: #9cb0c8; }
.workspace-new-card span { font-size: 28px; color: var(--cyan); }
.workspace-new-card:hover { border-color: rgba(0,216,212,.45); background: #102334; }

.workspace-modal { position: fixed; z-index: 1600; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2,7,13,.86); backdrop-filter: blur(10px); }
.workspace-modal-panel { width: min(980px,100%); max-height: min(860px,calc(100vh - 48px)); overflow: auto; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b1725; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.workspace-modal-panel > header { position: sticky; z-index: 2; top: 0; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: #0b1725; }
.workspace-modal-panel > header div { display: grid; gap: 4px; }
.workspace-modal-panel > header span { color: var(--muted); font-size: 10px; }
.workspace-modal-panel > header button { width: 34px; height: 34px; border: 0; background: transparent; color: #8fa1b8; font-size: 24px; cursor: pointer; }
.template-form { padding: 18px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.template-form[hidden] { display: none; }
.template-form label { display: grid; gap: 6px; color: #8fa1b8; font-size: 10px; }
.template-form input,.template-form textarea,.template-form select { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: #07111d; color: var(--text); padding: 9px 10px; outline: 0; }
.template-form-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.template-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.template-admin-list { padding: 8px 18px 20px; display: grid; }
.template-admin-item { min-width: 0; padding: 14px 0; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.template-admin-item > div:first-child { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 7px; }
.template-admin-item p { grid-column: 1/-1; margin: 0; color: var(--muted); font-size: 9px; }
.template-admin-item > div:last-child { display: flex; gap: 7px; }
.template-status { padding: 2px 6px; border-radius: 4px; background: rgba(255,189,89,.12); color: var(--amber); font-size: 9px; }
.template-status.is-published { background: rgba(36,213,162,.12); color: var(--green); }
.category-admin { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.category-admin > header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.category-admin > header span { color: var(--muted); font-size: 9px; }
.category-admin form { display: grid; grid-template-columns: minmax(180px,1fr) 100px auto auto; gap: 8px; }
.category-admin input { min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: #07111d; color: var(--text); padding: 0 10px; outline: 0; }
.category-admin-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.category-admin-item { display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 10px; border: 1px solid var(--line); border-radius: 7px; background: #081522; }
.category-admin-item small { color: var(--muted); font-size: 8px; }
.category-admin-item button { min-height: 27px; padding: 0 8px; }
.save-name-panel { width: min(430px,calc(100vw - 30px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b1725; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.save-name-panel header { height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.save-name-panel header button { border: 0; background: transparent; color: #8fa1b8; font-size: 24px; cursor: pointer; }
.save-name-panel label { padding: 18px; display: grid; gap: 7px; color: #9bacc0; font-size: 10px; }
.save-name-panel input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 7px; background: #07111d; color: white; padding: 0 11px; outline: 0; }
.save-name-panel > div { padding: 0 18px 18px; display: flex; justify-content: flex-end; gap: 8px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .4; transform: scale(.75); } }

@media (max-width: 1880px) {
  .workspace-home-grid { grid-template-columns: repeat(4,minmax(0,330px)); }
}

@media (max-width: 1530px) {
  .workspace-home-grid { grid-template-columns: repeat(3,minmax(0,330px)); }
}

@media (max-width: 1145px) {
  .workspace-home-grid { grid-template-columns: repeat(2,minmax(0,330px)); }
}

@media (max-width: 1180px) {
  .workspace { grid-template-columns: var(--library-width) minmax(0,1fr); }
  .inspector-panel { display: block; }
  .topbar { grid-template-columns: 280px 1fr auto; }
  .top-actions #importWorkflow,.top-actions #exportWorkflow { display: none; }
}

@media (max-width: 760px) {
  :root { --topbar: 58px; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 10px; }
  .brand span, .workflow-name-wrap, .account-badge, .top-actions .ghost-button { display: none; }
  .top-actions { grid-column: 2; gap: 6px; }
  .top-actions .primary-button { height: 36px; min-height: 36px; padding: 0 12px; }
  .workspace { display: block; }
  .library-panel { position: absolute; left: 0; top: var(--topbar); bottom: 0; width: min(280px, 86vw); z-index: 80; transform: translateX(-100%); box-shadow: 16px 0 50px rgba(0,0,0,.35); }
  .library-resize-handle { display: none; }
  .library-panel.is-open { transform: translateX(0); }
  .canvas-viewport { width: 100%; height: 100%; }
  .workflow-node { width: 280px; }
  .canvas-hint { display: none; }
  .workspace-home { padding: 24px 14px 40px; }
  .workspace-home-head { align-items: start; }
  .workspace-home-head h1 { font-size: 22px; }
  .workspace-home-grid { grid-template-columns: 1fr; }
  .template-form-row { grid-template-columns: 1fr; }
  .category-admin form { grid-template-columns: 1fr 90px; }
  .category-admin form button { width: 100%; }
  .template-admin-item { align-items: start; flex-direction: column; }
}