.flowlab-shell {
    --ink: #172538;
    --muted: #64748b;
    --line: #d9e1ea;
    --paper: #f5f7fa;
    --white: #fff;
    --blue: #2b6de5;
    --blue-deep: #174eae;
    --teal: #0f9d87;
    --orange: #ef8d32;
    --red: #d94b55;
    --shadow: 0 16px 44px rgba(27, 45, 72, .11);
    color: var(--ink);
    background: #eef2f6;
    border: 1px solid #dce3eb;
    border-radius: 18px;
    box-shadow: var(--shadow);
    font: 500 14px/1.5 Inter, Manrope, system-ui, sans-serif;
    min-height: 720px;
    overflow: hidden;
}
.flowlab-shell *, .flowlab-shell *::before, .flowlab-shell *::after { box-sizing: border-box; }
.flowlab-shell button, .flowlab-shell input, .flowlab-shell select, .flowlab-shell textarea { font: inherit; }
.flowlab-header { min-height: 78px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: white; background: #16283e; border-bottom: 4px solid #2b6de5; }
.flowlab-brand { display: flex; align-items: center; gap: 14px; }
.flowlab-brand h1 { color: white; font-size: clamp(20px, 2vw, 29px); line-height: 1.05; letter-spacing: -.035em; margin: 0; }
.flowlab-kicker { margin: 0 0 3px; color: #54d7c5; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.flowlab-brand__symbol { width: 48px; height: 48px; position: relative; display: block; }
.flowlab-brand__symbol i { position: absolute; left: 16px; width: 17px; height: 17px; border: 2px solid #fff; background: #2b6de5; transform: rotate(45deg); }
.flowlab-brand__symbol i:nth-child(1) { top: 0; border-radius: 50%; transform: none; background: #12a78e; }
.flowlab-brand__symbol i:nth-child(2) { top: 16px; }
.flowlab-brand__symbol i:nth-child(3) { top: 33px; border-radius: 50%; transform: none; background: #ef8d32; }
.flowlab-brand__symbol::after { content: ''; position: absolute; left: 24px; top: 14px; width: 2px; height: 22px; background: #fff; }
.flowlab-header__actions { display: flex; align-items: center; gap: 10px; }
.flowlab-language { display:flex;align-items:center;gap:7px;color:#c9d5e5;font-size:11px; }
.flowlab-language select { padding:7px 28px 7px 9px;color:white;background:#203851;border:1px solid #42617d;border-radius:8px; }
.flowlab-language option { color:#172538;background:white; }
.flowlab-name { display: flex; align-items: center; gap: 8px; color: #c9d5e5; font-size: 12px; }
.flowlab-name input { width: 155px; padding: 8px 10px; color: white; background: #203851; border: 1px solid #42617d; border-radius: 8px; outline: none; }
.flowlab-name input:focus { border-color: #66d8ca; box-shadow: 0 0 0 3px rgba(102,216,202,.16); }
.flowlab-icon-button, .flowlab-logout { min-width: 36px; min-height: 36px; padding: 7px 11px; border: 1px solid #49647e; border-radius: 8px; color: white; background: transparent; text-decoration: none; cursor: pointer; }
.flowlab-workspace { display: grid; grid-template-columns: 255px minmax(520px, 1fr) 280px; min-height: 710px; }
.flowlab-left-panel, .flowlab-right-panel { background: white; }
.flowlab-left-panel { border-right: 1px solid var(--line); }
.flowlab-right-panel { border-left: 1px solid var(--line); }
.flowlab-task-picker { padding: 18px; border-bottom: 1px solid var(--line); }
.flowlab-task-picker > label, .flowlab-palette h2 { display: block; margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6c7b8d; }
.flowlab-task-picker select { width: 100%; padding: 10px 34px 10px 11px; border: 1px solid #cbd6e2; border-radius: 9px; color: var(--ink); background: white; }
.flowlab-task-meta { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 8px; color: #587086; font-size: 11px; font-weight: 700; }
.flowlab-task-picker h2 { margin: 0 0 5px; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; }
.flowlab-task-picker p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.flowlab-instructions { padding: 9px 10px; background: #f2f6fb; border-left: 3px solid var(--blue); border-radius: 2px 7px 7px 2px; }
.flowlab-text-button { padding: 0; color: #8b5d0e; border: 0; background: none; font-size: 12px; font-weight: 800; cursor: pointer; }
.flowlab-hint { margin-top: 8px; padding: 9px; color: #6d4c0d; background: #fff6d9; border: 1px solid #f1d891; border-radius: 8px; font-size: 12px; }
.flowlab-palette { padding: 17px 14px; }
.flowlab-palette h2 { margin-left: 4px; margin-bottom: 0; }
.flowlab-palette > p { margin: 2px 4px 12px; color: var(--muted); font-size: 11px; }
.flowlab-palette__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.flowlab-palette__grid button { min-height: 72px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #33465c; border: 1px solid #dce3eb; border-radius: 9px; background: #fafbfd; cursor: grab; transition: .16s ease; }
.flowlab-palette__grid button:hover { color: var(--blue-deep); border-color: #82a8e9; background: #f0f6ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(38,80,142,.1); }
.flowlab-palette__grid b { font-size: 10px; line-height: 1; }
.shape { width: 43px; height: 25px; display: block; border: 2px solid #36506a; background: #dcecff; }
.shape--start, .shape--end { border-radius: 30px; }
.shape--start { background: #daf7ed; }.shape--end { background: #ffe2df; }
.shape--declare { border-radius: 3px; background: #eee8ff; box-shadow: inset 0 0 0 3px #eee8ff, inset 0 0 0 4px #7564a9; }
.shape--input, .shape--output { transform: skew(-14deg); background: #fff1ca; }.shape--output { background: #dff4ff; }
.shape--process { background: #dcecff; }.shape--decision { width: 30px; height: 30px; transform: rotate(45deg); background: #ffe4bd; }.shape--comment { border-style: dashed; background: #f2f3f5; }
.flowlab-progress { margin: 0 14px 17px; padding: 12px; border-radius: 9px; background: #f4f7fa; }
.flowlab-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; color: #627287; font-size: 11px; }.flowlab-progress strong { color: var(--ink); }
.flowlab-progress__bar { height: 6px; overflow: hidden; background: #dce4ec; border-radius: 10px; }.flowlab-progress__bar i { width: 0; height: 100%; display: block; background: linear-gradient(90deg,#12a78e,#45c7ad); transition: width .3s; }
.flowlab-main { min-width: 0; display: flex; flex-direction: column; background: #f7f9fb; }
.flowlab-toolbar { min-height: 51px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: white; }
.flowlab-toolbar__group { display: flex; gap: 5px; padding-right: 8px; border-right: 1px solid #e0e6ed; }.flowlab-toolbar__group--push { margin-left: auto; padding-right: 0; border: 0; }
.flowlab-toolbar button, .flowlab-actionbar button { min-height: 34px; padding: 6px 10px; color: #35495f; border: 1px solid #cdd7e2; border-radius: 7px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.flowlab-toolbar button:hover, .flowlab-actionbar button:hover { border-color: #84a9dc; background: #f1f6fc; }.flowlab-toolbar button:disabled { opacity: .38; cursor: default; }
.flowlab-toolbar button.is-danger { color: #a52e3a; }.flowlab-toolbar button.is-danger:not(:disabled):hover { border-color: #e5a3aa; background: #fff1f2; }
.flowlab-canvas-wrap { height: 600px; position: relative; overflow: auto; background: #f7f9fc; }
.flowlab-canvas-grid { width: 1200px; height: 900px; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#c9d3df 1px, transparent 1px); background-size: 20px 20px; }
.flowlab-canvas, .flowlab-edges { width: 1200px; height: 900px; position: absolute; inset: 0; }.flowlab-canvas { z-index: 2; }.flowlab-edges { z-index: 1; overflow: visible; pointer-events: none; }
.flowlab-edge { fill: none; stroke: #526981; stroke-width: 2.2; }.flowlab-edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }.flowlab-edge-label { fill: #55687c; font: 700 12px Manrope, sans-serif; paint-order: stroke; stroke: #f7f9fc; stroke-width: 5px; }.flowlab-edges marker path { fill: #526981; }.flowlab-edges g.is-selected .flowlab-edge { stroke: var(--blue); stroke-width: 3.5; }.flowlab-edges g.is-selected .flowlab-edge-label { fill: var(--blue); }
.flowlab-node { width: 156px; min-height: 76px; padding: 13px 12px 11px; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); border: 2px solid #39536f; border-radius: 10px; background: #dcecff; box-shadow: 0 5px 12px rgba(34,53,77,.12); cursor: move; user-select: none; transition: box-shadow .16s, border-color .16s, filter .16s; }
.flowlab-node:hover { border-color: #1d64c8; box-shadow: 0 7px 18px rgba(34,84,152,.18); }.flowlab-node.is-selected { border-color: #1c64d0; box-shadow: 0 0 0 4px rgba(43,109,229,.18), 0 8px 18px rgba(31,70,125,.18); }.flowlab-node.is-connecting { border-color: var(--orange); box-shadow: 0 0 0 5px rgba(239,141,50,.22); }.flowlab-node.is-running { border-color: #05a783; filter: saturate(1.2); box-shadow: 0 0 0 5px rgba(15,157,135,.25), 0 9px 25px rgba(15,157,135,.3); }
.flowlab-node--start, .flowlab-node--end { border-radius: 40px; }.flowlab-node--start { background: #daf7ed; }.flowlab-node--end { background: #ffe2df; }.flowlab-node--declare { background: #eee8ff; box-shadow: inset 0 0 0 3px #eee8ff, inset 0 0 0 4px #7666a6, 0 5px 12px rgba(34,53,77,.12); }.flowlab-node--input { background: #fff1ca; clip-path: polygon(12% 0,100% 0,88% 100%,0 100%); }.flowlab-node--process { background: #dcecff; }.flowlab-node--decision { min-height: 108px; padding: 26px 28px; background: #ffe4bd; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); border-radius: 0; }.flowlab-node--output { background: #dff4ff; clip-path: polygon(12% 0,100% 0,88% 100%,0 100%); }.flowlab-node--comment { background: #f2f3f5; border-style: dashed; }
.flowlab-node__type { margin-bottom: 4px; color: #657589; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.flowlab-node__text { max-width: 128px; overflow: hidden; color: #17283b; font: 700 12px/1.25 'Space Mono', monospace; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.flowlab-node--decision .flowlab-node__type { font-size: 8px; }.flowlab-node--decision .flowlab-node__text { max-width: 92px; font-size: 10px; }
.flowlab-empty-state { width: 280px; position: absolute; z-index: 0; left: 50%; top: 45%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; color: #9aa8b7; pointer-events: none; }.flowlab-empty-state span { width: 52px; height: 52px; margin-bottom: 12px; display: grid; place-items: center; border: 2px dashed #bbc6d1; border-radius: 50%; font-size: 25px; }.flowlab-empty-state small { margin-top: 3px; }
.flowlab-zoom { position: sticky; z-index: 4; left: calc(100% - 128px); bottom: 12px; width: 112px; display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; overflow: hidden; border: 1px solid #d4dde7; border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 5px 15px rgba(34,53,77,.1); }.flowlab-zoom button { height: 31px; border: 0; background: none; cursor: pointer; }.flowlab-zoom span { color: #66788c; font-size: 10px; text-align: center; }
.flowlab-actionbar { min-height: 60px; padding: 9px 12px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line); background: white; }.flowlab-actionbar .flowlab-run { color: white; border-color: var(--teal); background: var(--teal); }.flowlab-actionbar .flowlab-test { color: white; border-color: var(--blue); background: var(--blue); }.flowlab-manual-input { margin-left: 5px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }.flowlab-manual-input input { width: 150px; padding: 7px 8px; border: 1px solid #cfd9e4; border-radius: 7px; font-size: 11px; }.flowlab-status { margin-left: auto; color: #657589; font-size: 11px; }.flowlab-status.is-success { color: #087b68; }.flowlab-status.is-error { color: #b32938; }.flowlab-status.is-warning { color: #a0640b; }
.flowlab-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }.flowlab-tabs button { padding: 16px 3px 12px; color: #6a798b; border: 0; border-bottom: 3px solid transparent; background: white; font-size: 11px; font-weight: 800; cursor: pointer; }.flowlab-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); }
.flowlab-tab { display: none; padding: 18px; }.flowlab-tab.active { display: block; }.flowlab-no-selection { padding: 38px 12px; color: #8a99a9; text-align: center; }.flowlab-no-selection span { display: block; margin-bottom: 9px; font-size: 42px; }.flowlab-no-selection p { font-size: 12px; }
.flowlab-properties label, #flowlab-properties label { display: block; margin: 15px 0 7px; color: #56687d; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.flowlab-shell textarea, .flowlab-shell .flowlab-properties textarea { width: 100%; padding: 10px; resize: vertical; border: 1px solid #cbd5df; border-radius: 8px; color: var(--ink); background: #fbfcfe; font: 500 12px/1.5 'Space Mono', monospace; }.flowlab-shell textarea:focus { outline: 0; border-color: #6c9de7; box-shadow: 0 0 0 3px rgba(43,109,229,.13); }.flowlab-type-badge { padding: 5px 9px; display: inline-block; color: #245b9b; background: #e7f1ff; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; }.flowlab-properties p, #flowlab-properties p { color: var(--muted); font-size: 11px; }.flowlab-properties button, #flowlab-properties button { width: 100%; padding: 9px; color: white; border: 0; border-radius: 8px; background: var(--blue); font-weight: 800; cursor: pointer; }.flowlab-shell #flowlab-edge-label { width: 100%; padding: 8px; border: 1px solid #ccd7e2; border-radius: 7px; }
.flowlab-legend { margin-top: 25px; padding-top: 16px; border-top: 1px solid var(--line); }.flowlab-legend h3, .flowlab-tab h3 { margin: 0 0 9px; color: #637489; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.flowlab-legend p { margin: 7px 0; color: #718095; font-size: 11px; }.flowlab-legend b { color: var(--blue); }
.flowlab-console, .flowlab-code { min-height: 110px; max-height: 260px; margin: 0 0 20px; padding: 12px; overflow: auto; color: #d9f4ec; background: #142232; border-radius: 8px; font: 12px/1.6 'Space Mono', monospace; white-space: pre-wrap; }.flowlab-code { max-height: 550px; color: #d9eaff; }.flowlab-variables { margin-bottom: 20px; }.flowlab-variables > div { padding: 7px 8px; display: flex; justify-content: space-between; border-bottom: 1px solid #e5eaf0; }.flowlab-variables code { color: #5b3ca1; }.flowlab-variables span { max-width: 135px; overflow: hidden; text-overflow: ellipsis; }.flowlab-variables p, .flowlab-tests p { color: #8290a0; font-size: 11px; }.flowlab-test-row { margin-bottom: 6px; padding: 8px; display: grid; grid-template-columns: 20px 1fr; border: 1px solid #dce3eb; border-radius: 7px; font-size: 11px; }.flowlab-test-row b { font-size: 14px; }.flowlab-test-row small { grid-column: 2; color: #6d7c8e; }.flowlab-test-row.is-pass { color: #087b68; background: #edfbf7; border-color: #a9e2d6; }.flowlab-test-row.is-fail { color: #a52e3a; background: #fff1f2; border-color: #efb5bb; }.flowlab-code-head { display: flex; justify-content: space-between; align-items: center; }.flowlab-code-head button { padding: 4px 7px; color: var(--blue); border: 1px solid #bed1ee; border-radius: 6px; background: white; font-size: 10px; cursor: pointer; }
.flowlab-gate { max-width: 600px; margin: 90px auto; padding: 48px; color: var(--ink); background: white; border: 1px solid #dce4ed; border-radius: 18px; box-shadow: var(--shadow); text-align: center; }.flowlab-gate__mark { width: 74px; height: 74px; margin: 0 auto 18px; display: grid; place-items: center; color: white; background: #244a73; border-radius: 22px; font-size: 34px; }.flowlab-gate h1 { margin: 0 0 10px; font-size: 32px; letter-spacing: -.04em; }.flowlab-gate > p:not(.flowlab-kicker) { color: var(--muted); }.flowlab-login-form { margin-top: 25px; text-align: left; }.flowlab-login-form label { display: block; margin-bottom: 6px; font-weight: 800; }.flowlab-login-form > div { display: flex; }.flowlab-login-form input { min-width: 0; flex: 1; padding: 11px; border: 1px solid #c8d4df; border-radius: 8px 0 0 8px; }.flowlab-login-form button { padding: 10px 18px; color: white; border: 0; border-radius: 0 8px 8px 0; background: var(--blue); font-weight: 800; }.flowlab-alert { padding: 11px; border-radius: 8px; }.flowlab-alert--warning { color: #80550b!important; background: #fff4cf; }
.flowlab-modal[hidden] { display: none; }.flowlab-modal { position: fixed; z-index: 10000; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(13,26,41,.68); backdrop-filter: blur(3px); }.flowlab-modal__panel { width: min(560px,100%); position: relative; padding: 32px; background: white; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.25); }.flowlab-modal__close { position: absolute; right: 15px; top: 12px; color: #64748b; border: 0; background: none; font-size: 28px; cursor: pointer; }.flowlab-modal h2 { margin: 0 0 14px; }.flowlab-modal li { margin-bottom: 8px; }.flowlab-modal code { padding: 1px 4px; background: #eef2f6; border-radius: 4px; }
.flowlab-code-head { gap:8px; }
.flowlab-code-head > div { display:flex;gap:5px; }
.flowlab-code-head select,.flowlab-code-head button { padding:5px 7px;color:var(--blue);border:1px solid #bed1ee;border-radius:6px;background:white;font-size:10px;cursor:pointer; }
.flowlab-code-note { color:#718095;font-size:10px; }
.flowlab-python-panel { width:min(760px,100%); }
.flowlab-python-panel > textarea { min-height:310px;font:12px/1.55 'Space Mono',Consolas,monospace; }
.flowlab-python-actions { margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.flowlab-python-actions .flowlab-run { padding:9px 14px;color:white;background:var(--teal);border:0;border-radius:8px;font-weight:800;cursor:pointer; }
@media (max-width: 1180px) { .flowlab-workspace { grid-template-columns: 225px minmax(480px,1fr); }.flowlab-right-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }.flowlab-tab { min-height: 180px; }.flowlab-palette__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .flowlab-shell { border-radius: 0; }.flowlab-header { align-items: flex-start; flex-direction: column; }.flowlab-header__actions { width: 100%; flex-wrap: wrap; }.flowlab-name { flex: 1; }.flowlab-name input { width: 100%; }.flowlab-workspace { display: block; }.flowlab-left-panel { border-right: 0; }.flowlab-palette__grid { grid-template-columns: repeat(4,1fr); }.flowlab-main { min-height: 650px; }.flowlab-toolbar { flex-wrap: wrap; }.flowlab-toolbar__group--push { margin-left: 0; }.flowlab-canvas-wrap { height: 520px; }.flowlab-actionbar { flex-wrap: wrap; }.flowlab-manual-input { width: 100%; order: 2; }.flowlab-manual-input input { flex: 1; }.flowlab-status { width: 100%; margin: 0; }.flowlab-right-panel { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .flowlab-header { padding: 12px; }.flowlab-brand__symbol { display: none; }.flowlab-palette__grid { grid-template-columns: repeat(2,1fr); }.flowlab-toolbar button { padding: 6px 8px; font-size: 11px; }.flowlab-gate { margin: 30px 12px; padding: 30px 20px; } }
@media (prefers-reduced-motion: reduce) { .flowlab-shell * { scroll-behavior: auto!important; transition: none!important; } }