:root { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#eaf0fb; background:#101722; font-synthesis:none; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.42; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid #67dcb7; outline-offset:2px; }
.hidden { display:none!important; }
.app-shell { min-height:100vh;display:grid;grid-template-columns:243px minmax(0,1fr); }
.sidebar { background:#131d2a;border-right:1px solid #29354a;min-height:100vh;display:flex;flex-direction:column;padding:25px 12px 16px; }
.sidebar-brand { display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;padding:0 9px 39px;white-space:nowrap; }
.logo-square { flex:none;display:grid;place-items:center;width:39px;height:39px;background:linear-gradient(145deg,#2c786d,#164b5c);color:#a3fbe1;border:1px solid #458d80;border-radius:13px;font-size:27px;box-shadow:0 3px 14px #0c131b50; }
.sidebar-brand strong { color:#a9f9d9; }
.sidebar-brand small { display:block;margin-top:4px;font-size:9px;letter-spacing:2.2px;color:#8a9db4; }
.beta-tag { color:#94e3bb;letter-spacing:.4px;font-weight:700;font-size:9px;background:#214d46;padding:3px 5px;border-radius:4px; }
.nav-title,.side-section-heading { color:#8293ab;font-size:10px;font-weight:800;letter-spacing:1.35px;padding:0 12px 13px; }
.nav-group { display:grid;gap:5px;margin-bottom:40px; }
.nav-link { width:100%;border:0;background:transparent;color:#a4b0c5;text-align:left;padding:12px 14px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;border-radius:10px; }
.nav-link span { font-size:19px;width:22px;text-align:center;color:#8192aa; }
.nav-link:hover { background:#263449;color:#f6fcff; }
.nav-link.active { background:#243e43;color:#a5f1d6;border:1px solid #31645a;padding:11px 13px; }
.nav-link.active span { color:#99ecca; }
.side-section-heading { display:flex;align-items:center;justify-content:space-between;padding:0 10px 11px; }
.tiny-icon { width:29px;height:29px;border-radius:8px;border:1px solid transparent;background:transparent;color:#b1c0d4;font-size:19px;display:grid;place-items:center; }
.tiny-icon:hover { border-color:#3a4a5e;background:#27374c; }
.flow-list { display:grid;gap:5px; }
.flow-entry { background:transparent;border:1px solid transparent;border-radius:9px;color:#b7c1d1;text-align:left;padding:12px 9px;display:flex;align-items:center;gap:10px;width:100%; }
.flow-entry .flow-icon { width:27px;height:27px;background:#263647;border-radius:7px;display:grid;place-items:center;flex:none;color:#8bdcbe; }
.flow-entry .flow-name { display:block;font-size:12px;font-weight:650;line-height:1.4;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.flow-entry small { display:block;color:#8596ac;font-size:10px;margin-top:3px; }
.flow-entry:hover,.flow-entry.current { background:#253044;border-color:#34465b;color:#f7faff; }
.sidebar-spacer { flex:1;min-height:30px; }
.sidebar-note { margin:0 4px 18px;padding:13px;border:1px solid #334357;background:#1b2a3a;border-radius:10px;display:flex;gap:10px;align-items:center; }
.note-dot,.live-dot,.activity-indicator { display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#64d9a8;box-shadow:0 0 0 3px #29443c; }
.sidebar-note strong { display:block;font-size:11px;color:#dae7f3; }
.sidebar-note small { color:#90a3b9;font-size:10px;display:block;margin-top:3px; }
.sidebar-footer { padding:16px 4px 0;display:flex;gap:10px;align-items:center;border-top:1px solid #2b384b; }
.avatar { width:35px;height:35px;border-radius:11px;background:#244d63;color:#b1e6fa;display:grid;place-items:center;font-weight:800; }
.user-meta { flex:1;min-width:0; }
.user-meta b,.user-meta small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.user-meta b { font-size:12px; }
.user-meta small { color:#90a1b4;font-size:10px;margin-top:4px; }
.main-content { min-width:0;position:relative;display:flex;flex-direction:column;min-height:100vh;background:#0f1621; }
.topbar { height:71px;flex:none;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #273246;background:#151e2b; }
.breadcrumbs { font-size:12px;color:#8698ad;display:flex;gap:11px;align-items:center;white-space:nowrap;overflow:hidden; }
.breadcrumbs b { color:#dce8f6;overflow:hidden;text-overflow:ellipsis; }
.breadcrumbs .chevron { color:#53647a; }
.top-actions { display:flex;align-items:center;gap:9px; }
.subtle-btn,.outline-btn,.ghost-btn { white-space:nowrap;background:#1f2b3b;border:1px solid #39495f;color:#d2dff0;padding:10px 13px;border-radius:9px;font-size:12px;font-weight:650; }
.subtle-btn:hover,.outline-btn:hover { background:#29374b;border-color:#63758c; }
.primary { white-space:nowrap;border:1px solid #73dcb1;border-radius:9px;background:#6de0ad;color:#102e28;font-size:12px;font-weight:800;padding:11px 16px; }
.primary:hover { background:#9cebc7; }
.dirty-badge { color:#edbd69;font-size:10px;font-weight:700; }
.worker-badge { color:#8bd6b7;font-size:10px;font-weight:700;background:#1b3b36;padding:8px 10px;border-radius:50px;white-space:nowrap; }
.worker-badge.offline { background:#463228;color:#f6b89c; }
.screen { min-width:0; }
.editor-screen { flex:1;display:flex;flex-direction:column;min-height:0; }
.editor-heading { padding:23px 28px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px; }
.eyebrow { color:#70cda6;letter-spacing:1.8px;font-size:10px;font-weight:800;margin-bottom:8px; }
.flow-title { display:block;background:transparent;border:0;border-radius:5px;color:#f0f4fb;font-weight:750;font-size:25px;max-width:530px;width:100%;padding:0;outline:none;letter-spacing:-.6px; }
.flow-title:focus { outline:0;border-bottom:1px solid #78d9b0; }
.editor-heading p { font-size:12px;color:#8699b0;margin:6px 0 0; }
.editor-heading-controls { display:flex;align-items:center;gap:10px; }
.status-pill { padding:8px 11px;border-radius:30px;border:1px solid #394b5b;color:#afc0d3;font-size:11px;white-space:nowrap; }
.status-pill.enabled { background:#1a3835;border-color:#30785a;color:#8be3b3; }
.builder-area { display:grid;grid-template-columns:220px minmax(350px,1fr) 267px;gap:0;flex:1;min-height:620px;border-top:1px solid #293547; }
.palette-panel,.inspector-panel { background:#151f2b;padding:20px 14px 16px;border-right:1px solid #2b384b; }
.inspector-panel { border-right:0;border-left:1px solid #2b384b; }
.panel-title { font-size:12px;font-weight:800;color:#e9f0fa;display:flex;align-items:center;justify-content:space-between; }
.panel-title span { background:#253447;color:#9fb1c8;padding:4px 7px;border-radius:6px;font-size:10px; }
.panel-subtitle { font-size:10px;color:#8193a9;margin:7px 0 18px; }
.palette-list { display:grid;gap:8px; }
.palette-item { width:100%;display:flex;align-items:center;gap:10px;padding:12px 9px;background:#1c2939;border:1px solid #324255;border-radius:9px;text-align:left;color:#dae5f3; }
.palette-item:hover { border-color:#66bda1;background:#243a42;transform:translateY(-1px); }
.palette-item .palette-icon { flex:none;display:grid;place-items:center;width:35px;height:35px;border-radius:9px;font-size:17px; }
.palette-item strong,.palette-item small { display:block; }
.palette-item strong { font-size:11px; }
.palette-item small { font-size:9px;color:#8ba0b7;margin-top:4px; }
.palette-info { display:flex;gap:8px;font-size:10px;color:#7f93a9;line-height:1.7;margin-top:25px;padding:11px;background:#1c2938;border:1px dashed #35475a;border-radius:8px; }
.palette-info span { color:#70d9b2;font-size:16px; }
.workspace { min-width:0;display:flex;flex-direction:column; }
.canvas-toolbar { background:#172230;border-bottom:1px solid #2c3c50;min-height:49px;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px; }
.canvas-toolbar b { margin-left:6px;font-size:11px; }
.canvas-toolbar small { margin-left:9px;font-size:10px;color:#8598ae; }
.canvas-tools { display:flex;gap:4px;align-items:center; }
.canvas-tools button { width:28px;height:27px;display:grid;place-items:center;border-radius:6px;border:1px solid #364558;background:#223044;color:#b6c5d7;font-size:15px; }
.canvas-tools button:hover { background:#31455b;color:white; }
.canvas-tools span { font-size:10px;color:#93a8be;min-width:39px;text-align:center; }
.canvas { position:relative;flex:1;min-height:470px;max-height:730px;overflow:hidden;cursor:grab;background-color:#101a28;background-image:radial-gradient(#34445a 1px,transparent 1px);background-size:21px 21px;touch-action:none; }
.canvas.panning { cursor:grabbing; }
.world { position:absolute;left:0;top:0;width:5000px;height:4000px;transform-origin:0 0;will-change:transform;pointer-events:none; }
.links-svg { position:absolute;top:0;left:0;width:5000px;height:4000px;overflow:visible;pointer-events:none; }
#linkPaths { pointer-events:none; }
#nodesLayer { position:absolute;inset:0;pointer-events:none; }
.canvas-hint { position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:10px;color:#8e9eb4;background:#192638d9;border:1px solid #304056;border-radius:8px;padding:8px 13px;white-space:nowrap;pointer-events:none; }
.node-card { width:225px;min-height:105px;position:absolute;background:#1d2b3a;border:1px solid #45566b;border-radius:12px;box-shadow:0 10px 18px #030a1538;pointer-events:auto;cursor:grab;user-select:none; }
.node-card.selected { border-color:#9aecc8;box-shadow:0 0 0 3px #78ddab2b,0 14px 22px #0007; }
.node-card .node-header { cursor:grab;display:flex;align-items:center;gap:10px;padding:13px 12px 10px; }
.node-symbol { flex:none;width:33px;height:33px;display:grid;place-items:center;border-radius:10px;font-size:18px; }
.node-title { color:#e9f1fc;font-size:12px;font-weight:750; }
.node-subtitle { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#a1b2c8;margin-top:4px;max-width:135px; }
.node-card .node-footer { margin:0 12px 8px;padding-top:8px;border-top:1px solid #334255;color:#718ba4;font-size:9px;letter-spacing:.5px; }
.node-card .handle { width:16px;height:16px;border-radius:50%;border:3px solid #7fa6bd;background:#193348;position:absolute;top:50px;z-index:2;cursor:crosshair;transition:transform .1s,background .1s;pointer-events:auto; }
.node-card .handle:hover { transform:scale(1.3);background:#8de7bd;border-color:#bff8d9; }
.node-card .handle.input { left:-9px; }
.node-card .handle.output { right:-9px;background:#275246;border-color:#75cdaa; }
.node-card .handle.branch-yes { top:33px;background:#1e624e; }
.node-card .handle.branch-no { top:72px;background:#764938;border-color:#eda784; }
.node-card .branch-label { position:absolute;right:11px;display:block;color:#80ccad;font-size:9px; }
.node-card .branch-label.yes { top:37px; }
.node-card .branch-label.no { top:76px;color:#eeaa85; }
.node-card .handle.pending { background:#fff3a6;box-shadow:0 0 0 8px #fff3a622; }
.link-visible { fill:none;stroke:#728da9;stroke-width:3;marker-end:url(#arrow);pointer-events:none; }
.link-visible.branch-yes { stroke:#55bb91; }
.link-visible.branch-no { stroke:#d29670; }
.link-visible.selected { stroke:#a9ebc6;stroke-width:4; }
.link-hit { fill:none;stroke:transparent;stroke-width:19;pointer-events:stroke;cursor:pointer; }
.activity-panel { min-height:170px;max-height:210px;overflow:auto;background:#151e2b;border-top:1px solid #2d3c50; }
.activity-heading { display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid #29384b;font-size:11px;font-weight:700; }
.activity-indicator { width:7px;height:7px;margin-right:7px; }
.ghost-btn { font-size:10px;border:none;padding:2px 3px;background:transparent;color:#8ebcba; }
.recent-runs { display:grid;padding:8px 13px; }
.empty-activity { color:#8295a8;font-size:11px;padding:15px; }
.recent-run { display:grid;grid-template-columns:minmax(0,1fr) 75px 73px;align-items:center;gap:9px;padding:8px;border:none;border-bottom:1px solid #243348;background:transparent;text-align:left;color:#d6e0ed;font-size:11px; }
.recent-run:hover { background:#223246; }
.recent-run small { color:#8195ac;font-size:10px;display:block;margin-top:3px; }
.badge-status { width:max-content;border-radius:5px;padding:5px 7px;font-size:10px;font-weight:700; }
.badge-status.succeeded { color:#80e0b2;background:#1d4439; }
.badge-status.failed,.badge-status.cancelled { color:#ffbaa6;background:#4b302e; }
.badge-status.waiting,.badge-status.queued,.badge-status.running { color:#f4d29f;background:#514333; }
.inspector-content { padding-top:22px; }
.inspector-empty { display:flex;align-items:center;flex-direction:column;text-align:center;padding:65px 12px 0; }
.inspector-empty span { width:55px;height:55px;display:grid;place-items:center;background:#223247;border:1px solid #394b61;border-radius:15px;color:#91a5bd;font-size:30px;margin-bottom:15px; }
.inspector-empty strong { font-size:12px; }
.inspector-empty p { color:#8495a8;font-size:11px;line-height:1.7; }
.inspector-type { color:#8ca3ba;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:800;margin:0 0 15px; }
.inspector-title { font-size:17px;font-weight:750;line-height:1.3;margin:0 0 18px; }
.inspector-form { display:grid;gap:15px; }
.inspector-form label,.system-card label,.login-card label { display:grid;gap:7px;color:#a6b7cb;font-size:11px;font-weight:600; }
.inspector-form input,.inspector-form select,.inspector-form textarea,.system-card input,.login-card input { width:100%;background:#111a27;border:1px solid #3a4c61;border-radius:8px;color:#ecf4fc;padding:11px 10px;font-size:12px; }
.inspector-form textarea { min-height:105px;resize:vertical; }
.inspector-tip { margin-top:17px;color:#8498ad;font-size:10px;line-height:1.7;background:#1e2d3e;padding:12px;border-radius:9px; }
.inspector-delete { margin-top:21px;border:1px solid #764b4d;background:#35282d;color:#e6a9a5;padding:10px;border-radius:8px;font-size:11px;width:100%; }
.welcome-panel { margin:auto;text-align:center;padding:80px 20px 120px;max-width:540px; }
.welcome-icon { display:grid;place-items:center;width:78px;height:78px;border-radius:21px;margin:0 auto 26px;background:#203e46;border:1px solid #467f6f;color:#a5f4d1;font-size:40px; }
.welcome-panel h2 { margin:0 0 12px;font-size:25px; }
.welcome-panel p { color:#a1b0c2;font-size:13px;line-height:1.7; }
.welcome-actions { display:flex;justify-content:center;gap:10px;margin-top:24px; }
.standalone-screen { padding:30px; }
.page-head { margin-bottom:25px; }
.page-head h1 { margin:0 0 8px;font-size:27px; }
.page-head p { color:#9aabc0;font-size:13px; }
.content-card { background:#192333;border:1px solid #344358;border-radius:13px;padding:17px; }
.table-head,.data-row { display:grid;grid-template-columns:minmax(150px,2fr) 100px 115px 185px 80px;gap:14px;align-items:center;text-align:left; }
.table-head { padding:9px 13px 13px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#8598ad;border-bottom:1px solid #39495d; }
.data-row { padding:15px 13px;border-bottom:1px solid #2c3b4d;color:#dfe8f3;font-size:12px; }
.data-row:last-child { border-bottom:0; }
.data-row button { color:#93d6ba;border:0;background:transparent;font-size:12px;text-align:left; }
.run-details { margin-top:17px;padding:24px; }
.run-details h2 { font-size:17px;margin:0 0 8px; }
.run-details .small-muted { font-size:11px;color:#8ca0b6;margin-bottom:15px; }
.step-entry { background:#101b29;border:1px solid #314255;border-radius:9px;padding:12px 14px;margin:8px 0; }
.step-entry strong { font-size:12px; }
.step-entry pre { color:#9dc6d1;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:2px; }
.stats-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.stat-card { border:1px solid #344459;border-radius:13px;background:#1b2939;padding:20px; }
.stat-card .stat-value { display:block;color:#e9f4fb;font-size:28px;font-weight:800;margin:8px 0 3px; }
.stat-card .stat-label { font-size:11px;color:#96aabd; }
.system-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px; }
.system-card { padding:25px; }
.system-card h2 { margin:10px 0;font-size:17px; }
.system-card p { color:#93a6bb;font-size:12px;line-height:1.7; }
.system-card form { margin-top:20px;display:grid;gap:11px;max-width:330px; }
.system-card form button { justify-self:start; }
.section-icon { display:grid;place-items:center;background:#2d3b51;color:#a4edcd;border-radius:10px;width:45px;height:45px;font-size:24px; }
.status-description { margin:18px 0;color:#9fbbcc;font-size:12px; }
.danger-btn { border:1px solid #bd655b;background:#4e2d32;color:#ffcac2;border-radius:9px;font-size:12px;font-weight:750;padding:12px 14px; }
.danger-btn:hover { background:#62363b; }
.system-footnote { margin-top:18px;color:#8398ae;font-size:11px; }
.toast { position:fixed;bottom:22px;right:25px;z-index:20;border:1px solid #4f8f7a;background:#184038;box-shadow:0 15px 45px #0008;color:#d6ffec;border-radius:12px;padding:15px 18px;font-weight:650;font-size:12px;max-width:min(420px,calc(100vw - 30px)); }
.toast.error { border-color:#b4665e;background:#4b2d35;color:#ffe0d9; }
.login-page { display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 50% 18%,#244340 0,transparent 36%),#101721;padding:25px; }
.login-card { max-width:415px;width:100%;border:1px solid #354d55;background:#172330;border-radius:22px;box-shadow:0 30px 90px #0007;padding:33px; }
.brand-lockup { display:flex;align-items:center;gap:10px;font-size:16px; }
.brand-lockup strong { color:#88eac3; }
.login-emblem { font-size:39px;color:#8becbf;margin:43px 0 11px; }
.login-card h1 { font-size:25px;margin:0 0 10px; }
.login-card p { color:#9cacc0;font-size:13px;line-height:1.7;margin:0 0 29px; }
.login-card form { display:grid;gap:16px; }
.login-card input { padding:13px; }
.login-card .wide { width:100%;display:flex;justify-content:space-between;margin-top:8px; }
.login-card footer { color:#7f93a8;font-size:10px;margin-top:34px;text-align:center; }
.error-text { font-size:11px;color:#ffb4a6;min-height:9px; }
@media(max-width:1250px){ .app-shell{grid-template-columns:205px minmax(0,1fr)} .sidebar-brand{font-size:13px} .builder-area{grid-template-columns:180px minmax(300px,1fr) 230px}.palette-panel,.inspector-panel{padding:17px 10px}.canvas-hint{font-size:9px}.worker-badge{display:none} }
@media(max-width:1030px){ .app-shell{grid-template-columns:70px minmax(0,1fr)} .sidebar{padding:18px 8px}.sidebar-brand{padding:0 5px 27px}.sidebar-brand>div:nth-child(2),.sidebar .nav-title,.sidebar .nav-link:not(.active),.sidebar .side-section-heading,.sidebar .flow-list,.sidebar .sidebar-note,.sidebar .user-meta{display:none}.sidebar .nav-group{display:block}.nav-link.active{font-size:0;justify-content:center;padding:10px}.nav-link.active span{font-size:20px}.sidebar-footer{justify-content:center}.sidebar-footer .tiny-icon{display:none}.builder-area{grid-template-columns:180px minmax(280px,1fr) 225px} }
@media(max-width:780px){ .app-shell{grid-template-columns:1fr}.sidebar{min-height:unset;flex-direction:row;align-items:center;height:65px;padding:8px 14px;border-right:0;border-bottom:1px solid #304057}.sidebar-brand{padding:0;margin-right:18px}.sidebar-brand>div:nth-child(2){display:block}.sidebar-brand small{display:none}.nav-group{display:flex!important;margin:0;gap:7px}.nav-link,.nav-link:not(.active){display:flex!important;font-size:0;padding:8px!important;width:37px;justify-content:center}.nav-link span{font-size:20px}.sidebar-spacer{min-height:0}.sidebar-footer{padding:0;border:0}.sidebar-footer .avatar{width:29px;height:29px}.topbar{padding:0 13px;height:60px}.top-actions{gap:4px}.top-actions .subtle-btn span,.top-actions .primary span{display:none}.top-actions button{padding:9px}.editor-heading{padding:19px 13px;flex-wrap:wrap}.flow-title{font-size:20px}.builder-area{grid-template-columns:1fr}.palette-panel{border-right:0;border-bottom:1px solid #29384c;padding:12px}.palette-list{display:flex;overflow:auto;gap:7px}.palette-item{min-width:122px;padding:8px}.palette-item small{display:none}.palette-info,.panel-subtitle{display:none}.inspector-panel{border-left:0;border-top:1px solid #29384c}.inspector-content{padding-top:10px}.inspector-empty{padding:10px}.canvas{min-height:410px}.activity-panel{min-height:125px}.standalone-screen{padding:18px}.system-columns,.stats-grid{grid-template-columns:repeat(2,1fr)}.table-head,.data-row{grid-template-columns:1fr 100px 90px}.table-head span:nth-child(4),.data-row>span:nth-child(4){display:none} }
@media(max-width:500px){ .editor-heading-controls{width:100%}.editor-heading-controls button{padding:8px}.canvas-hint{display:none}.recent-run{grid-template-columns:1fr 60px}.recent-run>small{display:none}.system-columns{grid-template-columns:1fr}.stats-grid{gap:8px}.stat-card{padding:12px}.stat-card .stat-value{font-size:21px}.table-head,.data-row{grid-template-columns:1fr 75px 70px;gap:5px}.topbar .breadcrumbs{display:none} }