:root {
  color-scheme: dark;
  --bg: #111214;
  --panel: #202123;
  --panel-2: #292a2d;
  --panel-3: #333438;
  --line: #38393d;
  --text: #eeeef0;
  --muted: #9a9ba1;
  --dim: #686a71;
  --yellow: #f2c94c;
  --blue: #5da8ff;
  --green: #55ce87;
  --red: #f06f76;
  --image: #a986ff;
  --video: #60a8ff;
  --audio: #f0a057;
  --shadow: 0 18px 55px rgba(0,0,0,.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a[href], [role="button"] { cursor: pointer; }
input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="email"], input[type="url"], textarea, [contenteditable="true"] { cursor: text; user-select: text; }
select, input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: pointer; }
input:disabled, textarea:disabled, select:disabled { cursor: default; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ui-icon { display: block; flex: 0 0 auto; width: 16px; height: 16px; pointer-events: none; }

.app-shell { display: grid; grid-template-rows: 48px minmax(0,1fr); width: 100%; height: 100%; background: var(--bg); }
.canvas-topbar { z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-width: 0; padding: 0 13px; border-bottom: 1px solid var(--tone-252629, #252629); background: var(--alpha-18-19-21-p97, rgba(18,19,21,.97)); }
.topbar-left, .topbar-right, .view-tabs { display: flex; align-items: center; gap: 7px; min-width: 0; }
.topbar-right { justify-self: end; }
#app .canvas-top-controls .topbar-right { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; pointer-events: auto; }
#app .canvas-top-controls .topbar-right > * { flex-shrink: 0; }
#app .canvas-top-controls .platform-canvas-entry { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); font-size: 12px; font-weight: 550; line-height: 1; white-space: nowrap; }
#app .canvas-top-controls .platform-canvas-entry:hover { background: var(--panel-2); border-color: var(--muted); }
#app .canvas-top-controls .platform-canvas-entry:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
#app .canvas-top-controls .engine-badge { max-width: 230px; min-height: 32px; font-size: 11px; }
#app .canvas-top-controls .engine-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1200px) {
  #app .canvas-top-controls { flex-wrap: wrap; }
  #app .canvas-top-controls .topbar-right { width: 100%; justify-content: flex-start; overflow-x: auto; padding: 3px 1px; scrollbar-width: thin; }
  #app .canvas-top-controls .platform-canvas-entry { height: 32px; padding-inline: 10px; }
}
.brand { display: grid; place-items: center; padding: 0; border: 0; background: transparent; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(145deg,#ffe474,#e2b72f); color: var(--tone-181508, #181508); font-size: 12px; font-weight: 900; box-shadow: 0 4px 14px rgba(242,201,76,.18); }
.brand-mark.large { width: 48px; height: 48px; border-radius: 13px; font-size: 20px; }
.top-separator { width: 1px; height: 17px; background: var(--tone-303136, #303136); }
.project-switcher, .model-switcher { display: flex; align-items: center; gap: 7px; max-width: 210px; padding: 6px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--tone-c4c5c9, #c4c5c9); font-size: 10px; }
.project-switcher:hover { border-color: var(--tone-35363a, #35363a); background: var(--tone-202124, #202124); }
.project-switcher > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-switcher { color: var(--tone-bbbcc1, #bbbcc1); cursor: default; }
.model-switcher small { padding: 2px 4px; border-radius: 3px; background: var(--tone-312d1d, #312d1d); color: #c8af51; font-size: 6px; }
.save-state { margin-left: 3px; color: var(--tone-55575e, #55575e); font-size: 7px; }
.save-state.saving { color: var(--yellow); }
.view-tabs { justify-self: center; padding: 6px 12px; border: 1px solid var(--tone-303136, #303136); border-radius: 8px; background: var(--tone-191a1d, #191a1d); color: var(--tone-d4d5d8, #d4d5d8); font-size: 11px; }
.view-tabs button { padding: 5px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--tone-686a71, #686a71); font-size: 8px; }
.view-tabs button.active { background: var(--tone-303135, #303135); color: var(--tone-e1e1e4, #e1e1e4); }
.top-icon { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--tone-333438, #333438); border-radius: 7px; background: var(--tone-1d1e21, #1d1e21); color: var(--tone-92939a, #92939a); }
.top-icon:hover { color: var(--tone-eeeeee, #eee); border-color: var(--tone-4a4b50, #4a4b50); }
.engine-badge { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--tone-333438, #333438); border-radius: 12px; color: var(--tone-777980, #777980); font-size: 7px; }
.engine-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--tone-73757c, #73757c); }
.engine-badge.ready i { background: var(--green); box-shadow: 0 0 7px rgba(85,206,135,.5); }
.agent-button { padding: 6px 9px; border: 1px solid var(--tone-393a3f, #393a3f); border-radius: 8px; background: var(--tone-242528, #242528); color: var(--tone-c6c7cb, #c6c7cb); font-size: 8px; }

.canvas-shell { position: relative; min-width: 0; min-height: 0; overflow: hidden; --composer-dock-width: clamp(380px,32vw,480px); --composer-dock-height: min(48vh,480px); }
.canvas-shell.composer-dock-open .bananatv-canvas { right: var(--composer-dock-width); }
.canvas-shell.composer-dock-open .canvas-top-controls { right: calc(var(--composer-dock-width) + 12px); }
.tool-rail { position: absolute; z-index: 45; left: 12px; top: 14px; display: grid; gap: 7px; padding: 5px; border: 1px solid var(--tone-313237, #313237); border-radius: 11px; background: var(--alpha-28-29-32-p92, rgba(28,29,32,.92)); box-shadow: 0 10px 35px rgba(0,0,0,.3); backdrop-filter: blur(9px); }
.tool-rail > span { height: 1px; margin: 1px 4px; background: var(--tone-36373b, #36373b); }
.rail-button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--tone-85878e, #85878e); font-size: 14px; }
.rail-button:hover, .rail-button.active { background: var(--tone-3a3b3f, #3a3b3f); color: var(--tone-f3f3f4, #f3f3f4); }
.rail-button.primary { background: var(--tone-e9e9eb, #e9e9eb); color: var(--tone-191a1d, #191a1d); font-size: 20px; }
.rail-button.primary:hover { background: var(--tone-ffffff, #fff); }

.bananatv-canvas { position: absolute; inset: 0; overflow: clip; outline: 0; background: var(--tone-111214, #111214); cursor: crosshair; touch-action: none; --canvas-zoom: .9; --inverse-zoom: 1.111; }
@media (min-width: 1100px) {
  #app.library-open .bananatv-canvas { left: 500px; }
}
.bananatv-canvas.is-panning { cursor: grabbing; }
.bananatv-canvas.select-mode { cursor: crosshair; }
.bananatv-canvas.file-drop-active { box-shadow: inset 0 0 0 2px rgba(93,168,255,.82), inset 0 0 80px rgba(93,168,255,.1); cursor: copy; }
.bananatv-canvas.cut-mode, .bananatv-canvas.is-cutting { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ctext x='2' y='21' font-size='22' fill='white'%3E%E2%9C%82%3C/text%3E%3C/svg%3E") 4 20, crosshair; }
.canvas-grid { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle,var(--tone-44464c, #44464c) .65px,transparent .8px); background-size: calc(26px * var(--canvas-zoom)) calc(26px * var(--canvas-zoom)); background-position: var(--canvas-x,0) var(--canvas-y,0); pointer-events: none; }
.graph-world { position: absolute; left: 0; top: 0; width: 8000px; height: 6000px; transform-origin: 0 0; }
.bananatv-canvas.is-transforming .graph-world { will-change: transform; }
.node-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.node-layer > .flow-node { pointer-events: auto; }
.media-parking { position: fixed; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.edge-layer { position: absolute; z-index: 1; left: 0; top: 0; overflow: visible; pointer-events: none; transition: opacity .15s; }
.edge-layer.edges-hidden { opacity: 0; }
.flow-edge { fill: none; stroke: color-mix(in srgb,var(--muted) 70%,transparent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.flow-edge.active { stroke: color-mix(in srgb,var(--blue) 55%,var(--line)); stroke-width: 2.4; }
.edge-hit { fill: none; stroke: transparent; stroke-width: calc(14px * var(--inverse-zoom, 1)); pointer-events: stroke; }
.flow-connection:hover .flow-edge { stroke: var(--blue); stroke-width: 3.2; }
.edge-flow { fill: none; stroke: color-mix(in srgb,var(--blue) 35%,white); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 17; vector-effect: non-scaling-stroke; pointer-events: none; animation: edge-flow-forward 1s linear infinite; }
.flow-connection:hover .edge-flow { stroke-width: 3.2; }
.edges-hidden .edge-hit { pointer-events: none; }
.edges-hidden .edge-flow { animation-play-state: paused; }
@keyframes edge-flow-forward { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .edge-flow { animation: none; } }
.flow-edge.preview { stroke: rgba(122,184,255,.9); stroke-width: 2.4; stroke-dasharray: 5 4; }
.flow-edge.preview.valid { stroke: rgba(85,206,135,.95); stroke-dasharray: none; }
.flow-edge.cut-hit, .flow-connection:hover .flow-edge.cut-hit { stroke: #ff6c68; stroke-width: 3; stroke-dasharray: 5 4; }
.edge-cut-trail { fill: none; stroke: rgba(255,105,98,.96); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.canvas-selection-box { position: absolute; z-index: 24; pointer-events: none; border: 1px solid rgba(94,167,255,.95); border-radius: 3px; background: rgba(75,143,226,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.multi-selection-frame { position: absolute; z-index: 25; border: 1px dashed var(--alpha-210-214-222-p76, rgba(210,214,222,.76)); border-radius: 9px; background: var(--alpha-255-255-255-p012, rgba(255,255,255,.012)); pointer-events: none; }
.multi-selection-output { position: absolute; z-index: 32; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; transform: translateY(-50%); border: 1px solid var(--tone-565961, #565961); border-radius: 50%; background: var(--tone-25272b, #25272b); color: var(--tone-eceef1, #eceef1); box-shadow: 0 6px 20px rgba(0,0,0,.38); font-size: 16px; line-height: 1; cursor: crosshair; touch-action: none; }
.multi-selection-output:hover { border-color: #8abaff; background: var(--tone-343942, #343942); color: var(--tone-ffffff, #fff); }

.flow-node { --accent: var(--tone-a8a9af, #a8a9af); position: absolute; left: 0; top: 0; color: var(--tone-d9d9dc, #d9d9dc); cursor: grab; user-select: none; }
.flow-node:has(.video-composer) { z-index: 28; }
.flow-node.selected { z-index: 40; }
.flow-node.is-dragging { cursor: grabbing; will-change: transform; }
.flow-node.image, .flow-node.image_stage, .flow-node.image_pool { --accent: var(--image); }
.flow-node.video, .flow-node.video_stage, .flow-node.video_pool, .flow-node.video_trim { --accent: var(--video); }
.flow-node.audio, .flow-node.audio_stage, .flow-node.audio_pool { --accent: var(--audio); }
.node-title { position: absolute; left: 0; top: -26px; display: flex; align-items: center; width: 100%; height: 22px; min-width: 0; gap: 5px; color: var(--tone-96989e, #96989e); font-size: 11px; cursor: text; }
.node-title .kind-icon { display: grid; place-items: center; flex: 0 0 17px; color: color-mix(in srgb, var(--accent) 80%, var(--text)); }
.node-kind-svg { display: block; width: 17px; height: 17px; }
.node-title input { flex: 1; min-width: 0; height: 20px; padding: 0 3px; overflow: hidden; border: 1px solid transparent; border-radius: 4px; outline: 0; background: transparent; color: var(--tone-aeb0b6, #aeb0b6); font-size: 10px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; cursor: text; user-select: text; }
.node-title input:hover { border-color: var(--tone-36383d, #36383d); background: var(--alpha-255-255-255-p02, rgba(255,255,255,.02)); }
.node-title input:focus { border-color: color-mix(in srgb,var(--accent),transparent 38%); background: var(--tone-1d1f22, #1d1f22); color: var(--tone-f0f1f3, #f0f1f3); }
.node-title .node-meta { margin-left: auto; color: var(--tone-65676d, #65676d); font-size: 8px; }
.node-title .native-check { display: grid; place-items: center; width: 12px; height: 12px; border: 1px solid #0da8bb; border-radius: 50%; color: #0fc0d6; font-size: 7px; }
.node-media { position: relative; width: 100%; height: 100%; min-height: inherit; overflow: hidden; border: 1px solid transparent; border-radius: 7px; background: var(--tone-191a1c, #191a1c); box-shadow: 0 5px 18px rgba(0,0,0,.24); }
.flow-node.selected .node-media, .flow-node.marquee-hit .node-media, .flow-node.selected .pool-top, .flow-node.marquee-hit .pool-top { border-color: color-mix(in srgb,var(--accent) 65%,var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 7px 24px rgba(0,0,0,.34); }
.node-media img, .node-media > video, .pool-top > img, .pool-top > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #07080a; }
.node-media > img, .node-media > video, .pool-top > img, .pool-top > video { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.node-handle { position: absolute; z-index: 9; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; transform: translateY(-50%) scale(var(--inverse-zoom)); transform-origin: center; border: 0; outline: 0; background: transparent; opacity: 0; cursor: crosshair; transition: opacity .12s; touch-action: none; }
.node-handle::before { content: ''; width: 8px; height: 8px; border: 1.5px solid color-mix(in srgb,var(--accent),var(--tone-ffffff, #fff) 22%); border-radius: 50%; background: var(--tone-15171a, #15171a); box-shadow: 0 0 0 2px rgba(17,18,20,.82); transition: transform .12s,background .12s,box-shadow .12s; }
.node-handle.in { left: -22px; }
.node-handle.out { right: -22px; }
.flow-node:hover .node-handle, .flow-node.selected .node-handle, .bananatv-canvas.is-linking .node-handle, .node-handle:focus-visible { opacity: 1; }
.node-handle:hover::before { transform: scale(1.32); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent),transparent 74%); }
.node-handle:focus-visible::before { transform: scale(1.35); background: var(--accent); box-shadow: 0 0 0 3px var(--tone-111214, #111214),0 0 0 6px color-mix(in srgb,var(--yellow),transparent 18%); }
.flow-node.link-pending .node-media { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(242,201,76,.18),0 7px 24px rgba(0,0,0,.34); }
.flow-node.link-target .node-media { border-color: var(--green); box-shadow: 0 0 0 3px rgba(85,206,135,.18),0 7px 24px rgba(0,0,0,.34); }
.flow-node.link-target-invalid .node-media { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb,var(--red),transparent 76%),0 7px 24px rgba(0,0,0,.34); }
.node-edit-trigger { position: absolute; z-index: 18; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px; transform: scale(var(--inverse-zoom)); transform-origin: right bottom; border: 1px solid color-mix(in srgb,var(--accent),transparent 48%); border-radius: 9px; background: rgba(18,19,22,.9); color: #f2f3f5; box-shadow: 0 7px 22px rgba(0,0,0,.42); font-size: 10px; pointer-events: auto; backdrop-filter: blur(8px); }
.node-edit-trigger:hover { border-color: var(--accent); background: #292b30; }
.node-edit-trigger .ui-icon { width: 14px; height: 14px; }
/* Overview preserves actual images; only dense interactive controls are reduced. */
.node-lod-badge { display: none; }
.bananatv-canvas[data-zoom-band="overview"] .flow-node :is(.node-title,.media-controls,.node-edit-trigger,.node-task-status) { display: none; }
.bananatv-canvas[data-zoom-band="overview"] .flow-node :is(.node-media,.pool-top) { border-radius: 8px; }
.bananatv-canvas[data-zoom-band="overview"] .flow-node.selected .node-title { display: flex; }
.bananatv-canvas[data-zoom-band="preview"] .flow-node .node-edit-trigger { display: none; }

.node-context-toolbar { position: absolute; z-index: 30; left: 0; top: -72px; display: flex; align-items: center; gap: 2px; width: max-content; padding: 5px; transform: scale(var(--inverse-zoom)); transform-origin: bottom left; border: 1px solid var(--tone-45464a, #45464a); border-radius: 9px; background: var(--alpha-39-40-43-p97, rgba(39,40,43,.97)); box-shadow: var(--shadow); pointer-events: auto; }
.node-context-toolbar button { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--tone-dadadd, #dadadd); font-size: 8px; white-space: nowrap; }
.node-context-toolbar button:hover { background: var(--tone-4a4b4f, #4a4b4f); }
.node-context-toolbar.compact { top: -65px; }
.node-context-toolbar i { color: var(--tone-aaaaaa, #aaa); font-style: normal; }
.node-context-toolbar .new { padding: 2px 4px; border-radius: 4px; background: #0f91a2; color: white; font-size: 6px; }
.toolbar-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--tone-55565a, #55565a); }

.node-subfunctions { position: absolute; z-index: 31; left: 50%; top: -76px; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: max-content; height: 48px; padding: 3px 5px; transform: translateX(-50%) scale(var(--inverse-zoom)); transform-origin: bottom center; border: 1px solid var(--tone-414348, #414348); border-radius: 10px; background: var(--alpha-31-32-35-p96, rgba(31,32,35,.96)); box-shadow: 0 8px 24px rgba(0,0,0,.3); pointer-events: auto; }
.node-toolbar-main, .node-toolbar-end { display: flex; align-items: center; gap: 3px; }
.node-toolbar-end { margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--tone-484a50, #484a50); }
.node-subfunctions button { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--tone-b9bbc0, #b9bbc0); font-size: 9px; white-space: nowrap; }
.node-subfunctions button:hover, .node-subfunctions button.active { background: color-mix(in srgb,var(--accent),transparent 78%); color: var(--tone-ffffff, #fff); }
.node-subfunctions .node-toolbar-icon { display: grid; place-items: center; width: 40px; padding: 0; }
.node-subfunction-menu { position: relative; display: flex; align-items: center; }
.node-subfunction-popover { position: absolute; z-index: 2; left: 0; top: calc(100% + 7px); display: grid; width: 152px; padding: 5px; border: 1px solid var(--tone-484a50, #484a50); border-radius: 9px; background: var(--alpha-34-35-38-p985, rgba(34,35,38,.985)); box-shadow: 0 16px 40px rgba(0,0,0,.52); }
.node-subfunction-popover button { justify-content: flex-start; width: 100%; height: 40px; padding: 0 10px; text-align: left; }
.node-subfunction-popover.end-aligned { right: 0; left: auto; }

.node-overlay-actions { position: absolute; z-index: 4; right: 7px; top: 7px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.flow-node:hover .node-overlay-actions, .flow-node.selected .node-overlay-actions { opacity: 1; }
.node-overlay-actions button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(10,11,13,.72); color: #ddd; font-size: 9px; backdrop-filter: blur(5px); }

.audio-card { background: linear-gradient(135deg,rgba(240,160,87,.12),transparent 66%),var(--tone-202124, #202124); }
.audio-visual { position: absolute; inset: 0 0 35px; display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 14px; }
.audio-visual > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(240,160,87,.45); border-radius: 50%; color: var(--audio); font-size: 18px; }
.audio-visual > div { display: flex; align-items: center; gap: 2px; height: 42px; overflow: hidden; }
.audio-visual i { flex: 1 1 2px; max-width: 4px; height: var(--h,40%); border-radius: 3px; background: color-mix(in srgb,var(--audio),var(--tone-767981, #767981) 48%); }
.audio-card audio { display: none; }

.stage-preview { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 43%,rgba(255,255,255,.04),transparent 40%),#090a0c; }
.stage-preview:has(> .stage-empty) { border-color: var(--line); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 4%, var(--panel)), var(--panel)); }
.flow-node.selected .stage-preview:has(> .stage-empty), .flow-node.marquee-hit .stage-preview:has(> .stage-empty) { border-color: color-mix(in srgb,var(--accent) 65%,var(--line)); }
.stage-preview > .stage-empty { gap: 8px; color: var(--text); }
.stage-preview > .stage-empty strong { margin-top: 5px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.stage-preview > .stage-empty small { color: var(--muted); font-size: 11px; }
.stage-preview video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.stage-preview > img { width: 100%; height: 100%; object-fit: contain; background: #090a0c; }
.stage-audio { background: linear-gradient(135deg,rgba(183,133,94,.08),transparent 58%),#111214; }
.stage-empty { display: grid; place-items: center; gap: 9px; color: var(--tone-62646b, #62646b); text-align: center; }
.stage-empty i { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--text)); font-style: normal; }
.stage-empty i .node-kind-svg { width: 27px; height: 27px; }
.stage-empty strong { font-size: 10px; font-weight: 520; }
.stage-empty small { max-width: 300px; font-size: 7px; line-height: 1.5; }
.media-controls { position: absolute; z-index: 6; display: flex; align-items: center; pointer-events: auto; }
.image-controls { right: 8px; bottom: 8px; gap: 5px; }
.media-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--alpha-255-255-255-p15, rgba(255,255,255,.15)); color: var(--tone-ffffff, #fff); font-size: 10px; box-shadow: 0 3px 12px rgba(0,0,0,.22); backdrop-filter: blur(8px); transition: background .14s,transform .14s; }
.media-controls button:hover { background: var(--alpha-255-255-255-p28, rgba(255,255,255,.28)); transform: scale(1.06); }
.media-play-button { padding-left: 1px !important; }
.timeline-controls { left: 0; right: 0; bottom: 0; gap: 8px; min-height: 48px; padding: 4px 8px; background: linear-gradient(transparent,var(--alpha-5-6-8-p9, rgba(5,6,8,.9))); }
.timeline-controls input { flex: 1; min-width: 30px; height: 16px; margin: 0; appearance: none; outline: 0; background: transparent; cursor: ew-resize; --media-progress: 0%; }
.timeline-controls input::-webkit-slider-runnable-track { height: 3px; border-radius: 4px; background: linear-gradient(90deg,var(--tone-f1f2f4, #f1f2f4) var(--media-progress),var(--alpha-255-255-255-p28, rgba(255,255,255,.28)) var(--media-progress)); }
.timeline-controls input::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -3.5px; appearance: none; border: 0; border-radius: 50%; background: var(--tone-ffffff, #fff); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.timeline-controls time { min-width: 68px; color: var(--tone-d1d2d6, #d1d2d6); font-size: 7px; font-variant-numeric: tabular-nums; text-align: right; }
.timeline-controls.audio { background: var(--alpha-23-24-27-p78, rgba(23,24,27,.78)); }
.timeline-controls.video time { min-width: 82px; }
/* 视频上的控制层独立于应用主题，不给原画面叠加底色。 */
.timeline-controls.video { background: transparent; backdrop-filter: none; }
.timeline-controls.video button, .timeline-controls.video button:hover { background: transparent; color: #fff; box-shadow: none; backdrop-filter: none; text-shadow: 0 1px 3px #000, 0 0 5px #000; }
.timeline-controls.video time { color: #fff; text-shadow: 0 1px 3px #000, 0 0 5px #000; }
.timeline-controls.video input::-webkit-slider-runnable-track { background: linear-gradient(90deg,#fff var(--media-progress),#777 var(--media-progress)); box-shadow: 0 1px 2px #000; }
.timeline-controls.video input::-webkit-slider-thumb { background: #fff; }
.timeline-controls.video input::-moz-range-track { height: 3px; border-radius: 4px; background: #777; box-shadow: 0 1px 2px #000; }
.timeline-controls.video input::-moz-range-progress { height: 3px; background: #fff; }
.timeline-controls.video input::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; }
.media-tool-panel { position: absolute; z-index: 10; left: 50%; top: 50%; display: grid; gap: 9px; width: min(330px,calc(100% - 28px)); padding: 12px; transform: translate(-50%,-50%); border: 1px solid var(--tone-4c4e54, #4c4e54); border-radius: 12px; background: var(--alpha-28-29-32-p97, rgba(28,29,32,.97)); box-shadow: 0 18px 55px rgba(0,0,0,.58); color: var(--tone-dfe0e3, #dfe0e3); pointer-events: auto; }
.frame-tool > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.media-tool-panel button { min-height: 30px; border: 1px solid var(--tone-46484d, #46484d); border-radius: 7px; background: var(--tone-343539, #343539); color: var(--tone-e2e3e5, #e2e3e5); }
.media-tool-panel button:hover { border-color: color-mix(in srgb,var(--accent),var(--tone-ffffff, #fff) 22%); background: var(--tone-414348, #414348); }
.trim-tool header, .trim-tool label > span { display: flex; align-items: center; justify-content: space-between; }
.trim-tool header small, .trim-tool label > span { color: var(--tone-8f9197, #8f9197); font-size: 9px; }
.trim-tool label { display: grid; gap: 4px; }
.trim-tool input[type="range"] { width: 100%; accent-color: var(--accent); cursor: ew-resize; }
.trim-tool input[type="text"] { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--bg); color: var(--text); font: inherit; cursor: text; }
.trim-tool input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent),transparent 82%); }
.trim-tool output { color: var(--tone-e4e5e8, #e4e5e8); font-variant-numeric: tabular-nums; }
.trim-tool .trim-create { border-color: color-mix(in srgb,var(--accent),transparent 35%); background: color-mix(in srgb,var(--accent),var(--tone-202124, #202124) 78%); }

.video-trim-card { display: grid; grid-template-rows: minmax(0,1fr) 92px; width: 100%; height: 100%; overflow: hidden; border: 1px solid #3f4146; border-radius: 10px; background: #151619; box-shadow: 0 8px 26px rgba(0,0,0,.34); }
.video-trim-card > .node-media { min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.flow-node.selected .video-trim-card { border-color: color-mix(in srgb,var(--accent) 65%,var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 9px 28px rgba(0,0,0,.38); }
.video-trim-editor { display: grid; grid-template-rows: 20px 58px; gap: 4px; min-width: 0; padding: 5px 7px; border-top: 1px solid #35373c; background: #232428; color: #d7d8dc; }
.video-trim-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 9px; }
.video-trim-editor > header > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.video-trim-editor > header strong { font-weight: 580; white-space: nowrap; }
.video-trim-editor > header small { overflow: hidden; max-width: 180px; color: #85878d; text-overflow: ellipsis; white-space: nowrap; }
.video-trim-editor output { color: #f2f3f5; font-size: 9px; font-variant-numeric: tabular-nums; }
.video-trim-editor header b { color: #71747b; font-weight: 400; }
.video-trim-control-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 7px; min-width: 0; }
.video-trim-play, .video-trim-apply { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #54575e; border-radius: 9px; background: #33353a; color: #f0f1f3; font-size: 14px; }
.video-trim-timeline { position: relative; min-width: 0; height: 58px; overflow: hidden; border: 1px solid #484a50; border-radius: 8px; background: #101113; }
.video-trim-timeline::after { content: ''; position: absolute; z-index: 3; left: var(--trim-play); top: 0; bottom: 0; width: 1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); pointer-events: none; }
.video-trim-thumbnails { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); }
.video-trim-thumbnails i { min-width: 0; border-right: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg,#2b2d32,#17181b); background-position: center; background-size: cover; }
.video-trim-thumbnails i:last-child { border-right: 0; }
.trim-shade { position: absolute; z-index: 1; top: 0; bottom: 0; background: var(--alpha-7-8-10-p68, rgba(7,8,10,.68)); pointer-events: none; }
.trim-shade.start { left: 0; width: var(--trim-start); }
.trim-shade.end { left: var(--trim-end); right: 0; }
.video-trim-selection { position: absolute; z-index: 2; left: var(--trim-start); right: calc(100% - var(--trim-end)); top: 0; bottom: 0; min-width: 18px; border: 3px solid #ffd12e; border-radius: 7px; box-shadow: 0 0 0 1px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
.video-trim-selection button { position: absolute; top: 50%; display: grid; place-items: center; width: 18px; height: 42px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 5px; background: #ffd12e; color: #111; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,.35); cursor: ew-resize; pointer-events: auto; touch-action: none; }
.video-trim-selection button[data-trim-edge="start"] { left: -12px; }
.video-trim-selection button[data-trim-edge="end"] { right: -12px; }
.video-trim-apply:hover { border-color: #ffd12e; background: #3c3e43; }

.media-theater { position: fixed; z-index: 180; inset: 48px 0 0; display: grid; place-items: stretch; padding: 0; background: rgba(7,8,10,.82); backdrop-filter: blur(9px); }
.media-theater [hidden] { display: none !important; }
.media-theater-shell { display: grid; grid-template-rows: 44px minmax(0,1fr) 52px; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: #0b0c0e; box-shadow: 0 32px 100px rgba(0,0,0,.7); }
.media-theater-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px 0 16px; border-bottom: 1px solid #292b2f; background: #18191c; }
.media-theater-shell > header span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.media-theater-shell > header small { color: #71737a; font-size: 9px; }
.media-theater-shell > header strong { overflow: hidden; color: #d7d8dc; font-size: 11px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.media-theater-shell > header button { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8e9096; font-size: 20px; }
.media-theater-shell > header button:hover { background: #303237; color: #fff; }
.media-theater-stage { display: grid; place-items: center; min-height: 0; padding: 10px; background: radial-gradient(circle at 50% 45%,#17191d,#060709 68%); }
.media-theater-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; cursor: pointer; }
.media-theater-image-wrap { position: relative; display: grid; place-items: center; width: fit-content; max-width: 100%; height: fit-content; max-height: 100%; }
.media-theater-image-wrap > img { display: block; max-width: 100%; max-height: calc(100vh - 154px); object-fit: contain; user-select: none; -webkit-user-drag: none; }
.media-crop-selection { position: absolute; border: 2px solid var(--tone-ffffff, #fff); box-shadow: 0 0 0 9999px rgba(0,0,0,.58),0 0 0 1px var(--tone-111111, #111); cursor: move; touch-action: none; }
.media-crop-selection::before, .media-crop-selection::after { content: ''; position: absolute; pointer-events: none; opacity: .62; }
.media-crop-selection::before { inset: 0 33.333%; border-inline: 1px solid rgba(255,255,255,.72); }
.media-crop-selection::after { inset: 33.333% 0; border-block: 1px solid rgba(255,255,255,.72); }
.media-crop-selection i { position: absolute; width: 13px; height: 13px; border: 2px solid var(--tone-111111, #111); border-radius: 50%; background: var(--tone-ffffff, #fff); }
.media-crop-selection i[data-crop-handle="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.media-crop-selection i[data-crop-handle="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.media-crop-selection i[data-crop-handle="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.media-crop-selection i[data-crop-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.media-theater-shell > footer { display: flex; align-items: center; gap: 12px; padding: 0 15px; border-top: 1px solid #292b2f; background: #18191c; }
.media-theater-play, .media-theater-mute { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(145deg,#f5f6f8,#bfc3ca); color: #131416; box-shadow: 0 4px 15px rgba(0,0,0,.28); }
.media-theater-mute { background: #2d2f34; color: #e5e6e9; }
.media-theater-shell > footer input { flex: 1; height: 18px; margin: 0; appearance: none; outline: 0; background: transparent; --media-progress: 0%; cursor: ew-resize; }
.media-theater-shell > footer input::-webkit-slider-runnable-track { height: 4px; border-radius: 5px; background: linear-gradient(90deg,#f0f1f3 var(--media-progress),#4a4d53 var(--media-progress)); }
.media-theater-shell > footer input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; appearance: none; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.media-theater-shell > footer time { min-width: 90px; color: #d5d6da; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.media-theater-image-controls { justify-content: flex-end; }
.media-theater-image-controls > span { margin-right: auto; color: #9a9ca2; font-size: 10px; }
.media-theater-image-controls button { height: 31px; padding: 0 13px; border: 1px solid #46484e; border-radius: 8px; background: #2c2e33; color: #ddd; }
.media-theater-image-controls button.primary { border-color: #6caeff; background: #2878dc; color: #fff; }
.media-theater[data-crop="true"] .media-theater-stage { background-color: #08090b; background-image: linear-gradient(45deg,#121419 25%,transparent 25%),linear-gradient(-45deg,#121419 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121419 75%),linear-gradient(-45deg,transparent 75%,#121419 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; }
.media-theater[data-crop="true"] .media-theater-shell > header { border-bottom-color: #383b42; }
.media-theater[data-crop="true"] .media-theater-image-controls { min-height: 58px; }
.media-theater[data-crop="true"] .media-theater-image-controls > span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid #3e4148; border-radius: 7px; background: #222429; color: #c6c9cf; font-variant-numeric: tabular-nums; }

.video-composer { position: absolute; z-index: 22; left: 50%; top: calc(100% + 12px); display: grid; gap: 9px; width: min(800px,calc(100vw - 84px)); padding: 10px 12px 9px; transform: scale(var(--inverse-zoom)) translateX(-50%); transform-origin: top left; border: 1px solid #3f4146; border-radius: 15px; background: rgba(35,36,39,.992); box-shadow: 0 24px 75px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.025); pointer-events: auto; isolation: isolate; transition: border-color .16s,box-shadow .16s; }
.audio-composer { border-color: rgba(224,160,92,.3); }
.composer-voice-description { width: 100%; resize: vertical; padding: 8px 9px; border: 1px solid var(--tone-47494e, #47494e); border-radius: 8px; outline: 0; background: var(--tone-222327, #222327); color: var(--tone-e2e3e6, #e2e3e6); font: inherit; line-height: 1.55; }
.composer-voice-description:focus { border-color: var(--tone-858991, #858991); }
.flow-node:not(.selected) > .video-composer, .flow-node:not(.selected) > .pool-properties { display: none; }
.composer-overlay { position: absolute; z-index: 54; inset: 0; overflow: visible; pointer-events: none; }
.composer-overlay[hidden] { display: none; }
.composer-overlay-card { position: absolute; left: var(--node-focus-left,96px); top: var(--node-focus-top,84px); display: grid; grid-template-rows: auto minmax(0,1fr); width: min(900px,calc(100vw - 126px)); max-height: calc(100dvh - 102px); overflow: hidden; border: 1px solid #454850; border-radius: 18px; background: rgba(27,29,33,.985); box-shadow: 0 28px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.035); color: var(--text); pointer-events: auto; backdrop-filter: blur(18px); }
.composer-overlay-card::before { content: ''; position: absolute; z-index: 2; top: 42px; width: 13px; height: 13px; border: solid #454850; background: #27292e; transform: rotate(45deg); }
.composer-overlay-card[data-placement="right"]::before { left: -7px; border-width: 0 0 1px 1px; }
.composer-overlay-card[data-placement="left"]::before { right: -7px; border-width: 1px 1px 0 0; }
.composer-overlay-card[data-placement="center"]::before { display: none; }
.node-focus-image, .node-focus-image_stage, .node-focus-image_pool { --accent: var(--image); }
.node-focus-video, .node-focus-video_stage, .node-focus-video_pool, .node-focus-video_trim { --accent: var(--video); }
.node-focus-audio, .node-focus-audio_stage, .node-focus-audio_pool { --accent: var(--audio); }
.node-focus-header { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px 10px 14px; border-bottom: 1px solid #3d4046; background: linear-gradient(180deg,rgba(43,45,50,.98),rgba(33,35,39,.98)); }
.node-focus-kind { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb,var(--accent,#8aa8d6),transparent 52%); border-radius: 10px; background: color-mix(in srgb,var(--accent,#8aa8d6),transparent 88%); color: var(--accent,#9fc0ef); }
.node-focus-header > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.node-focus-header small { color: #8c9098; font-size: 9px; }
.node-focus-header strong { overflow: hidden; color: #f3f4f6; font-size: 13px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.node-focus-header .composer-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #a6a9b0; font-size: 22px; }
.node-focus-header .composer-close:hover { border-color: #555960; background: #35383e; color: #fff; }
.node-focus-body { min-height: 0; padding: 14px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.node-focus-grid { display: grid; gap: 14px; min-height: 0; }
.stage-focus-grid { grid-template-columns: minmax(250px,.8fr) minmax(410px,1.2fr); align-items: start; }
.media-focus-grid { grid-template-columns: minmax(320px,1fr) minmax(280px,.72fr); align-items: start; }
.node-focus-preview { min-height: 230px; max-height: 430px; border-color: #454850; box-shadow: none; }
.node-focus-preview.audio-card { min-height: 160px; }
.node-focus-inspector, .node-focus-editor { min-width: 0; padding: 12px; border: 1px solid #3e4147; border-radius: 13px; background: #222429; }
.node-focus-inspector > header { display: flex; justify-content: space-between; gap: 10px; padding: 1px 1px 11px; border-bottom: 1px solid #393c42; }
.node-focus-inspector > header span { color: #eceef1; font-size: 11px; font-weight: 620; }
.node-focus-inspector > header small { color: #838790; font-size: 9px; }
.node-focus-empty { margin: 12px 2px 2px; color: #8c9098; font-size: 10px; line-height: 1.65; }
.composer-overlay .video-composer { position: relative; left: auto; top: auto; display: grid; width: 100%; min-height: 0; padding: 0; overflow: visible; transform: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.composer-overlay .composer-tool-row { min-height: 44px; padding: 0; }
.composer-overlay .composer-dock-title { display: none; }
.composer-dock-title { flex: 1; min-width: 0; overflow: hidden; color: var(--tone-e7e8ea, #e7e8ea); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.composer-overlay .composer-prompt-wrap, .composer-overlay .composer-prompt { min-height: 116px; max-height: 220px; }
.composer-overlay .composer-bottom-bar { align-items: flex-start; }
.composer-overlay .composer-bottom-left { align-items: center; width: 100%; }
.composer-overlay .composer-compact-trigger { max-width: 260px; justify-content: flex-start; }
.composer-overlay .composer-compact-trigger .menu-chevron { margin-left: auto; }
.composer-overlay .composer-popover { width: min(342px,calc(100vw - 150px)); }
.composer-overlay .model-panel .composer-popover { overflow-x: hidden; overflow-y: auto; }
.composer-overlay .node-subfunctions { position: static; display: flex; justify-content: flex-start; width: 100%; min-width: 0; height: auto; margin-top: 10px; padding: 5px; transform: none; border-color: #3d4046; background: #1b1d21; box-shadow: none; }
.composer-overlay .node-subfunctions .node-toolbar-main { flex-wrap: wrap; }
.composer-overlay .node-subfunctions .node-toolbar-end { margin-left: auto; }
.composer-overlay .node-subfunctions button { min-height: 38px; font-size: 10px; }
.composer-overlay .node-subfunctions button[aria-pressed="true"] { background: color-mix(in srgb,var(--accent),transparent 76%); color: #fff; }
.composer-overlay .media-tool-panel { position: static; width: 100%; margin-top: 10px; transform: none; box-shadow: none; }
.node-focus-function .video-trim-card { display: grid; grid-template-columns: minmax(320px,1fr) minmax(360px,1fr); grid-template-rows: minmax(0,1fr); gap: 14px; height: auto; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.node-focus-function .video-trim-card > .node-media { min-height: 300px; }
.node-focus-function .node-trim-edit-stack { display: grid; align-content: start; gap: 10px; min-width: 0; }
.node-focus-function .video-trim-editor { align-self: start; width: 100%; min-height: 118px; grid-template-rows: auto auto; gap: 14px; padding: 14px; border: 1px solid #40434a; border-radius: 13px; background: #222429; }
.node-focus-function .node-trim-edit-stack .node-focus-inline-tools { display: block; }
.node-focus-function .node-trim-edit-stack .node-subfunctions { margin-top: 0; }
.node-focus-function > .node-media { min-height: 300px; }
.node-focus-function .pool-properties { position: static; width: 100%; max-height: none; transform: none; border-color: #40434a; background: #222429; box-shadow: none; }
.node-focus-pool { display: grid; grid-template-columns: minmax(320px,1fr) minmax(320px,.8fr); gap: 14px; }
.node-focus-pool > .pool-stack { min-height: 300px; }
.node-focus-inline-tools { grid-column: 1 / -1; min-width: 0; }
.node-focus-inline-tools .node-subfunctions { margin-top: 0; }
.node-focus-inline-tools .media-tool-panel { margin-top: 10px; }
.composer-overlay .video-composer:has(.composer-prompt:focus) { border-color: transparent; box-shadow: none; }
.video-composer:has(.composer-prompt:focus) { border-color: #54575e; box-shadow: 0 24px 75px rgba(0,0,0,.52),0 0 0 2px rgba(255,255,255,.025); }
.composer-overlay .video-composer:has(.composer-prompt:focus) { border-color: transparent; box-shadow: none; }
[data-theme="light"] .composer-overlay-card { border-color: #c9cbc4; background: rgba(248,248,245,.985); box-shadow: 0 28px 90px rgba(39,42,33,.2),inset 0 1px rgba(255,255,255,.9); color: #242620; }
[data-theme="light"] .composer-overlay-card::before { border-color: #c9cbc4; background: #f7f7f3; }
[data-theme="light"] .node-focus-header { border-bottom-color: #d8d9d3; background: linear-gradient(180deg,rgba(255,255,253,.99),rgba(244,244,240,.99)); }
[data-theme="light"] .node-focus-header strong { color: #242620; }
[data-theme="light"] .node-focus-header small { color: #72766d; }
[data-theme="light"] .node-focus-header .composer-close { color: #6f736a; }
[data-theme="light"] .node-focus-header .composer-close:hover { border-color: #c7c9c2; background: #e7e7e2; color: #191b17; }
[data-theme="light"] .node-focus-body { background: #f1f1ed; }
[data-theme="light"] .node-focus-editor, [data-theme="light"] .node-focus-inspector { border-color: #d4d5cf; background: #fff; }
[data-theme="light"] .node-focus-inspector > header { border-bottom-color: #dcddd7; }
[data-theme="light"] .node-focus-inspector > header span { color: #292b25; }
[data-theme="light"] .node-focus-inspector > header small, [data-theme="light"] .node-focus-empty { color: #73776d; }
[data-theme="light"] .composer-overlay .video-composer, [data-theme="light"] .composer-overlay .video-composer:has(.composer-prompt:focus) { border: 0; background: transparent; box-shadow: none; }
[data-theme="light"] .composer-overlay .node-subfunctions { border-color: #d9dad4; background: #f5f5f1; box-shadow: none; }
[data-theme="light"] .composer-overlay .node-toolbar-end { border-left-color: #d3d4ce; }
[data-theme="light"] .composer-overlay .media-tool-panel, [data-theme="light"] .node-focus-function .pool-properties, [data-theme="light"] .node-focus-function .video-trim-editor { border-color: #d4d5cf; background: #fff; box-shadow: none; }
[data-theme="light"] .node-focus-function .video-trim-editor { color: #292b25; }
[data-theme="light"] .node-focus-function .video-trim-editor > header small { color: #6b6f66; }
[data-theme="light"] .node-focus-function .video-trim-editor output { color: #1f211d; }
[data-theme="light"] .node-focus-function .video-trim-editor header b { color: #858980; }
.composer-model-pending { display: grid; gap: 5px; width: 245px; padding: 9px; }
.composer-model-pending strong { color: var(--tone-e0e1e4, #e0e1e4); font-size: 10px; }
.composer-model-pending span { color: var(--tone-898b91, #898b91); font-size: 9px; line-height: 1.55; }
.model-download-button { width: max-content; margin-top: 4px; padding: 7px 10px; border: 1px solid var(--blue); border-radius: 7px; background: var(--blue); color: #fff; font-size: 10px; cursor: pointer; }
.model-download-progress { display: grid; gap: 5px; margin-top: 5px; }
.model-download-progress > span { display: flex; justify-content: space-between; gap: 8px; }
.model-download-progress b { color: #dcecff; font-size: 10px; }
.model-download-progress i { overflow: hidden; color: var(--tone-9299a3, #9299a3); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.model-download-progress progress { width: 100%; height: 5px; accent-color: #5ca5ff; }
.model-download-progress small, .model-download-error { color: var(--tone-7f8792, #7f8792); font-size: 9px; }
.model-download-error { display: block; color: #e28e95; }
.settings-models-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; cursor: pointer; list-style: none; }
.settings-models-toggle::-webkit-details-marker { display: none; }
.settings-models-toggle::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
.settings-models[open] > .settings-models-toggle::before { transform: rotate(45deg); }
.settings-models-toggle strong { font-size: 11px; }
.settings-models-toggle small { margin-left: auto; color: var(--tone-9299a3, #9299a3); font-size: 10px; }
#settings-model-list { max-height: min(440px, 48vh); overflow-y: auto; scrollbar-gutter: stable; }
.settings-model-row > div { min-width: 0; }
.settings-model-files { margin-top: 7px; font-size: 10px; }
.settings-model-files > summary { width: fit-content; color: var(--blue); cursor: pointer; padding: 4px 0; }
.settings-model-files > summary:focus-visible, .settings-models-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.settings-model-files ul { display: grid; gap: 5px; margin: 5px 0 8px; padding: 0; list-style: none; }
.settings-model-files li { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 4px; background: var(--tone-1b1d20, #1b1d20); }
.settings-model-files li span { flex: 1; min-width: 0; color: var(--tone-c2c6cc, #c2c6cc); overflow-wrap: anywhere; }
.settings-model-files li b { flex: none; color: #d59198; font-size: 9px; font-weight: 400; }
.settings-model-files li.ready b { color: #8fc6a7; }
.settings-model-files li.active b { color: #8ebcff; }
.settings-model-row .model-download-error { white-space: normal; overflow-wrap: anywhere; }
.settings-download-group > h3 { margin: 0; padding: 10px 12px; border-top: 1px solid var(--tone-393c42, #393c42); background: var(--tone-202226, #202226); color: #a8bed9; font-size: 10px; font-weight: 500; }
.settings-model-purpose { margin: 5px 0; color: var(--tone-a0a6b0, #a0a6b0); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.composer-tool-row { position: relative; display: flex; align-items: center; gap: 5px; min-height: 42px; padding-right: 45px; }
.composer-tool-row > .composer-close { margin-left: auto; }
.video-composer.is-bottom-docked .composer-tool-row { position: sticky; top: 0; z-index: 4; background: var(--panel); }
.composer-tool-row > button, .composer-tool > button { display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 11px; border: 1px solid transparent; border-radius: 20px; background: var(--tone-2d2e31, #2d2e31); color: var(--tone-909299, #909299); font-size: 10px; }
.composer-tool-row > button:hover, .composer-tool > button:hover, .composer-tool.open > button { border-color: var(--tone-484a50, #484a50); background: var(--tone-343539, #343539); color: var(--tone-d7d8da, #d7d8da); }
.composer-tool-row button i { color: var(--tone-a9abb0, #a9abb0); font-style: normal; font-size: 12px; }
.composer-tool { position: relative; }
.composer-tool-menu { position: absolute; z-index: 120; left: 0; top: 34px; display: grid; min-width: 170px; padding: 6px; border: 1px solid var(--tone-4a4c51, #4a4c51); border-radius: 10px; background: var(--tone-27282b, #27282b); box-shadow: 0 16px 45px rgba(0,0,0,.52); }
.composer-tool-menu button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--tone-c4c5c8, #c4c5c8); font-size: 10px; text-align: left; }
.composer-tool-menu button:hover { background: var(--tone-36373b, #36373b); color: var(--tone-ffffff, #fff); }
.composer-menu-empty { padding: 10px; color: var(--tone-777980, #777980); font-size: 9px; white-space: nowrap; }
.composer-expand { position: absolute; right: 0; top: 0; display: grid !important; place-items: center; width: 40px; min-height: 40px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--tone-85888e, #85888e) !important; font-size: 16px !important; }
.composer-refs { display: flex; align-items: center; gap: 6px; min-height: 43px; overflow-x: auto; scrollbar-color: var(--tone-505258, #505258) transparent; }
.composer-ref { position: relative; flex: 0 0 43px; width: 43px; height: 40px; overflow: hidden; padding: 0; border: 1px solid var(--tone-55575d, #55575d); border-radius: 7px; background: var(--tone-17181a, #17181a); color: var(--tone-aaaaaa, #aaa); cursor: pointer; }
.composer-ref:hover { border-color: var(--tone-81848b, #81848b); }
.composer-ref img, .composer-ref video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.composer-ref .index { position: absolute; left: 2px; top: 2px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--alpha-8-8-9-p82, rgba(8,8,9,.82)); color: var(--tone-ffffff, #fff); font-size: 8px; }
.composer-ref .at { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 13px; height: 13px; padding: 0; border: 1px solid #04b9d4; border-radius: 50%; background: var(--alpha-4-30-34-p86, rgba(4,30,34,.86)); color: #25d8ed; font-size: 8px; }
.composer-add-ref { flex: 0 0 43px; height: 40px; border: 1px dashed var(--tone-4b4d52, #4b4d52); border-radius: 7px; background: var(--tone-292a2d, #292a2d); color: var(--tone-777980, #777980); font-size: 15px; }
.composer-add-ref:hover { border-color: var(--tone-71747b, #71747b); color: var(--tone-dddddd, #ddd); }
.composer-prompt-wrap { position: relative; min-height: 112px; }
.composer-prompt { width: 100%; min-height: 112px; max-height: 158px; overflow: auto; padding: 7px 3px; border: 0; outline: 0; background: transparent; color: var(--tone-f0f0f2, #f0f0f2); caret-color: var(--tone-ffffff, #fff); font-size: 12px; font-weight: 540; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-color: var(--tone-595b60, #595b60) transparent; cursor: text; user-select: text; }
.composer-prompt:focus-visible { outline: none; box-shadow: none; background: transparent; }
.composer-prompt:empty::before { content: attr(data-placeholder); color: var(--tone-66686e, #66686e); pointer-events: none; }
@keyframes stage-log-pulse { 50% { opacity: .48; transform: scale(.82); } }
.video-composer.expanded .composer-prompt-wrap, .video-composer.expanded .composer-prompt { min-height: 345px; max-height: 470px; }
.inline-mention { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; height: 20px; margin: 0 2px; padding: 0 6px 0 3px; vertical-align: -4px; border: 1px solid var(--tone-4d5055, #4d5055); border-radius: 6px; background: var(--tone-303236, #303236); color: var(--tone-ececef, #ececef); font-size: 10px; font-weight: 500; white-space: nowrap; user-select: all; }
.inline-mention img, .inline-mention i { width: 15px; height: 15px; border-radius: 3px; object-fit: cover; font-style: normal; }
.inline-mention b { overflow: hidden; font-weight: 560; text-overflow: ellipsis; }
.composer-mention-menu { position: absolute; z-index: 130; left: min(38%,280px); top: 38px; width: 250px; padding: 7px; border: 1px solid var(--tone-4b4d52, #4b4d52); border-radius: 11px; background: var(--tone-292a2d, #292a2d); box-shadow: 0 20px 55px rgba(0,0,0,.58); }
.mention-search { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 9px; border: 1px solid var(--tone-505258, #505258); border-radius: 8px; color: var(--tone-8f9197, #8f9197); font-size: 10px; }
.composer-mention-menu em { display: block; padding: 9px 6px 4px; color: var(--tone-72747a, #72747a); font-size: 9px; font-style: normal; }
.mention-options { display: grid; max-height: 190px; overflow-y: auto; }
.mention-options button { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; gap: 0 7px; min-height: 44px; padding: 5px; border: 0; border-radius: 7px; background: transparent; color: var(--tone-d7d8db, #d7d8db); text-align: left; }
.mention-options button:hover { background: var(--tone-38393d, #38393d); }
.mention-options img, .mention-options button > span { display: grid; grid-row: 1/3; place-items: center; width: 32px; height: 32px; border-radius: 5px; object-fit: cover; background: #202124; }
.mention-options b { overflow: hidden; align-self: end; font-size: 10px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.mention-options small { color: var(--tone-85878d, #85878d); font-size: 8px; }
.mention-library { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 40px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--tone-aaaaaa, #aaa); font-size: 10px; text-align: left; }
.mention-library:hover { background: var(--tone-37383c, #37383c); color: var(--tone-ffffff, #fff); }
.composer-bottom-bar { position: relative; display: flex; align-items: center; min-height: 38px; padding-right: 46px; border-top: 1px solid var(--alpha-255-255-255-p035, rgba(255,255,255,.035)); }
.composer-bottom-left { display: flex; align-items: center; min-width: 0; }
.composer-flyout { position: relative; }
.composer-compact-trigger { display: flex; align-items: center; gap: 5px; max-width: 245px; min-height: 40px; padding: 0 9px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: var(--tone-d0d1d4, #d0d1d4); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.composer-compact-trigger:hover, .composer-flyout.open .composer-compact-trigger { background: var(--tone-333438, #333438); color: var(--tone-ffffff, #fff); }
.composer-compact-trigger > span { color: var(--tone-c7c9cd, #c7c9cd); }
.composer-compact-trigger .model-glyph { color: #f6c950; }
.composer-compact-trigger i { color: var(--tone-777980, #777980); font-style: normal; }
.composer-popover { position: absolute; z-index: 125; left: 0; top: calc(100% + 8px); min-width: 190px; padding: 8px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--tone-4b4d52, #4b4d52); border-radius: 11px; background: var(--tone-292a2d, #292a2d); box-shadow: 0 20px 55px rgba(0,0,0,.58); }
.composer-flyout.open-up .composer-popover { top: auto; bottom: calc(100% + 8px); }
.composer-flyout.model-panel .composer-compact-trigger { cursor: pointer; }
.composer-popover-title { display: block; padding: 5px 6px; color: var(--tone-7c7e84, #7c7e84); font-size: 9px; }
.composer-choice-list { display: grid; gap: 2px; }
.composer-choice-list button { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--tone-c4c5c8, #c4c5c8); font-size: 10px; text-align: left; }
.composer-choice-list button:hover { background: var(--tone-38393d, #38393d); color: var(--tone-ffffff, #fff); }
.composer-choice-list button i { visibility: hidden; color: #62aaff; font-style: normal; }
.composer-choice-list button.active i { visibility: visible; }
.model-family-entry { position: relative; }
.model-family-option { width: 100%; }
.model-family-option > span { flex: 1; }
.model-panel .composer-popover { overflow: visible; }
.model-settings-submenu { position: absolute; z-index: 1; top: 0; left: calc(100% + 8px); display: grid; gap: 4px; width: min(320px,calc(100vw - 32px)); max-height: calc(100vh - 24px); padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.model-family-entry.submenu-left > .model-settings-submenu { left: auto; right: calc(100% + 8px); }
.model-family-entry.submenu-stacked > .model-settings-submenu { left: 0; top: calc(100% + 8px); width: 100%; }
.settings-panel .composer-popover { width: 342px; }
.composer-setting-section { display: grid; gap: 7px; margin-bottom: 11px; }
.composer-setting-note { color: var(--tone-74777e, #74777e); font-size: 8px; line-height: 1.5; }
.composer-setting-section > span, .composer-duration > span { color: var(--tone-96989e, #96989e); font-size: 10px; }
.composer-aspect-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.composer-aspect-grid button, .composer-segments button { min-height: 40px; padding: 0 8px; border: 1px solid var(--tone-4b4d52, #4b4d52); border-radius: 8px; background: var(--tone-2b2c2f, #2b2c2f); color: var(--tone-a0a2a7, #a0a2a7); font-size: 10px; }
.composer-aspect-grid button.active, .composer-segments button.active { border-color: var(--tone-e6e7e9, #e6e7e9); background: var(--tone-3a3b3f, #3a3b3f); color: var(--tone-ffffff, #fff); }
.composer-aspect-grid button:disabled, .composer-segments button:disabled { opacity: .42; }
.composer-aspect-grid button i, .composer-segments button i { display: none; }
.composer-segments { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.composer-segments.two { grid-template-columns: repeat(2,1fr); }
.composer-segments.three { grid-template-columns: repeat(3,1fr); }
.composer-seed-input { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--tone-414349, #414349); border-radius: 9px; background: var(--tone-26272a, #26272a); color: var(--tone-8f9298, #8f9298); font-size: 9px; }
.composer-seed-input input { width: 100%; min-width: 0; border: 0; border-radius: 7px; outline: 0; padding: 7px 9px; background: var(--tone-1d1e21, #1d1e21); color: var(--tone-f1f2f4, #f1f2f4); font: inherit; font-variant-numeric: tabular-nums; }
.composer-seed-input input:focus { box-shadow: 0 0 0 1px var(--focus-ring); background: var(--tone-202228, #202228); }
.composer-seed-input input:disabled { opacity: .55; cursor: default; }
.composer-duration { display: grid; gap: 8px; margin-bottom: 11px; }
.composer-duration > span { display: flex; align-items: center; }
.composer-duration output { margin-left: auto; padding: 4px 11px; border-radius: 6px; background: var(--tone-383a3e, #383a3e); color: var(--tone-e8e9eb, #e8e9eb); font-weight: 650; }
.composer-duration small { margin-left: 5px; }
.composer-duration input { width: 100%; height: 16px; margin: 0; appearance: none; outline: 0; background: transparent; cursor: ew-resize; }
.composer-duration input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg,#4d9fff var(--range-progress),var(--tone-4b4d52, #4b4d52) var(--range-progress)); }
.composer-duration input::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4.5px; appearance: none; border: 0; border-radius: 50%; background: var(--tone-f5f5f6, #f5f5f6); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.composer-bottom-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.composer-bottom-actions button { min-width: 40px; height: 40px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; color: var(--tone-a3a5ab, #a3a5ab); font-size: 10px; }
.composer-bottom-actions button:hover { background: var(--tone-35363a, #35363a); color: var(--tone-ffffff, #fff); }
.composer-bottom-actions > span { min-width: 24px; color: var(--tone-777980, #777980); font-size: 9px; text-align: center; }
.composer-generate { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--tone-f4f4f5, #f4f4f5); color: var(--tone-16171a, #16171a); font-size: 18px; box-shadow: 0 8px 22px rgba(0,0,0,.34); transition: transform .15s,background .15s; }
.composer-generate:hover { transform: translateY(-1px); background: var(--tone-ffffff, #fff); }
.composer-generate:disabled { background: var(--tone-77787c, #77787c); color: var(--tone-36373a, #36373a); }
.composer-generate.pending:disabled { background: var(--tone-3a3b3f, #3a3b3f); color: var(--tone-777980, #777980); box-shadow: inset 0 0 0 1px var(--tone-505258, #505258); }

.pool-stack { position: relative; width: 100%; height: 100%; isolation: isolate; }
.pool-stack > i { position: absolute; inset: 9px -8px -9px 8px; z-index: -2; border: 1px solid color-mix(in srgb,var(--accent),transparent 62%); border-radius: 10px; background: var(--tone-16171a, #16171a); box-shadow: 0 9px 24px rgba(0,0,0,.25); }
.pool-stack > i:nth-child(2) { inset: 5px -4px -5px 4px; z-index: -1; background: var(--tone-1d1e21, #1d1e21); opacity: calc(.18 + min(var(--stack-depth), 2) * .36); }
.pool-top { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--tone-383a3f, #383a3f); border-radius: 9px; background: var(--tone-17181b, #17181b); box-shadow: 0 7px 22px rgba(0,0,0,.34); }
.pool-count { position: absolute; right: 8px; top: 8px; min-width: 23px; padding: 4px 7px; border: 1px solid var(--alpha-255-255-255-p12, rgba(255,255,255,.12)); border-radius: 12px; background: var(--alpha-10-11-13-p78, rgba(10,11,13,.78)); color: var(--tone-e5e6e8, #e5e6e8); font-size: 8px; text-align: center; backdrop-filter: blur(5px); }
.pool-properties { position: absolute; z-index: 35; left: calc(100% + 23px); top: 0; display: grid; gap: 8px; width: 300px; max-height: 320px; padding: 10px; overflow: hidden; border: 1px solid var(--tone-45474c, #45474c); border-radius: 12px; background: var(--alpha-35-36-39-p985, rgba(35,36,39,.985)); box-shadow: 0 22px 65px rgba(0,0,0,.5); pointer-events: auto; }
.pool-properties header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 3px 7px; border-bottom: 1px solid var(--tone-3b3d42, #3b3d42); }
.pool-properties header > span { display: grid; gap: 3px; min-width: 0; }
.pool-properties header strong { color: var(--tone-dfe0e2, #dfe0e2); font-size: 10px; }
.pool-properties header small { color: var(--tone-777980, #777980); font-size: 8px; }
.pool-properties > div { display: grid; gap: 4px; max-height: 245px; overflow-y: auto; scrollbar-color: var(--tone-56585e, #56585e) transparent; }
.pool-item-row { display: grid; grid-template-columns: minmax(0,1fr) 28px; gap: 4px; }
.pool-properties .pool-item-row > button:first-child { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 33px; padding: 5px 7px; border: 1px solid transparent; border-radius: 7px; background: var(--tone-2c2d30, #2c2d30); color: var(--tone-92949a, #92949a); text-align: left; }
.pool-properties .pool-item-delete { display: grid; place-items: center; min-height: 33px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: var(--tone-2c2d30, #2c2d30); color: var(--tone-777980, #777980); }
.pool-properties .pool-item-delete:hover { border-color: rgba(240,111,118,.55); background: rgba(240,111,118,.12); color: #ff9298; }
.pool-properties .pool-clear { min-height: 25px; padding: 4px 7px; border: 1px solid var(--tone-46484d, #46484d); border-radius: 6px; background: var(--tone-292a2d, #292a2d); color: var(--tone-8f9197, #8f9197); font-size: 9px; }
.pool-properties .pool-clear:hover { border-color: rgba(240,111,118,.48); color: #ff9298; }
.pool-properties button:hover { border-color: var(--tone-505258, #505258); background: var(--tone-343539, #343539); color: var(--tone-ffffff, #fff); }
.pool-properties button.active { border-color: color-mix(in srgb,var(--accent),transparent 42%); background: color-mix(in srgb,var(--accent),var(--tone-25262a, #25262a) 90%); }
.pool-properties button span, .pool-properties button i { color: var(--tone-777980, #777980); font-size: 7px; font-style: normal; }
.pool-properties button b { overflow: hidden; color: var(--tone-d1d2d5, #d1d2d5); font-size: 8px; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.pool-properties em { padding: 18px 8px; color: var(--tone-777980, #777980); font-size: 9px; font-style: normal; text-align: center; }


.canvas-bottom-left { position: absolute; z-index: 38; left: 13px; bottom: 13px; display: flex; align-items: center; gap: 4px; }
.canvas-bottom-left button { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--tone-898b91, #898b91); font-size: 8px; }
.canvas-bottom-left button:hover { background: var(--tone-2a2b2e, #2a2b2e); color: var(--tone-eeeeee, #eee); }


.popover { position: fixed; z-index: 100; min-width: 220px; padding: 6px; border: 1px solid var(--tone-3d3e42, #3d3e42); border-radius: 9px; background: var(--alpha-31-32-35-p98, rgba(31,32,35,.98)); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.popover button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--tone-b2b3b7, #b2b3b7); font-size: 8px; text-align: left; }
.popover button:hover { background: var(--tone-3b3c40, #3b3c40); color: var(--tone-ffffff, #fff); }
.popover button.danger { color: #df8787; }
.popover hr { height: 1px; margin: 5px; border: 0; background: var(--tone-3c3d41, #3c3d41); }
.popover-title { padding: 7px 8px; color: var(--tone-75777d, #75777d); font-size: 7px; letter-spacing: .1em; }
.project-menu-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-707278, #707278); }
.project-menu-item.active i { background: var(--yellow); }
.project-menu-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-menu-item em { color: var(--green); font-style: normal; }
.add-popover { min-width: 280px; max-height: calc(100vh - 90px); overflow-y: auto; }
.add-popover button i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--tone-292a2d, #292a2d); color: var(--node-accent,var(--tone-aaaaaa, #aaa)); font-style: normal; }
.add-popover button span { display: grid; gap: 2px; }
.add-popover button strong { font-size: 9px; }
.add-popover button small { color: var(--tone-696b71, #696b71); font-size: 7px; }
.zoom-popover { min-width: 150px; }
.canvas-context-menu { position: fixed; z-index: 150; width: 238px; max-height: calc(100vh - 20px); padding: 7px; overflow-y: auto; border: 1px solid var(--tone-3e4045, #3e4045); border-radius: 14px; background: var(--alpha-35-36-39-p985, rgba(35,36,39,.985)); box-shadow: 0 24px 70px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.03); backdrop-filter: blur(12px); }
.canvas-context-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--tone-d1d2d5, #d1d2d5); font-size: 10px; text-align: left; }
.canvas-context-menu button:hover:not(:disabled) { background: var(--tone-424348, #424348); color: var(--tone-ffffff, #fff); }
.canvas-context-menu button:disabled { color: var(--tone-62646a, #62646a); }
.canvas-context-menu button > i { width: 15px; color: var(--tone-aeb1b7, #aeb1b7); font-style: normal; text-align: center; }
.canvas-context-menu button > b { font-size: 12px; font-weight: 650; }
.canvas-context-menu button > small { margin-left: auto; color: var(--tone-74767c, #74767c); font-size: 8px; }
.canvas-context-menu button > kbd { margin-left: auto; border: 0; background: transparent; color: var(--tone-777980, #777980); box-shadow: none; font-size: 8px; }
.canvas-context-menu .context-section { display: block; padding: 11px 9px 5px; color: var(--tone-777980, #777980); font-size: 8px; }
.canvas-context-menu hr { height: 1px; margin: 5px 7px; border: 0; background: var(--tone-414247, #414247); }

.lib-dialog { width: min(900px,calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; overflow: hidden; border: 1px solid var(--tone-44454a, #44454a); border-radius: 12px; background: var(--tone-1d1e21, #1d1e21); color: var(--text); box-shadow: 0 25px 90px rgba(0,0,0,.62); }
.lib-dialog::backdrop { background: var(--alpha-5-6-7-p74, rgba(5,6,7,.74)); backdrop-filter: blur(5px); }
.library-sidebar { position: fixed; z-index: 55; left: 64px; top: 60px; bottom: 12px; width: min(390px,calc(100vw - 78px)); overflow: hidden; border: 1px solid var(--tone-414349, #414349); border-radius: 13px; background: var(--alpha-29-30-33-p985, rgba(29,30,33,.985)); box-shadow: 16px 18px 65px rgba(0,0,0,.46); backdrop-filter: blur(12px); }
.library-sidebar-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; height: 100%; }
.library-sidebar .dialog-header small { color: var(--tone-74767c, #74767c); font-size: 9px; }
.library-sidebar .library-close { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); font-size: 21px; line-height: 1; }
.library-sidebar .library-close:hover { border-color: var(--muted); background: var(--panel-3); }
.library-sidebar .media-toolbar { flex-wrap: wrap; }
.library-sidebar .library-tabs { order: 0; }
.library-sidebar .search-field { order: 2; flex-basis: 100%; }
.library-sidebar .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; }
.library-sidebar .dialog-footer { flex-wrap: wrap; }
.library-sidebar .dialog-footer > span { flex-basis: 100%; margin: 0; }

.agent-rail-button { font-size: 9px; font-weight: 800; letter-spacing: -.04em; }
.agent-rail-button.active { color: var(--tone-111214, #111214); border-color: #f2c94c; background: #f2c94c; box-shadow: 0 0 0 3px rgba(242,201,76,.12); }
.agent-sidebar { position: fixed; z-index: 56; left: 64px; top: 60px; bottom: 12px; width: min(420px,calc(100vw - 78px)); overflow: hidden; border: 1px solid var(--tone-414349, #414349); border-radius: 14px; background: var(--alpha-24-25-28-p99, rgba(24,25,28,.99)); box-shadow: 18px 20px 70px rgba(0,0,0,.52); backdrop-filter: blur(16px); }
.agent-sidebar-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; height: 100%; }
.agent-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 13px; border-bottom: 1px solid var(--tone-34363a, #34363a); }
.agent-sidebar-header > span { display: flex; align-items: center; gap: 11px; min-width: 0; }
.agent-sidebar-header > span > span { display: grid; gap: 2px; }
.agent-sidebar-header small { color: var(--tone-777b82, #777b82); font-size: 8px; font-weight: 780; letter-spacing: .14em; }
.agent-sidebar-header strong { color: var(--tone-f2f3f5, #f2f3f5); font-size: 14px; }
.agent-status-light { width: 9px; height: 9px; border-radius: 50%; background: var(--tone-666a71, #666a71); box-shadow: 0 0 0 4px rgba(102,106,113,.12); }
.agent-sidebar.ready .agent-status-light { background: #56d993; box-shadow: 0 0 0 4px rgba(86,217,147,.12); }
.agent-sidebar.running .agent-status-light { background: #f2c94c; box-shadow: 0 0 0 4px rgba(242,201,76,.14); }
.agent-sidebar-header button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--tone-8d9097, #8d9097); font-size: 19px; cursor: pointer; }
.agent-sidebar-header button:hover { color: var(--tone-ffffff, #fff); background: var(--tone-34363a, #34363a); }
.agent-runtime-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 15px; border-bottom: 1px solid var(--tone-303236, #303236); color: var(--tone-878a91, #878a91); font-size: 9px; }
.agent-runtime-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-status button { border: 0; background: transparent; color: var(--tone-aaaeb5, #aaaeb5); font-size: 9px; cursor: pointer; }
.agent-messages { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 11px; padding: 16px; scrollbar-color: var(--tone-4b4e54, #4b4e54) transparent; }
.agent-message { display: grid; gap: 5px; max-width: 90%; }
.agent-message.user { align-self: flex-end; }
.agent-message.assistant, .agent-message.system { align-self: flex-start; }
.agent-message small { color: var(--tone-73767d, #73767d); font-size: 8px; }
.agent-message.user small { text-align: right; }
.agent-message p { margin: 0; padding: 10px 12px; border: 1px solid var(--tone-3c3f44, #3c3f44); border-radius: 12px 12px 12px 3px; background: var(--tone-2b2d31, #2b2d31); color: var(--tone-e8e9eb, #e8e9eb); font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-message.user p { border-color: #665724; border-radius: 12px 12px 3px 12px; background: var(--tone-3a341e, #3a341e); color: #fff4c4; }
.agent-message.system p { color: var(--tone-aeb1b8, #aeb1b8); background: var(--tone-25272a, #25272a); }
.agent-message.pending p { color: #c7ac50; }
.agent-message.error p { border-color: #6d3b3f; color: #ffb2b8; background: var(--tone-342427, #342427); }
.agent-message .agent-action-count { color: #57d995; }
.agent-composer { margin: 0 12px 12px; padding: 11px; border: 1px solid var(--tone-41444a, #41444a); border-radius: 13px; background: var(--tone-202226, #202226); box-shadow: 0 -15px 40px rgba(0,0,0,.16); }
.agent-composer:focus-within { border-color: #74652c; box-shadow: 0 0 0 2px rgba(242,201,76,.08); }
.agent-composer label { display: block; margin-bottom: 5px; color: var(--tone-7f8289, #7f8289); font-size: 9px; }
.agent-composer textarea { box-sizing: border-box; width: 100%; min-height: 72px; max-height: 190px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--tone-f2f3f5, #f2f3f5); caret-color: #f2c94c; font: inherit; font-size: 11px; line-height: 1.6; }
.agent-composer textarea::placeholder { color: var(--tone-5f6268, #5f6268); }
.agent-composer footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.agent-composer footer span { color: var(--tone-686b72, #686b72); font-size: 8px; }
.agent-composer button { min-width: 64px; height: 30px; border: 0; border-radius: 9px; background: var(--tone-f1f2f4, #f1f2f4); color: var(--tone-18191b, #18191b); font-size: 10px; font-weight: 750; cursor: pointer; }
.agent-composer button:disabled { cursor: wait; opacity: .45; }
.dialog-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; max-height: calc(100vh - 32px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--tone-38393d, #38393d); }
.dialog-header h2 { margin: 4px 0 0; font-size: 14px; }
.eyebrow { color: var(--tone-777980, #777980); font-size: 7px; font-weight: 700; letter-spacing: .15em; }
.dialog-close { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--tone-85878d, #85878d); font-size: 20px; }
.dialog-close:hover { background: var(--tone-303135, #303135); color: var(--tone-ffffff, #fff); }
.media-toolbar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--tone-333438, #333438); }
.library-tabs { display: flex; flex: 0 0 auto; padding: 3px; border-radius: 8px; background: var(--tone-151619, #151619); }
.library-tabs button { padding: 5px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--tone-7c7e84, #7c7e84); font-size: 10px; white-space: nowrap; }
.library-tabs button.active { background: var(--tone-343539, #343539); color: var(--tone-f0f0f2, #f0f0f2); }
.segmented { display: flex; padding: 3px; border-radius: 7px; background: var(--tone-151619, #151619); }
.segmented button { padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--tone-74767d, #74767d); font-size: 8px; }
.segmented button.active { background: var(--tone-343539, #343539); color: var(--tone-eeeeee, #eee); }
.search-field { display: flex; flex: 1; align-items: center; gap: 5px; min-width: 110px; padding: 6px 8px; border: 1px solid var(--tone-393a3e, #393a3e); border-radius: 7px; color: var(--tone-73757c, #73757c); }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tone-d0d0d3, #d0d0d3); font-size: 8px; }
.category-filter { max-width: 130px; padding: 6px 7px; border: 1px solid var(--tone-393a3e, #393a3e); border-radius: 7px; background: var(--tone-1d1e21, #1d1e21); color: var(--tone-9b9ca2, #9b9ca2); font-size: 8px; }
.primary-small, .secondary-small, .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 7px; font-size: 8px; }
.primary-small { padding: 7px 11px; border: 1px solid #e2be43; background: var(--yellow); color: var(--tone-171408, #171408); }
.secondary-small { padding: 7px 11px; border: 1px solid var(--tone-3e3f43, #3e3f43); background: var(--tone-28292c, #28292c); color: var(--tone-aaaaaa, #aaa); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); align-content: start; gap: 10px; min-height: 310px; overflow: auto; padding: 14px; }
.library-card { --card-accent: var(--image); position: relative; overflow: hidden; border: 1px solid var(--tone-393a3e, #393a3e); border-radius: 9px; background: var(--tone-252629, #252629); }
.library-card.video { --card-accent: var(--video); }
.library-card.audio { --card-accent: var(--audio); }
.library-card.selected { border-color: var(--card-accent); box-shadow: 0 0 0 1px color-mix(in srgb,var(--card-accent),transparent 60%); }
.library-card-main { display: grid; grid-template-rows: 104px auto; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.library-card-main > span:last-child { overflow: hidden; padding: 8px; color: var(--tone-c0c1c5, #c0c1c5); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.library-media { display: grid; place-items: center; overflow: hidden; background: var(--tone-0b0c0e, #0b0c0e); color: var(--card-accent); font-size: 20px; }
.library-media img, .library-media video { width: 100%; height: 100%; object-fit: cover; }
.library-check { position: absolute; right: 7px; top: 7px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--tone-5b5d63, #5b5d63); border-radius: 5px; background: var(--alpha-10-11-13-p8, rgba(10,11,13,.8)); color: transparent; font-size: 9px; }
.library-card.selected .library-check { border-color: var(--card-accent); background: var(--card-accent); color: var(--tone-111111, #111); }
.library-meta { display: flex; align-items: center; justify-content: space-between; min-height: 25px; padding: 0 8px 7px; color: var(--tone-66686f, #66686f); font-size: 7px; }
.library-actions { display: flex; gap: 3px; }
.library-actions button { padding: 3px 5px; border: 0; border-radius: 4px; background: var(--tone-333438, #333438); color: var(--tone-85878e, #85878e); font-size: 6px; }
.library-actions button:hover { background: var(--tone-48494e, #48494e); color: var(--tone-eeeeee, #eee); }
.library-empty { grid-column: 1/-1; display: grid; place-items: center; min-height: 250px; color: var(--tone-6a6c72, #6a6c72); font-size: 9px; }
.dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 10px 14px; border-top: 1px solid var(--tone-393a3e, #393a3e); }
.dialog-footer > span { margin-right: auto; color: var(--tone-71737a, #71737a); font-size: 8px; }
.primary-button { padding: 8px 11px; border: 1px solid #e2bd40; background: var(--yellow); color: var(--tone-171408, #171408); }
.secondary-button { padding: 8px 11px; border: 1px solid var(--tone-414247, #414247); background: var(--tone-292a2d, #292a2d); color: var(--tone-aaaaaa, #aaa); }
.settings-dialog { width: min(680px,calc(100vw - 30px)); }
.settings-dialog .dialog-shell { grid-template-rows: auto minmax(0,1fr) auto; }
.settings-content { display: grid; gap: 14px; min-height: 0; overflow: auto; padding: 15px; }
.settings-content label { display: grid; gap: 5px; color: var(--tone-85878e, #85878e); font-size: 8px; }
.settings-content input, .settings-content select { width: 100%; padding: 7px 8px; border: 1px solid var(--tone-3d3e43, #3d3e43); border-radius: 7px; outline: 0; background: var(--tone-17181b, #17181b); color: var(--tone-cccccc, #ccc); font-size: 9px; }
.settings-content label small { color: var(--tone-63656b, #63656b); font-size: 7px; }
.settings-content .settings-range > span { display: grid; grid-template-columns: minmax(0,1fr) 48px; align-items: center; gap: 10px; }
.settings-content .settings-range input { height: 18px; padding: 0; border: 0; background: transparent; accent-color: var(--blue); }
.settings-content .settings-range output { display: grid; place-items: center; height: 28px; border: 1px solid var(--tone-414349, #414349); border-radius: 7px; background: var(--tone-17181b, #17181b); color: var(--tone-e0e1e4, #e0e1e4); font-size: 9px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.engine-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--tone-3b3c40, #3b3c40); border-radius: 9px; background: var(--tone-252629, #252629); }
.engine-light { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-73757c, #73757c); }
.engine-card strong { font-size: 9px; }
.engine-card p { margin: 3px 0 0; color: var(--tone-71737a, #71737a); font-size: 8px; }
.settings-models { overflow: hidden; border: 1px solid var(--tone-3b3c40, #3b3c40); border-radius: 9px; background: var(--tone-202124, #202124); }
.settings-models > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--tone-343539, #343539); }
.settings-models > header strong { color: var(--tone-d7d8db, #d7d8db); font-size: 10px; }
.settings-models > header small { color: var(--tone-71747b, #71747b); font-size: 9px; }
.settings-model-row { display: grid; grid-template-columns: 8px 1fr; gap: 9px; padding: 10px 11px; border-bottom: 1px solid var(--tone-303135, #303135); }
.settings-model-row:last-child { border-bottom: 0; }
.settings-model-row > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #c06d73; }
.settings-model-row.ready > i { background: var(--green); }
.settings-model-row > div { display: grid; gap: 4px; min-width: 0; }
.settings-model-row strong { overflow: hidden; color: var(--tone-c8c9cd, #c8c9cd); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.settings-model-row small { color: var(--tone-7b7d84, #7b7d84); font-size: 9px; overflow-wrap: anywhere; }
.local-note { padding: 10px; border: 1px solid var(--tone-49432b, #49432b); border-radius: 9px; background: rgba(242,201,76,.035); }
.local-note strong { color: var(--yellow); font-size: 8px; }
.local-note p { margin: 4px 0 0; color: var(--tone-7a776b, #7a776b); font-size: 7px; }
.history-dialog { width: min(700px,calc(100vw - 30px)); }
.history-list { min-height: 300px; max-height: 70vh; overflow: auto; padding: 12px; }
.history-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 10px; border-bottom: 1px solid var(--tone-333438, #333438); }
.history-status { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-777980, #777980); }
.history-status.completed { background: var(--green); }
.history-status.failed { background: var(--red); }
.history-copy { min-width: 0; }
.history-copy strong { display: block; overflow: hidden; color: var(--tone-c1c2c6, #c1c2c6); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.shortcuts-dialog { width: min(680px,calc(100vw - 30px)); }
.shortcuts-dialog .dialog-shell { grid-template-rows: auto minmax(0,1fr); min-height: 0; }
.shortcuts-content { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; min-height: 0; max-height: calc(100vh - 90px); overflow: auto; padding: 16px; }
.shortcut-section { overflow: hidden; border: 1px solid var(--tone-3b3c40, #3b3c40); border-radius: 10px; background: var(--tone-232427, #232427); }
.shortcut-section h3 { margin: 0; padding: 11px 12px; border-bottom: 1px solid var(--tone-37383c, #37383c); color: var(--tone-d5d6d9, #d5d6d9); font-size: 9px; font-weight: 650; }
.shortcut-row { display: flex; align-items: center; min-height: 42px; gap: 5px; padding: 8px 11px; border-bottom: 1px solid var(--tone-323337, #323337); color: var(--tone-777980, #777980); font-size: 8px; }
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-row > span { flex: 1; min-width: 0; color: var(--tone-a7a9ae, #a7a9ae); overflow-wrap: anywhere; }
.shortcut-row b { color: var(--tone-62646a, #62646a); font-size: 8px; font-weight: 500; }
.shortcut-row kbd { flex: none; min-width: 25px; padding: 4px 7px; border: 1px solid var(--tone-4a4c52, #4a4c52); border-bottom-color: var(--tone-62646b, #62646b); border-radius: 6px; background: var(--tone-191a1d, #191a1d); color: var(--tone-e1e2e4, #e1e2e4); box-shadow: inset 0 -1px rgba(255,255,255,.04); font-family: inherit; font-size: 8px; text-align: center; white-space: nowrap; }
@media (min-width: 721px) {
  .shortcuts-dialog { width: min(760px,calc(100vw - 30px)); }
  .shortcuts-content { grid-template-areas: "selection undo" "selection navigation"; align-content: start; }
  .shortcut-section h3 { font-size: 12px; }
  .shortcut-row { min-height: 44px; font-size: 11px; line-height: 1.45; }
  .shortcut-row b, .shortcut-row kbd { font-size: 10px; }
  .shortcut-section:nth-child(1) { grid-area: selection; }
  .shortcut-section:nth-child(2) { grid-area: undo; }
  .shortcut-section:nth-child(3) { grid-area: navigation; }
}
@media (max-width: 720px) { .shortcuts-content { grid-template-columns: 1fr; } }
.history-copy small { color: var(--tone-6c6e74, #6c6e74); font-size: 7px; }
.history-item button { padding: 5px 7px; border: 1px solid var(--tone-414247, #414247); border-radius: 6px; background: var(--tone-292a2d, #292a2d); color: var(--tone-999ba1, #999ba1); font-size: 7px; }

.toast-stack { position: fixed; z-index: 200; right: 17px; top: 61px; display: grid; gap: 7px; }
.toast { min-width: 220px; max-width: 360px; padding: 10px 12px; border: 1px solid var(--tone-48494e, #48494e); border-radius: 8px; background: var(--tone-28292c, #28292c); box-shadow: var(--shadow); color: var(--tone-c5c6ca, #c5c6ca); font-size: 8px; }
.toast.error { border-color: #704047; color: #ffaaaa; }
.loading-screen { position: fixed; z-index: 500; inset: 0; display: grid; place-content: center; justify-items: center; gap: 11px; background: var(--tone-111214, #111214); transition: opacity .2s; }
.loading-screen strong { font-size: 11px; }
.loading-screen small { color: var(--tone-62646a, #62646a); font-size: 8px; }
.app-shell:not(.is-loading) .loading-screen { visibility: hidden; opacity: 0; pointer-events: none; }

/* 交互文字保持可读；图标和角标仍使用紧凑尺寸。 */
.project-switcher, .model-switcher, .agent-button, .engine-badge { font-size: 11px; }
.model-switcher small, .save-state { color: var(--tone-a7a9af, #a7a9af); font-size: 10px; }
.node-title input, .node-title .node-meta { color: var(--tone-aeb0b6, #aeb0b6); font-size: 11px; }
.stage-empty strong, .stage-empty small { font-size: 11px; }
.stage-empty small { color: var(--tone-96989f, #96989f); }
.timeline-controls time { min-width: 82px; font-size: 10px; }
.composer-model-pending strong,
.composer-model-pending span,
.composer-tool-row > button,
.composer-tool > button,
.composer-tool-menu button,
.composer-menu-empty,
.inline-mention,
.mention-search,
.composer-mention-menu em,
.mention-options b,
.mention-options small,
.mention-library,
.composer-compact-trigger,
.composer-popover-title,
.composer-choice-list button,
.composer-setting-section > span,
.composer-duration > span,
.composer-aspect-grid button,
.composer-segments button,
.composer-seed-input { font-size: 11px; }
.composer-model-pending span, .mention-options small, .composer-popover-title { color: var(--tone-a7a9b0, #a7a9b0); }
.pool-properties header strong,
.pool-properties header small,
.pool-properties button span,
.pool-properties button i,
.pool-properties button b,
.pool-properties em { font-size: 11px; }
.pool-properties header small, .pool-properties button span, .pool-properties button i { color: var(--tone-a1a3a9, #a1a3a9); }
.canvas-bottom-left button { font-size: 11px; }
.popover button, .popover-title, .add-popover button strong, .add-popover button small { font-size: 11px; }
.popover-title, .add-popover button small { color: var(--tone-9fa1a8, #9fa1a8); }
.canvas-context-menu button,
.canvas-context-menu button > small,
.canvas-context-menu button > kbd,
.canvas-context-menu .context-section { font-size: 11px; }
.canvas-context-menu button > small, .canvas-context-menu button > kbd, .canvas-context-menu .context-section { color: var(--tone-a0a2a8, #a0a2a8); }
.eyebrow,
.segmented button,
.search-field input,
.category-filter,
.primary-small,
.secondary-small,
.primary-button,
.secondary-button,
.library-card-main > span:last-child,
.library-meta,
.library-actions button,
.library-empty,
.dialog-footer > span { font-size: 11px; }
.eyebrow, .library-meta, .dialog-footer > span { color: var(--tone-9b9da4, #9b9da4); }
.settings-content label,
.settings-content input,
.settings-content select,
.settings-content label small,
.settings-content .settings-range output,
.engine-card strong,
.engine-card p,
.local-note strong,
.local-note p { font-size: 11px; }
.settings-content label, .settings-content label small, .engine-card p, .local-note p { color: var(--tone-a3a5ab, #a3a5ab); }
.history-copy strong,
.history-copy small,
.history-item button,
.shortcut-section h3,
.shortcut-row,
.shortcut-row b,
.shortcut-row kbd,
.toast,
.loading-screen small { font-size: 11px; }
.history-copy small, .shortcut-row, .shortcut-row b, .loading-screen small { color: var(--tone-a1a3a9, #a1a3a9); }

@media (max-width: 820px) {
  #app .canvas-top-controls { flex-wrap: nowrap; align-items: flex-start; }
  #app .canvas-top-controls .topbar-left { min-width: 0; }
  #app .canvas-top-controls .project-controls { min-width: 0; }
  #app .canvas-top-controls .topbar-right { width: auto; justify-content: flex-end; overflow: visible; padding: 0; }
  .composer-overlay-card { position: absolute; left: 8px; right: 8px; top: 70px; width: auto; max-height: calc(100dvh - 80px); border-radius: 15px 15px 0 0; }
  .composer-overlay-card::before { display: none; }
  .node-focus-body { padding: 10px 10px max(14px,env(safe-area-inset-bottom)); }
  .stage-focus-grid, .media-focus-grid, .node-focus-pool, .node-focus-function .video-trim-card { grid-template-columns: 1fr; }
  .node-focus-preview, .node-focus-function > .node-media, .node-focus-function .video-trim-card > .node-media, .node-focus-pool > .pool-stack { min-height: 190px; max-height: 260px; }
  .composer-overlay .composer-tool-row > button { min-height: 36px; }
  .composer-overlay .composer-prompt-wrap, .composer-overlay .composer-prompt { min-height: 92px; max-height: 150px; }
  .composer-overlay .composer-popover { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: 62dvh; }
  .composer-overlay .composer-mention-menu { right: 0; left: 0; width: auto; }
  .canvas-topbar { grid-template-columns: 1fr auto; }
  .view-tabs, .engine-badge, .save-state { display: none; }
  .model-switcher { max-width: 120px; }
  .tool-rail { left: 7px; top: 8px; }
  .canvas-bottom-left { display: flex; left: 8px; bottom: 8px; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
  .canvas-bottom-left button { min-width: 32px; height: 32px; }
  .node-focus-editor .video-composer:not(.expanded) { width: 100%; }
  .node-context-toolbar { max-width: calc(100vw - 30px); overflow-x: auto; }
  .media-toolbar { flex-wrap: wrap; }
  .search-field { order: 2; flex-basis: 100%; }
}

.minimap-panel .map-node.image-kind { fill: var(--image); }
.minimap-panel .map-node.video-kind { fill: var(--video); }
.minimap-panel .map-node.audio-kind { fill: var(--audio); }
.minimap-panel .map-node.has-task { opacity: .92; stroke: color-mix(in srgb,var(--yellow),transparent 12%); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.minimap-panel .map-node.is-running { opacity: 1; stroke: var(--yellow); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.minimap-panel .map-node.is-failed { opacity: 1; stroke: var(--red); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.minimap-panel .map-node.selected { fill: var(--yellow); opacity: 1; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

@media (min-width: 821px) and (max-width: 1100px) {
  .composer-overlay-card { width: min(760px,calc(100vw - 108px)); }
  .stage-focus-grid { grid-template-columns: minmax(220px,.7fr) minmax(380px,1.3fr); }
}
@media (min-width: 821px) {
  .composer-overlay .composer-bottom-left { display: grid; grid-template-columns: max-content max-content minmax(0,1fr); gap: 2px; align-items: start; }
  .composer-overlay .composer-flyout { display: contents; }
  .composer-overlay .composer-flyout:nth-child(1) > .composer-compact-trigger { grid-column: 1; grid-row: 1; }
  .composer-overlay .composer-flyout:nth-child(2) > .composer-compact-trigger { grid-column: 2; grid-row: 1; }
  .composer-overlay .composer-flyout.open > .composer-popover { position: static; width: 100%; max-height: 300px; margin-top: 5px; overflow-x: hidden; overflow-y: auto; box-shadow: none; }
  .composer-overlay .composer-flyout:nth-child(1).open > .composer-popover,
  .composer-overlay .composer-flyout:nth-child(2).open > .composer-popover { grid-column: 1 / -1; grid-row: 2; }
  .composer-overlay .composer-flyout.open .model-settings-submenu { position: static; width: 100%; max-height: 230px; margin-top: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: none; }
}
@media (max-width: 1100px) {
  .video-composer:not(.expanded) .composer-bottom-left { flex-wrap: wrap; row-gap: 4px; padding-block: 4px; }
  .video-composer:not(.expanded) .composer-compact-trigger { max-width: min(245px,calc(100vw - 170px)); }
  .video-composer:not(.expanded) .composer-prompt-wrap,
  .video-composer:not(.expanded) .composer-prompt { min-height: 80px; max-height: 120px; }
}