body.spene-canvas-open { overflow: hidden !important; }
.spene-canvas-modal { position: fixed; inset: 0; z-index: 9000; background: #080b0c; color: #f3f7f5; font-family: inherit; }
.spene-canvas-workspace { width: 100%; height: 100%; display: grid; grid-template-columns: 76px minmax(0,1fr); grid-template-rows: 64px minmax(0,1fr); background: #0a0d0e; }
.spene-canvas-topbar { grid-column: 1 / -1; z-index: 20; display: grid; grid-template-columns: 240px minmax(340px,1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid #242b29; padding: 0 14px; background: rgba(14,18,19,.96); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.spene-canvas-brand { display: flex; align-items: center; gap: 10px; }
.spene-canvas-brand > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #303735; border-radius: 10px; background: #171c1d; color: #aab4b0; cursor: pointer; }
.spene-canvas-brand > button:hover { border-color: #9dff62; color: #9dff62; }
.spene-canvas-brand > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #9dff62; color: #13210d; }
.spene-canvas-brand svg { width: 18px; height: 18px; }
.spene-canvas-brand b,.spene-canvas-brand small { display: block; }
.spene-canvas-brand b { font-size: 14px; }
.spene-canvas-brand small { margin-top: 2px; color: #7d8985; font-size: 10px; }
.spene-canvas-brand small[data-tone="error"] { color: #ff8194; }
.spene-canvas-file { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.spene-canvas-file select,.spene-canvas-file input,.spene-canvas-file button,.spene-canvas-actions button { height: 36px; border: 1px solid #303735; border-radius: 10px; background: #171c1d; color: #e6ece9; font: inherit; }
.spene-canvas-file select { width: 150px; padding: 0 28px 0 10px; font-size: 11px; }
.spene-canvas-file input { width: min(300px,38vw); padding: 0 12px; font-size: 12px; font-weight: 750; text-align: center; }
.spene-canvas-file button { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; color: #abb5b0; font-size: 10px; cursor: pointer; }
.spene-canvas-file button svg,.spene-canvas-actions svg { width: 14px; height: 14px; }
.spene-canvas-actions { display: flex; gap: 6px; }
.spene-canvas-actions button { width: 36px; display: grid; place-items: center; cursor: pointer; }
.spene-canvas-actions button:hover,.spene-canvas-file button:hover { border-color: #65716c; color: #fff; }
.spene-canvas-actions button:disabled { opacity: .32; cursor: default; }
.spene-canvas-tools { z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 7px; border-right: 1px solid #242b29; padding: 13px 8px; background: #101415; }
.spene-canvas-tools button { width: 58px; min-height: 55px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #8c9893; font: inherit; cursor: pointer; }
.spene-canvas-tools button:hover { border-color: #303936; background: #181e1f; color: #fff; }
.spene-canvas-tools button.active { border-color: #4c7138; background: #1c2b18; color: #9dff62; }
.spene-canvas-tools button:disabled { opacity: .3; cursor: not-allowed; }
.is-read-only [data-canvas-delete],.is-read-only [data-canvas-branch] { display: none !important; }
.is-read-only .spene-canvas-node-body textarea { color: #9ca6a2; pointer-events: none; }
.spene-canvas-tools svg { width: 17px; height: 17px; }
.spene-canvas-tools span { font-size: 9px; }
.spene-canvas-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; background-color: #090c0d; background-image: radial-gradient(circle,#303735 1px,transparent 1px); background-size: 22px 22px; outline: none; }
.spene-canvas-viewport[data-mode="select"] { cursor: default; }
.spene-canvas-viewport.is-panning { cursor: grabbing; }
.spene-canvas-world,.spene-canvas-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; will-change: transform; }
.spene-canvas-world { z-index: 4; }
.spene-canvas-edges { z-index: 2; width: 24000px; height: 24000px; overflow: visible; pointer-events: none; }
.spene-canvas-edges path { fill: none; stroke: #4f5b57; stroke-width: 2; vector-effect: non-scaling-stroke; }
.spene-canvas-node { position: absolute; display: grid; grid-template-rows: 42px minmax(0,1fr) 38px; border: 1px solid #303836; border-radius: 14px; overflow: visible; background: #151a1b; box-shadow: 0 18px 45px rgba(0,0,0,.32); cursor: default; user-select: none; }
.spene-canvas-node.selected { border-color: #9dff62; box-shadow: 0 0 0 2px rgba(157,255,98,.16),0 20px 50px rgba(0,0,0,.42); }
.spene-canvas-node.source { border-color: #347e83; }
.spene-canvas-node.result { border-color: #625d8b; }
.spene-canvas-node.prompt { border-color: #8b713f; }
.spene-canvas-node header { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) 26px; align-items: center; gap: 7px; border-bottom: 1px solid #29302e; padding: 0 8px 0 10px; border-radius: 13px 13px 0 0; background: #1a2021; cursor: grab; }
.spene-canvas-node header:active { cursor: grabbing; }
.spene-canvas-node header span { border-radius: 999px; padding: 3px 6px; background: #26302e; color: #9dff62; font-size: 7px; font-weight: 850; white-space: nowrap; }
.spene-canvas-node header b { overflow: hidden; color: #eef3f1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.spene-canvas-node header button { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #707b77; cursor: pointer; }
.spene-canvas-node header button:hover { background: #2a3230; color: #fff; }
.spene-canvas-node header svg { width: 12px; height: 12px; }
.spene-canvas-node-body { min-width: 0; min-height: 0; overflow: hidden; background: #0e1213; }
.spene-canvas-node-body img { width: 100%; height: 100%; display: block; object-fit: contain; background: repeating-conic-gradient(#181d1e 0 25%,#121617 0 50%) 50% / 14px 14px; }
.spene-canvas-node-body textarea { width: 100%; height: 100%; resize: none; border: 0; padding: 13px; background: #111617; color: #dce4e0; font: inherit; font-size: 11px; line-height: 1.55; outline: none; user-select: text; }
.spene-canvas-node-placeholder { height: 100%; display: grid; place-items: center; color: #59635f; }
.spene-canvas-node-placeholder svg { width: 28px; height: 28px; }
.spene-canvas-node footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; color: #7d8884; font-size: 8px; }
.spene-canvas-node footer button { border: 0; border-radius: 7px; padding: 5px 8px; background: #25302c; color: #b9c4bf; font: inherit; font-size: 8px; cursor: pointer; }
.spene-canvas-node footer button:hover { background: #9dff62; color: #14210e; }
.spene-canvas-node footer > div { display: flex; gap: 5px; }
.spene-canvas-port { position: absolute; top: 50%; width: 10px; height: 10px; transform: translateY(-50%); border: 2px solid #0c0f10; border-radius: 50%; background: #66716d; }
.spene-canvas-port.in { left: -6px; }.spene-canvas-port.out { right: -6px; background: #9dff62; }
.spene-canvas-empty { position: absolute; left: 50%; top: 42%; z-index: 3; width: min(460px,70%); transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.spene-canvas-empty[hidden] { display: none; }
.spene-canvas-empty > svg { width: 40px; height: 40px; color: #52605b; }
.spene-canvas-empty b,.spene-canvas-empty span { display: block; }
.spene-canvas-empty b { margin-top: 14px; font-size: 16px; }
.spene-canvas-empty span { margin-top: 8px; color: #707c77; font-size: 11px; line-height: 1.6; }
.spene-canvas-empty button { margin-top: 16px; border: 0; border-radius: 10px; padding: 10px 14px; background: #9dff62; color: #17220f; font: inherit; font-size: 10px; font-weight: 800; pointer-events: auto; cursor: pointer; }
.spene-canvas-zoom { position: absolute; right: 16px; bottom: 118px; z-index: 12; display: flex; align-items: center; gap: 4px; border: 1px solid #303735; border-radius: 10px; padding: 4px; background: rgba(19,24,25,.92); }
.spene-canvas-zoom button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #a8b2ae; cursor: pointer; }
.spene-canvas-zoom button:hover { background: #28302e; color: #fff; }
.spene-canvas-zoom svg { width: 13px; height: 13px; }
.spene-canvas-zoom span { width: 44px; color: #84908b; font-size: 9px; text-align: center; }
.spene-canvas-composer-panel { position: absolute; left: calc(50% + 38px); bottom: 18px; z-index: 25; width: min(860px,calc(100vw - 150px)); min-height: 86px; display: grid; grid-template-columns: 170px minmax(0,1fr) 92px; gap: 10px; align-items: stretch; transform: translateX(-50%); border: 1px solid #37403d; border-radius: 18px; padding: 9px; background: rgba(22,27,28,.96); box-shadow: 0 24px 65px rgba(0,0,0,.46); backdrop-filter: blur(18px); }
.spene-canvas-selection { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid #2c3432; border-radius: 11px; padding: 8px; background: #111617; }
.spene-canvas-selection > svg { width: 18px; height: 18px; color: #9dff62; }
.spene-canvas-selection b,.spene-canvas-selection small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spene-canvas-selection b { color: #dbe3df; font-size: 9px; }.spene-canvas-selection small { margin-top: 3px; color: #707c77; font-size: 7px; }
.spene-canvas-composer-main { min-width: 0; display: grid; grid-template-rows: minmax(40px,1fr) 28px; gap: 6px; }
.spene-canvas-composer-main textarea { width: 100%; resize: none; border: 0; padding: 5px 8px; background: transparent; color: #eef3f1; font: inherit; font-size: 11px; line-height: 1.45; outline: none; }
.spene-canvas-composer-main textarea::placeholder { color: #6e7975; }
.spene-canvas-composer-main > div { display: flex; gap: 6px; }
.spene-canvas-composer-main select,.spene-canvas-composer-main > div > button { min-width: 0; height: 30px; border: 1px solid #303735; border-radius: 8px; padding: 0 25px 0 9px; background: #111617; color: #a9b3af; font: inherit; font-size: 10px; }
.spene-canvas-composer-main > div > button { display: inline-flex; align-items: center; gap: 5px; padding-right: 9px; cursor: pointer; }
.spene-canvas-composer-main > div > button:hover { border-color: #607069; color: #fff; }
.spene-canvas-composer-main > div > button svg { width: 13px; height: 13px; }
.spene-canvas-composer-main select:nth-of-type(1) { width: 105px; }.spene-canvas-composer-main select:nth-of-type(2) { width: 145px; }.spene-canvas-composer-main select:nth-of-type(3) { width: 145px; }.spene-canvas-composer-main select:nth-of-type(4) { width: 70px; }
.spene-canvas-send { display: grid; place-items: center; align-content: center; gap: 6px; border: 0; border-radius: 13px; background: #9dff62; color: #14210e; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.spene-canvas-send:hover { background: #b5ff88; }.spene-canvas-send:disabled { opacity: .5; cursor: wait; }
.spene-canvas-send svg { width: 18px; height: 18px; }
.spene-canvas-toast { position: fixed; right: 20px; top: 82px; z-index: 9100; max-width: 420px; border: 1px solid #43504b; border-radius: 11px; padding: 11px 14px; background: #19201e; color: #ecf2ef; box-shadow: 0 16px 44px rgba(0,0,0,.35); font-size: 11px; }
.spene-canvas-toast.error { border-color: #8e4855; color: #ffd8df; }
.spene-canvas-navigation { position: fixed; left: 0; top: 64px; bottom: 0; z-index: 50; width: 228px; transform: translateX(-105%); border-right: 1px solid #2b3331; padding: 18px 14px; background: rgba(15,19,20,.98); box-shadow: 26px 0 70px rgba(0,0,0,.45); transition: transform .2s ease; }
.nav-open .spene-canvas-navigation { transform: translateX(0); }
.spene-canvas-navigation > div { display: grid; grid-template-columns: 34px 1fr 32px; align-items: center; gap: 9px; }
.spene-canvas-navigation > div > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #9dff62; color: #14210e; }
.spene-canvas-navigation > div > span svg { width: 17px; }.spene-canvas-navigation > div > b { font-size: 14px; letter-spacing: .06em; }
.spene-canvas-navigation > div > button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #808b86; cursor: pointer; }
.spene-canvas-navigation > small { display: block; margin: 7px 0 18px 43px; color: #65716c; font-size: 10px; }
.spene-canvas-navigation nav { display: grid; gap: 5px; }.spene-canvas-navigation nav hr { width: 100%; border: 0; border-top: 1px solid #28302e; margin: 8px 0; }
.spene-canvas-navigation nav button { height: 42px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 10px; padding: 0 12px; background: transparent; color: #9da8a3; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.spene-canvas-navigation nav button svg { width: 16px; height: 16px; }.spene-canvas-navigation nav button:hover { background: #1a201f; color: #fff; }.spene-canvas-navigation nav button.active { border-color: #426135; background: #1c2919; color: #9dff62; }
.spene-canvas-nav-scrim,.spene-prompt-scrim { position: fixed; inset: 64px 0 0; z-index: 45; display: none; border: 0; background: rgba(0,0,0,.38); }
.nav-open .spene-canvas-nav-scrim { display: block; }
.spene-canvas-asset-library { position: fixed; left: 50%; top: 50%; z-index: 84; width: min(980px,calc(100vw - 40px)); max-height: min(720px,calc(100vh - 60px)); display: none; transform: translate(-50%,-50%); overflow: hidden; border: 1px solid #3b4441; border-radius: 20px; background: #171c1d; box-shadow: 0 34px 100px rgba(0,0,0,.7); }
.asset-library-open .spene-canvas-asset-library { display: block; }
.spene-canvas-asset-scrim { position: fixed; inset: 0; z-index: 82; display: none; border: 0; background: rgba(3,7,8,.66); backdrop-filter: blur(10px); }
.asset-library-open .spene-canvas-asset-scrim { display: block; }
.spene-canvas-asset-library > header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #303836; padding: 0 18px; background: linear-gradient(120deg,#1b2422,#191f25); }
.spene-canvas-asset-library > header b,.spene-canvas-asset-library > header small { display: block; }.spene-canvas-asset-library > header b { font-size: 16px; }.spene-canvas-asset-library > header small { margin-top: 4px; color: #7d8985; font-size: 10px; }
.spene-canvas-asset-library > header > div:last-child { display: flex; align-items: center; gap: 9px; }.spene-canvas-asset-library > header span { border-radius: 999px; padding: 5px 9px; background: #26302d; color: #a9c79a; font-size: 9px; font-weight: 800; }
.spene-canvas-asset-library > header button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #39413f; border-radius: 10px; background: #222829; color: #aeb8b4; cursor: pointer; }.spene-canvas-asset-library > header button svg { width: 15px; }
.spene-canvas-asset-body { display: grid; grid-template-columns: minmax(0,1.7fr) 300px; min-height: 500px; }
.spene-canvas-asset-browse { min-width: 0; border-right: 1px solid #303836; padding: 16px; }
.spene-canvas-asset-browse > label { height: 40px; display: flex; align-items: center; gap: 8px; border: 1px solid #323a38; border-radius: 10px; padding: 0 11px; background: #101516; color: #6f7b76; }.spene-canvas-asset-browse > label svg { width: 15px; }.spene-canvas-asset-browse > label input { flex: 1; border: 0; outline: 0; background: transparent; color: #edf3f0; font: inherit; font-size: 11px; }
.spene-canvas-asset-browse > div { max-height: 515px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; overflow: auto; margin-top: 12px; }
.spene-canvas-asset-card { position: relative; min-width: 0; display: grid; gap: 7px; border: 1px solid #303937; border-radius: 12px; padding: 7px; background: #222829; color: #e7eeeb; font: inherit; text-align: left; cursor: pointer; }.spene-canvas-asset-card:hover { border-color: #67934f; background: #273025; }
.spene-canvas-asset-card > span { position: relative; aspect-ratio: 1; display: block; overflow: hidden; border-radius: 9px; background: #f5f7f6; }.spene-canvas-asset-card img { width: 100%; height: 100%; display: block; object-fit: contain; }.spene-canvas-asset-card em { position: absolute; right: 6px; bottom: 6px; border-radius: 999px; padding: 3px 6px; background: #dff6ea; color: #25785a; font-size: 7px; font-style: normal; font-weight: 850; }.spene-canvas-asset-card em[data-status="review"] { background: #fff1d2; color: #96671a; }
.spene-canvas-asset-card b,.spene-canvas-asset-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.spene-canvas-asset-card b { font-size: 10px; }.spene-canvas-asset-card small { color: #84908b; font-size: 8px; }.spene-canvas-asset-card > svg { position: absolute; right: 11px; bottom: 10px; width: 15px; color: #9dff62; }
.spene-canvas-asset-empty { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 7px; color: #84908b; text-align: center; }.spene-canvas-asset-empty svg { width: 30px; }.spene-canvas-asset-empty b { color: #cdd6d2; font-size: 12px; }.spene-canvas-asset-empty span { font-size: 10px; }
.spene-canvas-asset-upload { display: flex; flex-direction: column; padding: 18px; background: #14191a; }.spene-canvas-asset-upload > b { font-size: 14px; }.spene-canvas-asset-upload > small { margin: 5px 0 17px; color: #77837e; font-size: 10px; line-height: 1.55; }.spene-canvas-asset-upload label { display: grid; gap: 6px; margin-bottom: 11px; color: #a9b3af; font-size: 9px; font-weight: 750; }.spene-canvas-asset-upload input { height: 38px; border: 1px solid #353e3b; border-radius: 9px; padding: 0 10px; background: #0f1415; color: #ecf2ef; font: inherit; font-size: 10px; outline: 0; }
.spene-canvas-asset-upload label.file input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }.spene-canvas-asset-upload label.file span { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #48534f; border-radius: 11px; background: #101516; color: #aab5b0; cursor: pointer; }.spene-canvas-asset-upload label.file span:hover { border-color: #79ab60; color: #caffaa; }.spene-canvas-asset-upload label.file svg { width: 18px; }
.spene-canvas-asset-upload > button { height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; margin-top: auto; background: #9dff62; color: #14210e; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }.spene-canvas-asset-upload > button:disabled { opacity: .5; cursor: wait; }.spene-canvas-asset-upload > button svg { width: 15px; }
.spene-prompt-library { position: fixed; left: 50%; top: 50%; z-index: 80; width: min(900px,calc(100vw - 40px)); max-height: min(680px,calc(100vh - 70px)); display: none; transform: translate(-50%,-50%); overflow: hidden; border: 1px solid #363e3c; border-radius: 18px; background: #171b1d; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.prompt-library-open .spene-prompt-library { display: block; }.prompt-library-open .spene-prompt-scrim { display: block; inset: 0; z-index: 75; }
.spene-prompt-library > header { height: 68px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #303637; padding: 0 18px; }
.spene-prompt-library > header b,.spene-prompt-library > header small { display: block; }.spene-prompt-library > header b { font-size: 15px; }.spene-prompt-library > header small { margin-top: 4px; color: #77827e; font-size: 10px; }
.spene-prompt-library > header button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #333b39; border-radius: 9px; background: #202527; color: #aab4b0; cursor: pointer; }
.spene-prompt-library-body { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(270px,1fr); min-height: 430px; }
.spene-prompt-browse,.spene-prompt-create { padding: 16px; }.spene-prompt-browse { border-right: 1px solid #303637; }
.spene-prompt-browse > label { height: 38px; display: flex; align-items: center; gap: 8px; border: 1px solid #303638; border-radius: 10px; padding: 0 11px; background: #111516; color: #6f7a76; }
.spene-prompt-browse > label svg { width: 15px; }.spene-prompt-browse > label input { flex: 1; border: 0; outline: 0; background: transparent; color: #eef2f0; font: inherit; font-size: 11px; }
.spene-prompt-browse > div { max-height: 480px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; overflow: auto; margin-top: 12px; }
.spene-prompt-card { overflow: hidden; border: 1px solid #303638; border-radius: 11px; background: #23282b; color: #dce3e0; }
.spene-prompt-card:hover { border-color: #70945b; background: #283029; }
.spene-prompt-use { min-height: 100px; width: 100%; display: block; border: 0; padding: 11px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.spene-prompt-use > span { display: inline-block; border-radius: 999px; padding: 2px 6px; background: #394039; color: #a8c79a; font-size: 8px; }.spene-prompt-use > b,.spene-prompt-use > small { display: block; }.spene-prompt-use > b { margin-top: 7px; font-size: 12px; }.spene-prompt-use > small { margin-top: 5px; overflow: hidden; color: #8f9995; font-size: 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.spene-prompt-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 0 9px 9px; }.spene-prompt-actions button { border: 0; border-radius: 7px; padding: 5px 8px; background: #33412e; color: #b8db9e; font: inherit; font-size: 8px; cursor: pointer; }.spene-prompt-actions button:disabled { cursor: default; opacity: .7; }.spene-prompt-actions .remove { background: #34292c; color: #d9a9b2; }
.spene-prompt-review { display: grid; grid-template-columns: 1fr auto auto; gap: 5px; border-top: 1px solid #343b39; padding: 8px; }.spene-prompt-review input { min-width: 0; border: 1px solid #3b4441; border-radius: 7px; padding: 6px 7px; background: #171b1c; color: #e6ece9; font: inherit; font-size: 9px; outline: none; }.spene-prompt-review button { border: 0; border-radius: 7px; padding: 0 8px; background: #9dff62; color: #14210e; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }.spene-prompt-review button.reject { background: #4a3034; color: #ffc1ca; }
.spene-prompt-create { display: flex; flex-direction: column; }.spene-prompt-create > b { font-size: 13px; }.spene-prompt-create > small { margin: 5px 0 14px; color: #727d79; font-size: 10px; }.spene-prompt-create input,.spene-prompt-create textarea { border: 1px solid #343b3a; border-radius: 9px; padding: 10px; background: #121617; color: #edf2ef; font: inherit; font-size: 11px; outline: none; }.spene-prompt-create textarea { flex: 1; min-height: 190px; resize: none; margin-top: 9px; line-height: 1.55; }.spene-prompt-create > button { height: 40px; border: 0; border-radius: 10px; margin-top: 10px; background: #9dff62; color: #14210e; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.spene-prompt-empty { grid-column: 1 / -1; padding: 50px 0; color: #77827e; font-size: 11px; text-align: center; }
@media (max-width: 900px) {
  .spene-canvas-workspace { grid-template-columns: 62px minmax(0,1fr); }
  .spene-canvas-topbar { grid-template-columns: 170px minmax(0,1fr) auto; }
  .spene-canvas-file select { display: none; }.spene-canvas-file input { width: 220px; }
  .spene-canvas-composer-panel { left: calc(50% + 31px); width: calc(100vw - 90px); grid-template-columns: minmax(0,1fr) 76px; }
  .spene-canvas-selection { display: none; }
}
@media (max-width: 620px) {
  .spene-canvas-workspace { grid-template-columns: 1fr; grid-template-rows: 56px minmax(0,1fr); }
  .spene-canvas-tools { position: absolute; left: 8px; top: 68px; z-index: 30; border: 1px solid #2f3734; border-radius: 13px; padding: 5px; }
  .spene-canvas-tools button { width: 44px; min-height: 42px; }.spene-canvas-tools button span { display: none; }
  .spene-canvas-topbar { grid-template-columns: 1fr auto; padding: 0 8px; }.spene-canvas-file { display: none; }
  .spene-canvas-brand > span { width: 32px; height: 32px; }.spene-canvas-actions button { width: 32px; height: 32px; }
  .spene-canvas-composer-panel { left: 8px; right: 8px; bottom: 8px; width: auto; transform: none; grid-template-columns: minmax(0,1fr) 58px; }
  .spene-canvas-send span { display: none; }.spene-canvas-composer-main select:nth-child(2),.spene-canvas-composer-main select:last-child { width: 112px; }
  .spene-prompt-library-body { grid-template-columns: 1fr; overflow: auto; max-height: calc(100vh - 150px); }.spene-prompt-browse { border-right: 0; border-bottom: 1px solid #303637; }.spene-prompt-browse > div { grid-template-columns: 1fr; max-height: 280px; }
  .spene-canvas-asset-body { grid-template-columns: 1fr; overflow: auto; max-height: calc(100vh - 140px); }.spene-canvas-asset-browse { border-right: 0; border-bottom: 1px solid #303836; }.spene-canvas-asset-browse > div { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 300px; }
}

/* 星帮尼公司画布使用轻色创意工作区；深色只保留为节点选中和操作反馈，不让画布像外接工具。 */
.spene-canvas-modal { background: #edf4f2; color: #20332f; }
.spene-canvas-workspace { background: #edf4f2; }
.spene-canvas-topbar { border-color: #dbe5e1; background: rgba(255,255,255,.97); box-shadow: 0 9px 28px rgba(35,77,69,.08); }
.spene-canvas-brand > button,.spene-canvas-file select,.spene-canvas-file input,.spene-canvas-file button,.spene-canvas-actions button { border-color: #d9e3df; background: #f7faf9; color: #435650; }
.spene-canvas-brand > button:hover,.spene-canvas-actions button:hover,.spene-canvas-file button:hover { border-color: #88cdbf; color: #187c70; }
.spene-canvas-brand > span { background: linear-gradient(145deg,#83e6cf,#c7ff89); color: #17433a; }
.spene-canvas-brand b { color: #1e342f; }.spene-canvas-brand small { color: #7a8985; }
.spene-canvas-tools { border-color: #dbe5e1; background: #f8fbfa; }
.spene-canvas-tools button { color: #71827d; }.spene-canvas-tools button:hover { border-color: #d6e5e0; background: #edf5f2; color: #24443d; }.spene-canvas-tools button.active { border-color: #8ed4c5; background: #e6f8f3; color: #137c70; }
.spene-canvas-viewport { background-color: #f1f6f4; background-image: radial-gradient(circle,#c7d5d1 1px,transparent 1px); }
.spene-canvas-edges path { stroke: #9ab2ac; }
.spene-canvas-empty > svg { color: #91aaa4; }.spene-canvas-empty b { color: #243a35; }.spene-canvas-empty span { color: #7a8b86; }.spene-canvas-empty button { background: linear-gradient(135deg,#32bcae,#86dd9b); color: #fff; box-shadow: 0 12px 28px rgba(42,171,153,.2); }
.spene-canvas-node { border-color: #d5e1dd; background: #fff; box-shadow: 0 18px 42px rgba(31,77,68,.13); }.spene-canvas-node.selected { border-color: #28b6a7; box-shadow: 0 0 0 3px rgba(40,182,167,.13),0 20px 48px rgba(31,77,68,.16); }.spene-canvas-node.source { border-color: #55bdc4; }.spene-canvas-node.result { border-color: #8f8bda; }.spene-canvas-node.prompt { border-color: #e0b85f; }
.spene-canvas-node header { border-color: #e1e9e6; background: #f7faf9; }.spene-canvas-node header span { background: #e3f6f1; color: #147b70; }.spene-canvas-node header b { color: #253a35; }.spene-canvas-node header button { color: #8a9994; }.spene-canvas-node header button:hover { background: #e7efec; color: #304b44; }
.spene-canvas-node-body { background: #f4f8f6; }.spene-canvas-node-body img { background: repeating-conic-gradient(#f5f8f7 0 25%,#eaf0ee 0 50%) 50% / 14px 14px; }.spene-canvas-node-body textarea { background: #fffdf7; color: #364640; }.spene-canvas-node footer { color: #758781; }.spene-canvas-node footer button { background: #e8f2ee; color: #3d5d54; }.spene-canvas-node footer button:hover { background: #2bb5a6; color: #fff; }
.spene-canvas-port { border-color: #f4f8f6; background: #8ba09a; }.spene-canvas-port.out { background: #2fb8a9; }
.spene-canvas-zoom { border-color: #d6e2de; background: rgba(255,255,255,.94); box-shadow: 0 9px 24px rgba(29,72,64,.1); }.spene-canvas-zoom button { color: #647872; }.spene-canvas-zoom button:hover { background: #e8f2ef; color: #147d71; }.spene-canvas-zoom span { color: #657b75; }
.spene-canvas-composer-panel { border-color: #d3e1dd; background: rgba(255,255,255,.97); box-shadow: 0 24px 65px rgba(30,75,67,.18); }
.spene-canvas-selection { border-color: #dfe8e5; background: #f7faf9; }.spene-canvas-selection > svg { color: #20a99b; }.spene-canvas-selection b { color: #304640; }.spene-canvas-selection small { color: #7d8c87; }
.spene-canvas-composer-main textarea { color: #253b35; }.spene-canvas-composer-main textarea::placeholder { color: #91a09b; }.spene-canvas-composer-main select,.spene-canvas-composer-main > div > button { border-color: #dbe5e1; background: #f6f9f8; color: #536b64; }.spene-canvas-composer-main > div > button:hover { border-color: #92d2c5; color: #187c70; }
.spene-canvas-send { background: linear-gradient(135deg,#29b9aa,#7bdc96); color: #fff; box-shadow: 0 10px 25px rgba(40,180,162,.2); }.spene-canvas-send:hover { background: linear-gradient(135deg,#20a99b,#69ce88); }
.spene-canvas-toast { border-color: #d2e1dc; background: #fff; color: #2c413b; box-shadow: 0 16px 44px rgba(24,68,60,.17); }.spene-canvas-toast.error { border-color: #efb8c1; background: #fff5f6; color: #a23e4e; }
.spene-canvas-navigation { border-color: #dbe4e1; background: rgba(255,255,255,.98); box-shadow: 26px 0 70px rgba(29,72,64,.16); }.spene-canvas-navigation > div > span { background: linear-gradient(145deg,#7ce1cb,#c7ff89); color: #19443a; }.spene-canvas-navigation > div > b { color: #243a35; }.spene-canvas-navigation > div > button { color: #7f8e89; }.spene-canvas-navigation > small { color: #82918c; }.spene-canvas-navigation nav hr { border-color: #e1e9e6; }.spene-canvas-navigation nav button { color: #60746e; }.spene-canvas-navigation nav button:hover { background: #eef5f2; color: #21463d; }.spene-canvas-navigation nav button.active { border-color: #9bd6c9; background: #e7f7f3; color: #137b70; }
.spene-canvas-nav-scrim,.spene-prompt-scrim { background: rgba(41,67,61,.25); }
.spene-canvas-asset-library,.spene-prompt-library { border-color: #d7e2de; background: #fff; color: #253a35; box-shadow: 0 30px 90px rgba(25,68,60,.24); }.spene-canvas-asset-library > header { border-color: #e1e9e6; background: linear-gradient(120deg,#fff,#eefaf7,#f5f3ff); }.spene-canvas-asset-library > header span { background: #e6f4ef; color: #217c6f; }.spene-canvas-asset-library > header button,.spene-prompt-library > header button { border-color: #dce5e2; background: #fff; color: #61746e; }
.spene-canvas-asset-body,.spene-prompt-library-body { background: #fff; }.spene-canvas-asset-browse,.spene-prompt-browse { border-color: #e0e8e5; }.spene-canvas-asset-browse > label,.spene-prompt-browse > label { border-color: #dce6e2; background: #f6f9f8; color: #78908a; }.spene-canvas-asset-browse > label input,.spene-prompt-browse > label input { color: #263c36; }
.spene-canvas-asset-card,.spene-prompt-card { border-color: #dfe7e4; background: #fbfdfc; color: #2a403a; }.spene-canvas-asset-card:hover,.spene-prompt-card:hover { border-color: #83cbbd; background: #f1fbf8; }.spene-canvas-asset-card small,.spene-prompt-use > small { color: #7b8b86; }
.spene-canvas-asset-upload,.spene-prompt-create { background: #f8faf9; }.spene-canvas-asset-upload > small,.spene-prompt-create > small { color: #778984; }.spene-canvas-asset-upload label { color: #5d716b; }.spene-canvas-asset-upload input,.spene-prompt-create input,.spene-prompt-create textarea { border-color: #dbe5e1; background: #fff; color: #263d37; }.spene-canvas-asset-upload label.file span { border-color: #b9cdc7; background: #fff; color: #607872; }.spene-canvas-asset-upload > button,.spene-prompt-create > button { background: linear-gradient(135deg,#2ab7a8,#75d692); color: #fff; }
.spene-prompt-library > header { border-color: #e0e8e5; }.spene-prompt-use > span { background: #e4f3ee; color: #277c70; }.spene-prompt-actions button { background: #e5f3ed; color: #277d70; }.spene-prompt-actions .remove { background: #f7e9ec; color: #a25764; }.spene-prompt-review { border-color: #e1e9e6; }.spene-prompt-review input { border-color: #dce5e2; background: #fff; color: #263d37; }.spene-prompt-review button { background: #2bb5a6; color: #fff; }