/* BeefTV styling is scoped to the infinite canvas and its project picker. */
#app-shell .sidebar-nav > .beeftv-canvas-entry { min-height: 44px; margin: 8px 0 10px; border: 1px solid #333; border-radius: 10px; color: #e9e9e9; background: #202020; font-size: 14px; font-weight: 500; box-shadow: none; }
#app-shell .sidebar-nav > .beeftv-canvas-entry:hover, #app-shell .sidebar-nav > .beeftv-canvas-entry.active { border-color: #4a4a4a; color: #fff; background: #292929; box-shadow: none; }
#app-shell .sidebar-nav > .beeftv-canvas-entry > span:first-child { color: inherit; }
#app-shell .sidebar-nav > .beeftv-canvas-entry svg { width: 20px; height: 20px; stroke-width: 1.8; }
#app-shell .sidebar-nav > .legacy-features { margin-top: 12px; border-top: 1px solid #2b2b2b; border-radius: 0; }
#app-shell .sidebar-nav > .legacy-features > summary { padding-top: 15px; color: #a6a6aa; font-size: 13px; font-weight: 500; letter-spacing: 0; }
#app-shell .sidebar-nav > .legacy-features[open] { border-color: #2b2b2b; background: transparent; }
#app-shell .beeftv-shell-controls, #app-shell .beeftv-home, #app-shell .beeftv-asset-page { display: none !important; }
#app-shell .legacy-dashboard-data { display: contents; }
#app-shell.canvas-view-open .topbar { display: none; }
#app-shell.canvas-view-open .content { padding: 0; }
#app-shell.canvas-view-open [data-view-panel="canvas"].show-canvas-home .canvas-home { padding: 0; border: 0; border-radius: 0; background: #0f0f0f; }
#app-shell.canvas-view-open .legacy-canvas-home { display: none !important; }
#app-shell .beeftv-project-page { --user-ink: #f6f6f6; --user-ink-muted: #9b9ba0; --user-ink-soft: #838389; --user-surface-muted: #202020; --user-surface-hover: #292929; --user-border: #2a2a2a; min-height: 100%; color: var(--user-ink); background: #0f0f0f; }
#app-shell .beeftv-project-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 40px 0 8px; }
#app-shell .beeftv-project-heading { display: flex; align-items: center; min-width: 0; gap: 8px; }
#app-shell .beeftv-project-back { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--user-ink); background: transparent; }
#app-shell .beeftv-project-back:hover { background: #202020; }
#app-shell .beeftv-project-back svg { width: 18px; height: 18px; stroke-width: 2.5; }
#app-shell .beeftv-project-heading h1 { margin: 0; color: var(--user-ink); font-size: 16px; line-height: 24px; font-weight: 500; }
#app-shell .beeftv-project-actions { display: flex; align-items: center; gap: 8px; }
#app-shell .beeftv-project-search { display: flex; align-items: center; gap: 6px; width: 200px; height: 32px; padding: 0 11px; border: 1px solid #2d2d2d; border-radius: 11px; color: #d7d7d7; background: #151515; }
#app-shell .beeftv-project-search svg { width: 18px; height: 18px; }
#app-shell .beeftv-project-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: #f3f3f3; background: transparent; font-size: 12px; }
#app-shell .beeftv-project-actions > button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 0; border-radius: 10px; color: #e8e8e8; background: #222; font-size: 12px; white-space: nowrap; }
#app-shell .beeftv-project-actions > button:hover { background: #303030; }
#app-shell .beeftv-project-actions > button svg { width: 15px; height: 15px; stroke-width: 1.8; }
#app-shell .beeftv-project-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; padding: 0 40px 40px; }
#app-shell .beeftv-project-create-entry, #app-shell .beeftv-project-item { min-width: 0; }
#app-shell .beeftv-project-create-card { display: flex; width: 100%; aspect-ratio: 16 / 9; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 1px solid transparent; border-radius: 16px; color: #f3f3f3; background: #202020; font: inherit; }
#app-shell .beeftv-project-create-card:hover { border-color: #747474; background: #292929; transform: translateY(-1px); }
#app-shell .beeftv-project-create-card svg { width: 16px; height: 16px; color: #828288; stroke-width: 1.8; }
#app-shell .beeftv-project-create-card strong { font-size: 14px; font-weight: 500; }
#app-shell .beeftv-project-create-entry p { margin: 0; padding: 10px 0; color: #838389; font-size: 14px; }
#app-shell .beeftv-project-folder { display: flex; min-width: 0; aspect-ratio: 16 / 10; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; padding: 0; border: 1px solid #363636; border-radius: 14px; color: #f3f3f3; background: #202020; text-align: left; }
#app-shell .beeftv-project-folder:hover { border-color: #6b6b6b; transform: translateY(-1px); }
#app-shell .beeftv-project-folder span { display: grid; width: 100%; flex: 1; place-items: center; background: linear-gradient(180deg, #414141, #181818); }
#app-shell .beeftv-project-folder svg { width: 42px; height: 42px; stroke-width: 1.35; }
#app-shell .beeftv-project-folder strong { width: 100%; padding: 8px 12px 0; background: #1b1b1b; font-size: 13px; }
#app-shell .beeftv-project-folder small { width: 100%; padding: 2px 12px 8px; color: #838389; background: #1b1b1b; font-size: 11px; }
#app-shell .beeftv-project-open { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 16px; color: #4b4b4b; background: #202020; }
#app-shell .beeftv-project-open:hover { background: #292929; }
#app-shell .beeftv-project-open svg { width: 44px; height: 44px; stroke-width: 1.4; }
#app-shell .beeftv-project-title { display: block; width: 100%; margin-top: 10px; overflow: hidden; padding: 0; border: 0; color: #f3f3f3; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
#app-shell .beeftv-project-item small { display: block; margin-top: 4px; color: #838389; font-size: 12px; }
#app-shell .beeftv-project-empty { grid-column: 1 / -1; padding: 50px 0; color: #838389; text-align: center; }
#app-shell.beeftv-editor-open { --sidebar-width: 0px; grid-template-columns: minmax(0, 1fr); }
#app-shell.beeftv-editor-open > .sidebar { display: none; }
#app-shell.beeftv-editor-open .main-column { grid-column: 1; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-toolbar { position: absolute; z-index: 25; top: 8px; left: 8px; right: 8px; display: flex; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"]:has(.canvas-shell:is(.show-chat, .show-inspector)) .canvas-toolbar { right: 394px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-toolbar-leading, #app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-toolbar-actions { min-height: 32px; padding: 3px 6px; border: 1px solid #2c2c2c; border-radius: 10px; background: #242424; box-shadow: 0 8px 22px #0005; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-toolbar-leading { gap: 8px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-home-back { display: flex; width: 43px; height: 26px; min-height: 0; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 0; border-radius: 6px; background: transparent; }
#app-shell.beeftv-editor-open #canvas-home-back .beeftv-logo-tile { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 4px; background: #f3f3f3; }
#app-shell.beeftv-editor-open #canvas-home-back img { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; filter: invert(1); }
#app-shell.beeftv-editor-open #canvas-home-back svg { width: 10px; height: 10px; opacity: .55; }
#app-shell.beeftv-editor-open #beeftv-editor-project-name { max-width: 180px; overflow: hidden; color: #f2f2f2; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-project-name { display: inline-flex; max-width: 140px; align-items: center; gap: 4px; padding: 0 1px; color: #a8a8a8; font-size: 12px; font-weight: 400; }
#app-shell.beeftv-editor-open #canvas-project-name svg { width: 11px; height: 11px; }
#app-shell.beeftv-editor-open #beeftv-editor-save-status { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #aaa; background: transparent; cursor: pointer; }
#app-shell.beeftv-editor-open #beeftv-editor-save-status.is-saved { color: #bfc0c2; }
#app-shell.beeftv-editor-open #beeftv-editor-save-status:hover { background: #343434; }
#app-shell.beeftv-editor-open #beeftv-editor-save-status svg { width: 14px; height: 14px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-library-toggle { display: none !important; }
#app-shell.beeftv-editor-open #canvas-selection-summary { display: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-toolbar-actions { gap: 3px; }
#app-shell.beeftv-editor-open #beeftv-canvas-assistant { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 10px; border: 1px solid #555; border-radius: 9px; color: #eee; background: #3a3a3a; font-size: 12px; }
#app-shell.beeftv-editor-open #beeftv-canvas-assistant svg { width: 15px; height: 15px; }
#app-shell.beeftv-editor-open #canvas-undo, #app-shell.beeftv-editor-open #canvas-redo { width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 6px; border: 0; background: transparent; }
#app-shell.beeftv-editor-open #canvas-undo svg, #app-shell.beeftv-editor-open #canvas-redo svg { width: 16px; height: 16px; }
#app-shell.beeftv-editor-open #run-workflow, #app-shell.beeftv-editor-open .canvas-toolbar-more { display: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-shell { border: 0; border-radius: 0; background: #111; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-stage { width: 100%; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-shell:is(.show-chat, .show-inspector) .canvas-stage { width: calc(100% - 380px); }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-workspace { border: 0; border-radius: 0; background-color: #121212; background-image: radial-gradient(circle, rgba(255,255,255,.08) .55px, transparent .8px); background-size: 24px 24px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-world { background-image: radial-gradient(circle, rgba(255,255,255,.075) .6px, transparent 1px); background-size: 24px 24px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-empty-state { top: 50%; display: flex; width: min(984px, calc(100% - 32px)); flex-direction: column; align-items: center; gap: 6px; padding: 96px 16px 80px; border: 0; color: #d6d6d6; background: transparent; box-shadow: none; pointer-events: none; user-select: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-stage.has-nodes .canvas-empty-state { display: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-empty-state > div { margin-top: 0; }
#app-shell.beeftv-editor-open .beeftv-empty-instruction { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; top: -8px; font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
#app-shell.beeftv-editor-open .beeftv-empty-instruction > span:last-child { color: #d6d6d6; font-size: inherit; }
#app-shell.beeftv-editor-open .beeftv-empty-instruction .beeftv-empty-separator { margin: 0 4px; opacity: .45; }
#app-shell.beeftv-editor-open .beeftv-empty-icon { position: relative; display: grid; width: 20px; height: 20px; place-items: center; }
#app-shell.beeftv-editor-open .beeftv-empty-icon [data-beeftv-icon="PlusCircle"] svg { width: 18px; height: 18px; opacity: .8; }
#app-shell.beeftv-editor-open .beeftv-empty-icon [data-beeftv-icon="MousePointer2"] { position: absolute; right: -4px; bottom: -4px; }
#app-shell.beeftv-editor-open .beeftv-empty-icon [data-beeftv-icon="MousePointer2"] svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.5; }
#app-shell.beeftv-editor-open #beeftv-canvas-empty-assistant { margin-top: -6px; padding: 4px 10px; border: 0; border-radius: 6px; color: #898989; background: transparent; cursor: pointer; font-size: 12px; pointer-events: auto; }
#app-shell.beeftv-editor-open #beeftv-canvas-empty-assistant:hover { color: #ccc; }
#app-shell.beeftv-editor-open #beeftv-canvas-empty-assistant span { margin-left: 4px; color: inherit; opacity: .7; font-size: inherit; }
#app-shell.beeftv-editor-open .beeftv-node-heading { display: flex; align-items: center; min-width: 0; gap: 9px; }
#app-shell.beeftv-editor-open .beeftv-node-icon { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: #c8c8cc; }
#app-shell.beeftv-editor-open .beeftv-node-icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
#app-shell.beeftv-editor-open .canvas-node > header > button { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; }
#app-shell.beeftv-editor-open .canvas-node > header > button svg { width: 16px; height: 16px; stroke-width: 1.8; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-side-panel { top: 0; right: 0; width: 380px; max-width: none; height: 100%; min-height: 0; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-chat-panel { height: 100%; padding: 0; border: 0; border-left: 1px solid #242424; border-radius: 0; background: #111; box-shadow: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-chat-heading { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 12px 24px; border-bottom: 1px solid #242424; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-chat-heading h3 { margin: 0 0 7px; color: #f2f2f2; font-size: 14px; font-weight: 600; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-chat-heading h3::first-letter { color: inherit; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-chat-heading small { display: block; max-width: 180px; overflow: hidden; color: #8e8e8e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#app-shell.beeftv-editor-open .beeftv-chat-heading-actions { display: flex; align-items: center; gap: 3px; }
#app-shell.beeftv-editor-open .beeftv-chat-heading-actions button { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #d8d8d8; background: transparent; cursor: pointer; }
#app-shell.beeftv-editor-open .beeftv-chat-heading-actions button:hover { background: #282828; }
#app-shell.beeftv-editor-open .beeftv-chat-heading-actions button svg { width: 16px; height: 16px; }
#app-shell.beeftv-editor-open .beeftv-chat-history-menu { position: absolute; z-index: 35; top: 62px; right: 44px; width: 240px; max-height: 260px; overflow: auto; padding: 5px; border: 1px solid #343434; border-radius: 10px; background: #232323; box-shadow: 0 18px 36px #0008; }
#app-shell.beeftv-editor-open .beeftv-chat-history-menu[hidden] { display: none; }
#app-shell.beeftv-editor-open .beeftv-chat-history-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 6px; color: #ddd; background: transparent; text-align: left; cursor: pointer; }
#app-shell.beeftv-editor-open .beeftv-chat-history-menu button:hover, #app-shell.beeftv-editor-open .beeftv-chat-history-menu button[aria-current="true"] { background: #373737; }
#app-shell.beeftv-editor-open .beeftv-chat-history-menu svg { width: 15px; height: 15px; flex: 0 0 15px; }
#app-shell.beeftv-editor-open .beeftv-chat-history-menu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#app-shell.beeftv-editor-open .canvas-panel-close svg { display: block; width: 16px; height: 16px; stroke-width: 1.8; }
#app-shell.beeftv-editor-open .canvas-composer-window-actions svg, #app-shell.beeftv-editor-open .canvas-composer-icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-chat-messages { flex: 1; min-height: 0; margin: 0; padding: 12px 24px; border: 0; border-radius: 0; background: #111; }
#app-shell.beeftv-editor-open .beeftv-chat-empty { display: flex; flex-direction: column; align-items: center; margin-top: 28vh; color: #aaa; text-align: center; }
#app-shell.beeftv-editor-open .beeftv-chat-empty svg { width: 26px; height: 26px; color: #999; }
#app-shell.beeftv-editor-open .beeftv-chat-empty h3 { margin: 14px 0 3px; color: #e8e8e8; font-size: 14px; font-weight: 500; }
#app-shell.beeftv-editor-open .beeftv-chat-empty p { margin: 0; font-size: 12px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-chat-form { display: flex; flex-direction: column; min-height: 164px; margin: 16px; padding: 13px 14px; border: 1px solid #2a2a2a; border-radius: 16px; background: #191919; }
#app-shell.beeftv-editor-open .beeftv-chat-scope { align-self: flex-start; padding: 4px 7px; border: 1px solid #303030; border-radius: 7px; color: #bbb; font-size: 11px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-chat-input { flex: 1; min-height: 58px; margin: 6px 0 0; padding: 4px 1px; border: 0; outline: 0; color: #e8e8e8; background: transparent; font-size: 13px; line-height: 21px; resize: none; box-shadow: none; }
#app-shell.beeftv-editor-open #canvas-chat-form .canvas-panel-actions { align-items: center; margin-top: auto; }
#app-shell.beeftv-editor-open #canvas-chat-insert { display: none; }
#app-shell.beeftv-editor-open .beeftv-chat-model-label { flex: 1; color: #777; font-size: 12px; }
#app-shell.beeftv-editor-open .beeftv-chat-model-select { flex: 1; min-width: 0; max-width: 220px; height: 30px; padding: 3px 7px; overflow: hidden; border: 1px solid #363636; border-radius: 7px; outline: 0; color: #bdbdbd; background: #222; font-size: 11px; text-overflow: ellipsis; }
#app-shell.beeftv-editor-open .beeftv-chat-model-select:focus { border-color: #888; }
#app-shell.beeftv-editor-open .beeftv-chat-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid #623a3f; border-radius: 9px; color: #ffb6b6; background: #2c1d20; font-size: 12px; }
#app-shell.beeftv-editor-open .beeftv-chat-error button { flex: 0 0 auto; padding: 5px 10px; border: 1px solid #8f6065; border-radius: 5px; color: #fff; background: transparent; cursor: pointer; }
#app-shell.beeftv-editor-open .beeftv-chat-pending .chat-typing { display: inline-flex; margin: 8px 0; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-chat-send { display: grid; width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #111; background: #f1f1f1; font-size: 10px; }
#app-shell.beeftv-editor-open #canvas-chat-send svg { width: 16px; height: 16px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-floating-tools { bottom: 16px; left: 50%; transform: translateX(-50%); border-color: #333; border-radius: 13px; background: #252525; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-floating-tools button svg { width: 18px; height: 18px; stroke-width: 1.8; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-floating-tools [data-canvas-tool="add"] { color: #191919; background: #f4f4f4; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-floating-tools button.active { color: #eee; background: #343434; box-shadow: none; }
#app-shell.beeftv-editor-open #canvas-characters-fab, #app-shell.beeftv-editor-open #canvas-tutorial-fab { display: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-bottom-status { bottom: 18px; left: 20px; color: #aaa; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-bottom-status svg { width: 16px; height: 16px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-node-count { display: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-bottom-status button { width: 32px; height: 32px; color: #bbb; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-bottom-status button:hover, #app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-bottom-status button[aria-pressed="true"] { color: #e4e4e4; background: #252525; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #beeftv-canvas-asset-tray { display: flex; width: auto; align-items: center; gap: 6px; margin-right: 12px; padding: 0 3px; font-size: 12px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #beeftv-canvas-asset-tray svg { width: 16px; height: 16px; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-zoom-menu { width: auto; min-width: 48px; }
#app-shell.beeftv-editor-open .beeftv-chat-heading-actions #canvas-chat-close { color: #d8d8d8 !important; background: transparent !important; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] #canvas-minimap { display: none; }

/* BeefTV node presentation: title floats above a plain media/text card. */
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-node.beeftv-native-node {
  display: block; min-width: 180px; min-height: 140px; border: 0; border-radius: 0;
  color: #f1f1f1; background: transparent; box-shadow: none;
}
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-node.beeftv-native-node.selected { box-shadow: none; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-node.beeftv-native-node > .beeftv-node-external-header {
  position: absolute; top: -27px; left: 0; z-index: 11; display: flex; width: min(100%, 260px);
  height: 24px; min-height: 24px; align-items: center; justify-content: flex-start; gap: 5px;
  padding: 0 2px; overflow: hidden; border: 0; border-radius: 0;
  color: #a0a0a0; background: transparent; font-size: 12px; font-weight: 500;
  white-space: nowrap; cursor: move;
}
#app-shell.beeftv-editor-open .beeftv-node-title-icon { display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; }
#app-shell.beeftv-editor-open .beeftv-node-title-icon svg { width: 13px; height: 13px; stroke-width: 1.8; }
#app-shell.beeftv-editor-open .beeftv-node-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node > header button {
  width: 20px; height: 20px; flex: 0 0 20px; margin-left: auto; padding: 3px;
  border-radius: 5px; color: #a0a0a0; background: transparent;
}
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node > header button svg { width: 14px; height: 14px; }
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node > header button:hover { color: white; background: #333; }
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-node.beeftv-native-node > .beeftv-node-shell {
  position: relative; display: flex; width: 100%; height: 100%; align-items: center;
  justify-content: center; box-sizing: border-box; padding: 0 !important; overflow: hidden;
  border: 1px solid transparent; border-radius: 12px; background: #262626;
  box-shadow: 0 12px 24px #0005;
}
#app-shell.beeftv-editor-open [data-view-panel="canvas"] .canvas-node.beeftv-native-node.selected > .beeftv-node-shell {
  border-color: #b0b0b0; box-shadow: 0 0 0 1px #b0b0b055, 0 12px 24px #0007;
}
#app-shell.beeftv-editor-open .beeftv-node-shell[data-beeftv-kind="image"],
#app-shell.beeftv-editor-open .beeftv-node-shell[data-beeftv-kind="video"] { background: #242424; }
#app-shell.beeftv-editor-open .beeftv-node-media { display: block; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; background: #171717; user-select: none; }
#app-shell.beeftv-editor-open .beeftv-node-text-editor,
#app-shell.beeftv-editor-open .beeftv-node-text-content {
  display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 40px 16px 16px; overflow: auto; border: 0; border-radius: 12px;
  color: #f2f2f2; background: transparent; font: 14px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; resize: none; user-select: text;
}
#app-shell.beeftv-editor-open .beeftv-node-text-editor:hover,
#app-shell.beeftv-editor-open .beeftv-node-text-editor:focus { border: 0; color: #fff; background: transparent; box-shadow: none; }
#app-shell.beeftv-editor-open .beeftv-node-empty-text { display: grid; gap: 6px; width: 56px; opacity: .3; }
#app-shell.beeftv-editor-open .beeftv-node-empty-text span { height: 4px; border-radius: 5px; background: #eee; }
#app-shell.beeftv-editor-open .beeftv-node-empty-media { display: grid; place-items: center; color: #999; opacity: .3; }
#app-shell.beeftv-editor-open .beeftv-node-empty-media svg { width: 56px; height: 56px; stroke-width: 1.35; }
#app-shell.beeftv-editor-open .beeftv-node-audio-player { display: grid; width: 100%; justify-items: center; gap: 16px; padding: 20px; color: #aaa; }
#app-shell.beeftv-editor-open .beeftv-node-audio-player > svg { width: 32px; height: 32px; }
#app-shell.beeftv-editor-open .beeftv-node-audio-player audio { width: 100%; }
#app-shell.beeftv-editor-open .beeftv-node-config, #app-shell.beeftv-editor-open .beeftv-node-director { display: grid; justify-items: center; gap: 8px; max-width: 90%; color: #aaa; font-size: 12px; text-align: center; }
#app-shell.beeftv-editor-open .beeftv-node-config svg, #app-shell.beeftv-editor-open .beeftv-node-director svg { width: 26px; height: 26px; }
#app-shell.beeftv-editor-open .beeftv-node-config strong { max-width: 100%; overflow: hidden; color: #ddd; text-overflow: ellipsis; white-space: nowrap; }
#app-shell.beeftv-editor-open .beeftv-node-state { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 8px; border-radius: 20px; background: #343434; color: #e3e3e3; font-size: 11px; }
#app-shell.beeftv-editor-open .beeftv-node-state.error { background: #4c282e; color: #ffabad; }
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node > .beeftv-node-quick-actions {
  position: absolute; z-index: 12; right: 0; bottom: -40px; display: none; gap: 2px;
  padding: 4px !important; border: 1px solid #3a3a3a; border-radius: 9px; background: #262626; box-shadow: 0 8px 24px #0008;
}
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node.selected > .beeftv-node-quick-actions { display: flex; }
#app-shell.beeftv-editor-open .beeftv-node-quick-actions button { display: grid; width: 26px; height: 26px; place-items: center; padding: 4px; border: 0; border-radius: 5px; color: #c9c9c9; background: transparent; }
#app-shell.beeftv-editor-open .beeftv-node-quick-actions button:hover { background: #3c3c3c; color: #fff; }
#app-shell.beeftv-editor-open .beeftv-node-quick-actions svg { width: 16px; height: 16px; }
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node .canvas-port { width: 11px; height: 11px; border: 2px solid #b9b9b9; background: #232323; box-shadow: none; opacity: .28; }
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node:hover .canvas-port, #app-shell.beeftv-editor-open .canvas-node.beeftv-native-node.selected .canvas-port { opacity: 1; }
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node .canvas-resize-handle { width: 22px; height: 22px; opacity: 0; background: transparent; }
#app-shell.beeftv-editor-open .canvas-node.beeftv-native-node:hover .canvas-resize-handle, #app-shell.beeftv-editor-open .canvas-node.beeftv-native-node.selected .canvas-resize-handle { opacity: 1; }