:root {
  color-scheme: dark;
  --bg: #0d0e0e;
  --rail: #101111;
  --panel: #151616;
  --panel-2: #191a1a;
  --panel-3: #202121;
  --line: #282a29;
  --line-soft: rgba(255,255,255,.07);
  --text: #eceeeb;
  --muted: #8d928d;
  --soft: #5e635e;
  --green: #79ef91;
  --green-deep: #173b27;
  --orange: #d4512e;
  --white: #f4f5f2;
  --shadow: 0 24px 80px rgba(0,0,0,.38);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--text); font: 13px/1.45 Inter, "Segoe UI", system-ui, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--green); outline-offset: 2px; }
.app-shell { display: grid; grid-template-columns: 68px 236px minmax(0, 1fr); width: 100vw; height: 100vh; background: var(--bg); }
.app-rail { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); background: var(--rail); }
.rail-logo { width: 68px; height: 68px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--green); font-size: 26px; font-weight: 850; cursor: pointer; text-shadow: 0 0 20px rgba(121,239,145,.5); }
.rail-menu, .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 20px 0; }
.rail-bottom { margin-top: auto; padding-bottom: 18px; }
.rail-button, .rail-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--soft); cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.rail-button:hover, .rail-button.active { border-color: var(--line); background: var(--panel-3); color: var(--text); }
.rail-button.active { color: var(--green); box-shadow: inset 2px 0 var(--green); }
.rail-avatar, .user-avatar { border-radius: 50%; background: #ad4b3d; color: #ffd8d0; text-transform: lowercase; }
.rail-avatar { width: 27px; height: 27px; font-size: 11px; }
.rail-icon, .side-icon { display: inline-block; position: relative; width: 18px; height: 18px; opacity: .92; }
.icon-nodes:before { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 3px; box-shadow: -5px 5px 0 -4px var(--rail), -5px 5px 0 -3px currentColor, 5px -5px 0 -4px var(--rail), 5px -5px 0 -3px currentColor; }
.icon-bot:before { content: ""; position: absolute; inset: 3px 2px; border: 1px solid currentColor; border-radius: 5px; }
.icon-bot:after { content: "••"; position: absolute; top: -3px; left: 3px; font-size: 12px; letter-spacing: 2px; }
.icon-chart:before { content: "▁▃▆"; position: absolute; bottom: -2px; left: -1px; color: currentColor; font-size: 16px; letter-spacing: -3px; }
.icon-users:before { content: "♧"; position: absolute; font-size: 21px; top: -5px; left: 0; }
.icon-template:before { content: "▦"; font-size: 20px; position: absolute; top: -4px; }
.icon-link:before { content: "↗"; font-size: 20px; position: absolute; top: -4px; }
.icon-settings:before { content: "⚙"; font-size: 17px; position: absolute; top: -2px; }
.icon-help { display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; }
.sidebar { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); background: #121313; }
.workspace-switch { display: flex; align-items: center; gap: 9px; height: 68px; padding: 0 17px; border-bottom: 1px solid var(--line); cursor: pointer; }
.workspace-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: var(--green); color: #0c150e; font-weight: 900; }
.workspace-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.workspace-copy strong { font-size: 12px; letter-spacing: .1em; }
.workspace-copy small, .user-row small { color: var(--soft); font-size: 10px; }
.chevron { color: var(--muted); font-size: 17px; }
.sidebar-scroll { flex: 1; overflow: auto; padding: 25px 12px; }
.sidebar-label { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 9px; color: var(--soft); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.projects-label { margin-top: 28px; }
.tiny-action { border: 0; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; }
.side-nav { display: grid; gap: 3px; }
.side-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 35px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.side-item:hover { border-color: var(--line); background: rgba(255,255,255,.035); color: var(--text); }
.side-item.active { border-color: #2b4130; background: #1c281f; color: var(--text); }
.side-item.active .side-icon { color: var(--green); }
.side-item .side-icon { width: 17px; height: 17px; color: var(--soft); }
.side-item kbd { margin-left: auto; color: var(--soft); font-size: 10px; }
.side-item em { margin-left: auto; border-radius: 10px; padding: 1px 6px; background: var(--green-deep); color: var(--green); font-size: 10px; font-style: normal; }
.project-item { font-size: 12px; }
.project-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(121,239,145,.6); }
.muted-dot { background: var(--soft); box-shadow: none; }
.project-more { margin-left: auto; color: var(--soft); letter-spacing: 2px; }
.sidebar-footer { padding: 13px 12px 15px; border-top: 1px solid var(--line); }
.footer-action { min-height: 34px; font-size: 12px; }
.user-row { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 13px 9px 2px; border-top: 1px solid var(--line-soft); }
.user-avatar { display: grid; place-items: center; width: 25px; height: 25px; font-size: 11px; }
.user-row strong, .user-row small { display: block; }
.user-row strong { font-size: 11px; }
.user-more { margin-left: auto; color: var(--soft); letter-spacing: 2px; }
.main-area { min-width: 0; background: var(--bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(15,16,16,.86); }
.breadcrumbs { display: flex; align-items: center; gap: 11px; color: var(--soft); font-size: 12px; }
.breadcrumbs strong { color: var(--text); font-weight: 550; }
.breadcrumb-slash { color: #393c39; }
.save-indicator { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--soft); font-size: 10px; }
.save-indicator i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-button, .top-round, .tool-button { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.top-button { height: 34px; padding: 0 12px; font-size: 11px; }
.top-button:hover, .top-round:hover, .tool-button:hover { border-color: #414541; background: var(--panel-3); color: var(--text); }
.top-button-accent { border-color: #315d3b; background: var(--green); color: #0e170f; font-weight: 750; }
.top-button-accent:hover { border-color: var(--green); background: #9affaa; color: #0e170f; }
.play-icon { margin-right: 4px; font-size: 9px; }
.top-round { width: 34px; height: 34px; letter-spacing: 2px; }
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 298px; height: calc(100vh - 68px); }
.canvas-panel { display: flex; min-width: 0; flex-direction: column; }
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; border-bottom: 1px solid var(--line-soft); }
.canvas-mode, .canvas-tools { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.canvas-mode strong { color: var(--text); font-weight: 600; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(121,239,145,.75); }
.toolbar-divider { width: 1px; height: 15px; background: var(--line); }
.canvas-tools { gap: 5px; }
.canvas-tools > span { min-width: 43px; color: var(--soft); text-align: center; font-size: 10px; }
.tool-button { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; font-size: 15px; }
.canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #111212; cursor: crosshair; }
.canvas-grid { position: absolute; inset: 0; opacity: .7; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 24px 24px; }
.canvas:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 52% 40%, transparent 0, rgba(17,18,18,.05) 34%, rgba(17,18,18,.58) 100%); }
.nodes-layer { position: absolute; inset: 0; z-index: 2; }
.canvas-hint { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; transform: translate(-50%,-50%); color: var(--soft); text-align: center; pointer-events: none; }
.canvas-hint strong { margin-top: 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.canvas-hint span { margin-top: 4px; font-size: 11px; line-height: 1.6; }
.hint-cross { display: grid; place-items: center; width: 34px; height: 34px; border: 1px dashed #424643; border-radius: 8px; color: var(--green); font-size: 19px; }
.canvas-footer { display: flex; justify-content: space-between; height: 34px; padding: 0 17px; border-top: 1px solid var(--line-soft); color: var(--soft); font-size: 10px; align-items: center; }
.minimap { position: absolute; right: 18px; bottom: 17px; z-index: 3; width: 112px; height: 72px; border: 1px solid var(--line); border-radius: 6px; background: rgba(20,21,21,.83); box-shadow: var(--shadow); }
.minimap span { position: absolute; inset: 11px 15px; border: 1px solid #334137; }
.minimap i { position: absolute; top: 22px; left: 29px; width: 26px; height: 16px; border: 1px solid var(--green); background: rgba(121,239,145,.1); }
.flow-node { position: absolute; width: 246px; border: 1px solid #353a36; border-radius: 9px; background: #1b1d1c; box-shadow: 0 12px 35px rgba(0,0,0,.35); user-select: none; cursor: grab; }
.flow-node:hover, .flow-node.selected { border-color: #5b9165; box-shadow: 0 0 0 1px rgba(121,239,145,.16), 0 15px 38px rgba(0,0,0,.4); }
.flow-node:active { cursor: grabbing; }
.node-head { display: flex; align-items: center; gap: 9px; min-height: 37px; padding: 0 11px; border-bottom: 1px solid var(--line); }
.node-symbol { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #365c3d; border-radius: 5px; background: #1c3824; color: var(--green); font-size: 11px; }
.node-head strong { flex: 1; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.node-kind { color: var(--soft); font-size: 8px; letter-spacing: .09em; }
.node-body { position: relative; padding: 13px 13px 14px; }
.node-body p { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.node-button-preview { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid #315a3a; border-radius: 6px; background: #1f3b27; color: #a8ffb3; font-size: 11px; }
.node-button-preview span { font-size: 12px; }
.node-link { display: block; overflow: hidden; margin-top: 9px; color: var(--soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.node-handle { position: absolute; top: 50%; width: 8px; height: 8px; border: 2px solid #111212; border-radius: 50%; background: var(--green); transform: translateY(-50%); }
.node-handle.input { left: -5px; background: var(--muted); }
.node-handle.output { right: -5px; }
.text-node .node-symbol { border-color: #555344; background: #363423; color: #d8ca77; }
.inspector { overflow: auto; border-left: 1px solid var(--line); background: #141515; }
.inspector-header { display: flex; justify-content: space-between; min-height: 83px; padding: 21px 19px 15px; border-bottom: 1px solid var(--line); }
.eyebrow { display: block; color: var(--soft); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.inspector h2 { margin: 7px 0 0; font-size: 14px; font-weight: 600; }
.close-inspector, .modal-close { border: 0; background: transparent; color: var(--soft); font-size: 21px; cursor: pointer; }
.close-inspector:hover, .modal-close:hover { color: var(--text); }
.inspector-empty { display: grid; place-items: center; padding: 90px 20px; color: var(--soft); text-align: center; }
.empty-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px dashed #414642; border-radius: 9px; color: var(--green); font-size: 22px; }
.inspector-empty strong { margin-top: 12px; color: var(--muted); font-size: 12px; }
.inspector-empty span { margin-top: 5px; font-size: 10px; line-height: 1.6; }
.inspector-form { padding: 20px 19px; }
.node-type-pill { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.mini-node-icon { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #365c3d; border-radius: 5px; background: #1c3824; color: var(--green); font-size: 11px; }
.inspector-form label, .bot-modal label { display: block; margin: 15px 0 6px; color: var(--muted); font-size: 10px; }
.inspector-form input, .token-input input { width: 100%; height: 35px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: #101111; color: var(--text); padding: 0 10px; font-size: 11px; }
.inspector-form input:focus, .token-input input:focus { border-color: #5b9165; }
.field-note { display: flex; gap: 6px; margin-top: 9px; color: var(--soft); font-size: 9px; line-height: 1.45; }
.info-mark { display: grid; flex: 0 0 auto; place-items: center; width: 13px; height: 13px; border: 1px solid var(--soft); border-radius: 50%; font-size: 8px; }
.inspector-divider { height: 1px; margin: 21px 0 15px; background: var(--line); }
.field-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.toggle { width: 29px; height: 17px; padding: 2px; border: 0; border-radius: 20px; background: #363a36; cursor: pointer; }
.toggle i { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--soft); transition: transform .16s, background .16s; }
.toggle.on { background: #285c35; }
.toggle.on i { background: var(--green); transform: translateX(12px); }
.select-lite { border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; color: var(--muted); font-size: 10px; letter-spacing: 0; text-transform: none; }
.select-lite b { margin-left: 9px; color: var(--soft); }
.danger-button { width: 100%; height: 32px; margin-top: 29px; border: 1px solid #442a27; border-radius: 6px; background: transparent; color: #c66b5d; cursor: pointer; font-size: 10px; }
.danger-button:hover { background: #2b1917; border-color: #71423c; }
.inspector-tip { display: flex; gap: 8px; margin: 18px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--soft); font-size: 10px; line-height: 1.5; }
.spark { color: var(--green); }
.context-menu { position: fixed; z-index: 20; display: none; width: 280px; padding: 7px; border: 1px solid #383d39; border-radius: 8px; background: #1b1d1c; box-shadow: 0 20px 55px rgba(0,0,0,.55); }
.context-menu.open { display: block; }
.context-heading { padding: 8px 9px 6px; color: var(--soft); font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.context-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.context-menu button:hover { background: #292d2a; }
.context-menu button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.context-menu strong { color: var(--text); font-size: 11px; font-weight: 600; }
.context-menu small { margin-top: 2px; color: var(--soft); font-size: 9px; }
.context-menu kbd { color: var(--soft); font-size: 9px; }
.context-icon { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 13px; }
.context-icon.green { border-color: #365c3d; background: #1c3824; color: var(--green); }
.context-separator { height: 1px; margin: 5px 3px; background: var(--line); }
.context-menu .context-cancel { min-height: 32px; color: var(--muted); }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.67); backdrop-filter: blur(6px); }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(410px, calc(100vw - 32px)); border: 1px solid #3a3e3b; border-radius: 10px; background: #1a1c1b; box-shadow: var(--shadow); padding: 27px; }
.modal h2 { margin: 8px 0 9px; font-size: 20px; letter-spacing: -.03em; }
.modal-close { position: absolute; top: 17px; right: 18px; }
.modal-description, .modal-note { color: var(--muted); font-size: 11px; line-height: 1.6; }
.mini-preview { display: grid; place-items: center; gap: 18px; min-height: 220px; margin: 22px 0 15px; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(circle at 50% 0, #26352a, #111313 58%); text-align: center; }
.preview-brand { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.mini-preview strong { max-width: 240px; font-size: 17px; }
.mini-preview button, .modal-primary { border: 1px solid #4f9b5c; border-radius: 6px; background: var(--green); color: #0d170e; font-weight: 700; cursor: pointer; }
.mini-preview button { padding: 9px 14px; }
.modal-primary { width: 100%; height: 37px; margin-top: 20px; }
.modal-primary:hover, .mini-preview button:hover { background: #9affaa; }
.token-input { display: flex; gap: 7px; }
.token-input input { flex: 1; }
.token-input button { border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3); color: var(--muted); padding: 0 9px; cursor: pointer; font-size: 10px; }
.bot-help { display: grid; grid-template-columns: 20px 1fr; gap: 8px 7px; margin-top: 16px; color: var(--muted); font-size: 10px; }
.bot-help > span:nth-child(odd) { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green-deep); color: var(--green); }
.modal-status { min-height: 15px; margin: 10px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 320px; transform: translateY(18px); opacity: 0; border: 1px solid #3b493e; border-radius: 7px; background: #1d2820; color: #c9ffd0; padding: 11px 14px; box-shadow: var(--shadow); pointer-events: none; transition: opacity .2s, transform .2s; font-size: 11px; }
.toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 980px) { .app-shell { grid-template-columns: 60px 205px minmax(0, 1fr); } .builder-layout { grid-template-columns: minmax(0, 1fr) 265px; } .topbar { padding-inline: 15px; } .breadcrumbs { gap: 7px; } }
@media (max-width: 760px) { html, body { overflow: auto; } .app-shell { min-height: 100vh; height: auto; grid-template-columns: 58px minmax(0,1fr); } .sidebar { position: fixed; z-index: 10; top: 0; bottom: 0; left: 58px; width: 215px; transform: translateX(-100%); transition: transform .2s; } .sidebar:hover { transform: translateX(0); } .main-area { grid-column: 2; min-height: 100vh; } .builder-layout { grid-template-columns: 1fr; height: calc(100vh - 68px); } .inspector { position: fixed; z-index: 8; right: 0; bottom: 0; width: min(298px, 90vw); height: 70vh; transform: translateX(100%); transition: transform .2s; } .inspector:focus-within { transform: translateX(0); } .top-actions .top-button:first-child { display: none; } }