:root{
    --bg:#0f1320;
    --panel:#151a2b;
    --panel-2:#1c2238;
    --accent:#6ea8fe;
    --accent-2:#9ac1ff;
    --green:#2ecc71;
    --red:#ff6b6b;
    --yellow:#ffd166;
    --text:#e9eefc;
    --muted:#9aa7c7;
    --port:#b9c8ff;
    --frame-border:#2a3760;
    --sidebar-width:336px;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.4 Inter,system-ui,Segoe UI,Arial,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;overflow:hidden}
  #app{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:auto 1fr;height:100%}
  #app.calls-open{grid-template-columns:var(--sidebar-width) 1fr 340px}
  header{grid-column:1/4;display:flex;align-items:center;gap:10px;padding:14px 16px;background:
    radial-gradient(circle at top left, rgba(110,168,254,.14), rgba(110,168,254,0) 28%),
    linear-gradient(180deg,#19203a,#101529 78%);
    border-bottom:1px solid rgba(73,92,148,.42);flex-wrap:wrap;box-shadow:0 10px 28px rgba(0,0,0,.18)}
  header .title{font-weight:800;letter-spacing:.2px;margin-right:auto;font-size:27px;line-height:1}
  header button, header .toggle, header .field {
    min-height:44px;background:rgba(28,34,56,.92);color:var(--text);border:1px solid #2b3a67;border-radius:14px;padding:10px 14px;cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 6px 16px rgba(0,0,0,.12)
  }
  header button:hover{border-color:#5a74be;transform:translateY(-1px)}
  #autoLayoutBtn{
    background:#122449;
    border-color:#3658a3;
    color:#dce8ff;
    font-weight:600;
  }
  #autoLayoutBtn:hover{border-color:#6ea8fe}
  header .toggle{display:inline-flex;align-items:center;gap:10px;font-weight:600}
  header .toggle input{margin:0;width:20px;height:20px}
  header .field{display:flex;align-items:center;gap:8px}
  header .field input, header .field select{
    background:#0f152a;color:var(--text);border:1px solid #2a3760;border-radius:10px;padding:8px 10px;min-width:260px;font:inherit
  }
  #graphSlotsField select{min-width:170px;max-width:260px}

  #library{background:
    linear-gradient(180deg,rgba(22,29,53,.96),rgba(17,22,40,.98)),
    var(--panel);
    border-right:1px solid #1a2136;padding:14px 12px 22px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  #library h3{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:14px 4px 8px}
  #library .block-btn{display:flex;align-items:center;gap:8px;width:100%;background:var(--panel-2);border:1px solid #263055;border-radius:10px;padding:10px;margin:6px 0;cursor:grab;cursor:pointer}
  #library .block-btn span{flex:1}
  #library .block-btn small{color:var(--muted)}
  #library .block-btn:not(.integration-card):hover{border-color:#4560a8;background:linear-gradient(180deg,#212945,#1b233b)}

  #workspace{
    position:relative;background:
      radial-gradient(ellipse at top left,rgba(110,168,254,.08),rgba(0,0,0,0) 40%),
      radial-gradient(ellipse at bottom right,rgba(255,255,255,.04),rgba(0,0,0,0) 40%),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
    overflow:hidden;
    touch-action:pan-x pan-y;
    -ms-touch-action:pan-x pan-y;
  }
  #workspace.panning{cursor:grabbing}

  /* Frames layer (interactive header/handles; body passes through) */
  #framesCanvas{
    position:absolute;inset:0;z-index:5;transform:translate(0px,0px) scale(1);will-change:transform;transform-origin:0 0;
    /* let body pass-through, header/handles are re-enabled */
    pointer-events:none;
  }
  .frame{
    position:absolute;min-width:80px;min-height:60px;border:1px solid var(--frame-border);border-radius:10px;background:rgba(110,168,254,0.08);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
    user-select:none;
    /* let header/handles be interactive, body click-through */
    pointer-events:none;
  }
  .frame.selected{outline:2px solid #3b61c9}
  .frame-header{
    display:flex;align-items:center;gap:6px;padding:6px 8px;background:linear-gradient(180deg,#121735,#0f152a);border-radius:10px 10px 0 0;border-bottom:1px solid var(--frame-border);cursor:move;
    pointer-events:auto;
    touch-action:none;
  }
  .frame-title{
    flex:1;background:transparent;color:#cfe0ff;border:1px dashed transparent;border-radius:6px;padding:2px 6px;outline:none
  }
  .frame-title:focus{border-color:#3852a7;background:#0f152a}
  .frame-tools{display:flex;gap:6px}
  .frame-tools input[type="color"]{
    width:28px;height:22px;padding:0;border:1px solid #2a3760;border-radius:6px;background:#0f152a
  }
  .frame-body{position:absolute;inset:34px 0 0 0;pointer-events:none}
  .resize-handle{
    position:absolute;width:10px;height:10px;background:#9ac1ff;border:2px solid #2e3b78;border-radius:50%;box-shadow:0 0 0 2px rgba(110,168,254,.2);cursor:nwse-resize;
    pointer-events:auto;
    touch-action:none;
  }
  .resize-handle.n{top:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}
  .resize-handle.s{bottom:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}
  .resize-handle.e{right:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize}
  .resize-handle.w{left:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize}
  .resize-handle.nw{top:-6px;left:-6px}
  .resize-handle.ne{top:-6px;right:-6px}
  .resize-handle.sw{bottom:-6px;left:-6px}
  .resize-handle.se{bottom:-6px;right:-6px}

  #canvas{position:absolute;inset:0;z-index:1;transform:translate(0px,0px) scale(1);will-change:transform;transform-origin:0 0;touch-action:pan-x pan-y}
  #edges{
    position:absolute;inset:0;width:100%;height:100%;
    z-index:2;display:block;
    pointer-events:none;
    touch-action:none;
  }
  #edges path{
    fill:none;
    stroke:var(--accent);
    stroke-width:3px;
    stroke-linecap:round;
    filter:drop-shadow(0 0 4px rgba(110,168,254,.3));
    pointer-events:stroke;
    cursor:pointer;
    transition:stroke .12s ease, opacity .12s ease;
  }
  #edges path.incomplete{stroke-dasharray:6 6;stroke:var(--yellow);cursor:default;pointer-events:none}
  #edges path:hover{stroke:var(--accent-2)}
  #edges path.selected{stroke:var(--red)}
  #edges[data-dense="1"] path{filter:none;transition:none}

  .node{
    position:absolute;min-width:240px;max-width:420px;background:var(--panel);
    border:1px solid #263055;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25);
    user-select:none;
    touch-action:auto;
    z-index:1;
  }
  .node.dragging{will-change:left,top}
  .node.is-frozen{
    border-color:#4f74da;
    box-shadow:0 0 0 1px rgba(111,150,255,.35), 0 6px 18px rgba(0,0,0,.25);
  }
  .node.executed-now{
    border-color:#2f8e5d;
    box-shadow:0 0 0 1px rgba(87,223,150,.36), 0 0 0 4px rgba(87,223,150,.14), 0 6px 18px rgba(0,0,0,.25);
  }
  .node.executed-before{
    border-color:#34457a;
    box-shadow:0 0 0 1px rgba(112,142,220,.24), 0 6px 18px rgba(0,0,0,.25);
  }
  .node.is-frozen.executed-now{
    box-shadow:0 0 0 1px rgba(111,150,255,.35), 0 0 0 4px rgba(87,223,150,.12), 0 6px 18px rgba(0,0,0,.25);
  }
  .node.selected{outline:2px solid #3b61c9}
  .node-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;padding:8px 10px;background:linear-gradient(180deg, #1a2140, #161b31);border-bottom:1px solid #263055;border-radius:12px 12px 0 0;cursor:move;
    touch-action:none;
  }
  .node-title{font-weight:700;font-size:13px}
  .node-actions{display:flex;gap:6px}

  .node.compact .node-content{display:none}
  .node.compact .output-view{display:none}
  .node.compact .node-header{padding:6px 8px}
  .node.compact .exec-time{display:none}
  .node.compact .ports{padding-top:6px}
  .node-actions button{
    background:#0f152a;border:1px solid #2a3760;color:#cfe0ff;border-radius:8px;padding:4px 8px;cursor:pointer
  }
  .node-content{padding:8px 10px 12px;display:flex;flex-direction:column;gap:8px;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .node details{
    border:1px solid #2a3760;
    border-radius:10px;
    padding:6px 8px;
    background:#0f152a;
  }
  .node details + details{margin-top:8px}
  .node details > summary{
    cursor:pointer;
    font-weight:600;
    color:#c7d2ff;
    list-style:none;
  }
  .node details > summary::-webkit-details-marker{display:none}
  .node details[open] > summary{margin-bottom:6px}
  .row{display:flex;gap:8px;align-items:center;min-width:0}
  .row:has(textarea){align-items:flex-start}
  .row:has(textarea) label{padding-top:8px}
  .row label{width:98px;color:var(--muted);font-size:12px}
  .row input[type="text"], .row input[type="number"], .row textarea, .row select{
    flex:1;min-width:0;max-width:100%;background:#0f152a;color:var(--text);border:1px solid #2a3760;border-radius:8px;padding:6px 8px;font:inherit
  }
  .row textarea{min-height:60px;resize:vertical;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  .editor-row{align-items:flex-start}
  .editor-row label{padding-top:8px}
  .input-editor-field{
    min-height:180px;
    max-height:none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height:1.45;
    white-space:pre-wrap;
    overflow:auto;
    resize:vertical;
    cursor:text;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  .code-editor-field{
    white-space:pre;
    tab-size:4;
    min-height:240px;
  }
  .text-input-field{
    min-height:40px;
    line-height:1.35;
  }
  .input-editor-field:focus{
    outline:1px solid rgba(110,168,254,.35);
    box-shadow:0 0 0 3px rgba(110,168,254,.12);
  }
  .editor-control{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
  .editor-actions{justify-content:flex-end}
  .input-editor-modal .modal-body{max-height:78vh}
  .input-editor-text{
    min-height:60vh;
    line-height:1.5;
    tab-size:4;
  }
  .vars{display:flex;flex-direction:column;gap:6px}
  .var-item{display:grid;grid-template-columns:84px 1fr auto;gap:6px;align-items:center}
  .var-item input[type="text"]{width:100%}
  .var-item small{color:var(--muted)}
  .mini{font-size:11px;color:var(--muted)}
  .add-btn{background:#122046;border:1px dashed #3852a7;color:#bcd1ff;padding:6px 8px;border-radius:8px;cursor:pointer}
  .danger{background:#3a1220;border-color:#86314d;color:#ffc9d6}
  .ok{background:#102b22;border-color:#1f7f55;color:#baf3d0}
  .ports{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-top:1px solid #263055;background:#121735;border-radius:0 0 12px 12px;position:relative}
  .ports.hidden{display:none}
  .port-col{display:flex;flex-direction:column;gap:6px}
  .port{
    display:flex;align-items:center;gap:6px;color:#dbe6ff;
  }
  .port .dot{
    width:12px;height:12px;background:var(--port);border:2px solid #2e3b78;border-radius:50%;cursor:pointer;box-shadow:0 0 0 3px rgba(110,168,254,0);
    transition:.2s;
    touch-action:none;
  }
  .port.out .dot{background:linear-gradient(180deg,#9ac1ff,#6ea8fe)}
  .port.in .dot{background:linear-gradient(180deg,#a0ffd1,#2ecc71)}
  .port .dot.pending{box-shadow:0 0 0 4px rgba(110,168,254,.35)}
  .port .name{font-size:12px;color:#cfe0ff}
  .hint{color:var(--muted);font-size:12px}

  /* Auth & account pages */
  .auth-body,
  .account-body,
  .graphs-body{
    background:
      radial-gradient(circle at 10% 10%, rgba(255,174,93,.18), rgba(255,174,93,0) 40%),
      radial-gradient(circle at 90% 20%, rgba(82,215,255,.18), rgba(82,215,255,0) 42%),
      linear-gradient(160deg,#0d121f,#121a33 45%, #0b101d);
    color:#eef2ff;
    font-family:"Space Grotesk","Fraunces","Trebuchet MS",sans-serif;
  }
  .page-center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 18px;position:relative;overflow:hidden}
  .auth-shell{display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,1.1fr);gap:28px;max-width:980px;width:100%;position:relative;z-index:2}
  .auth-visual{padding:28px 24px;border-radius:20px;background:linear-gradient(160deg,rgba(20,31,58,.86),rgba(12,18,33,.92));border:1px solid rgba(110,168,254,.3);box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .auth-visual h2{font-family:"Fraunces","Space Grotesk",serif;font-size:28px;margin:0 0 12px}
  .auth-visual .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(110,168,254,.12);border:1px solid rgba(110,168,254,.3);padding:6px 12px;border-radius:999px;font-size:12px;color:#d5e5ff;margin-bottom:16px}
  .auth-visual ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
  .auth-visual li{background:rgba(15,21,42,.6);border:1px solid rgba(110,168,254,.2);padding:10px 12px;border-radius:12px}
  .auth-panel{position:relative}
  .auth-card{width:100%;background:rgba(18,24,42,.92);border:1px solid rgba(120,150,220,.35);border-radius:20px;padding:26px 28px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
  .auth-header{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
  .brand{font-weight:700;font-size:24px;letter-spacing:.2px}
  .muted{color:#a9b4d4}
  .auth-tabs{display:flex;gap:8px;margin-bottom:18px}
  .tab{flex:1;background:#1a2341;border:1px solid #2f3e6d;color:#d9e2ff;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:600;transition:.2s}
  .tab.active{border-color:#7fb7ff;box-shadow:0 0 0 1px rgba(127,183,255,.4), 0 10px 24px rgba(23,34,66,.4)}
  .form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
  .form-field label{font-size:12px;color:#a9b4d4}
  .input{background:#0f152a;color:#eef2ff;border:1px solid #2a3760;border-radius:12px;padding:10px 12px;font:inherit}
  .btn{background:#1b2442;border:1px solid #2f3e6d;color:#eef2ff;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:600;transition:.2s}
  .btn.primary{background:#0f2c22;border-color:#1f7f55;color:#baf3d0}
  .btn.ghost{background:transparent;border-color:#3a4a78;color:#dbe6ff}
  .btn:hover{transform:translateY(-1px)}
  .btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .error{color:#ffd6df;background:#3a1624;border:1px solid #6e2c45;border-radius:12px;padding:10px 12px;margin-top:8px;display:none}
  .auth-orb{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,170,92,.45), rgba(255,170,92,0) 55%);filter:blur(0);top:-80px;right:-60px;opacity:.7}
  .auth-orb.second{width:220px;height:220px;left:-80px;bottom:-60px;background:radial-gradient(circle at 30% 30%, rgba(82,215,255,.45), rgba(82,215,255,0) 55%)}
  .page-container{min-height:100vh;padding:28px 24px;position:relative}
  .page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
  .page-title{font-size:24px;font-weight:700}
  .page-subtitle{color:#a9b4d4}
  .card{background:rgba(17,23,42,.92);border:1px solid rgba(120,150,220,.35);border-radius:18px;padding:22px 24px;box-shadow:0 18px 40px rgba(0,0,0,.3)}
  .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
  .metric-card{background:#141c36;border:1px solid #2c3b66;border-radius:14px;padding:14px}
  .metric-value{font-size:20px;font-weight:700}
  .list{display:flex;flex-direction:column;gap:12px}
  .graph-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(17,23,42,.95);border:1px solid #2b3a67;border-radius:16px;padding:16px 18px}
  .graph-meta{display:flex;flex-direction:column;gap:6px}
  .graph-title{font-weight:700;font-size:16px}
  .graph-actions{display:flex;gap:8px;flex-wrap:wrap}
  .graph-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(127,183,255,.12);border:1px solid rgba(127,183,255,.35);color:#cfe0ff}

  @media (max-width: 860px){
    .auth-shell{grid-template-columns:1fr}
    .auth-visual{order:2}
  }
  .output-view{
    background:#0f152a;border:1px solid #2a3760;border-radius:8px;padding:8px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-height:140px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y
  }
  .output-view[data-truncated="1"]{
    border-color:#405ea8;
    background:linear-gradient(180deg,#101935,#0f152a);
  }
  textarea[data-large-text="1"]{
    max-height:180px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    border-color:#405ea8 !important;
    background:linear-gradient(180deg,#101935,#0f152a) !important;
  }
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#b5c8ff;background:#17214a;border:1px solid #2a3760;border-radius:999px;padding:2px 8px}
  .tiny{font-size:11px;color:var(--muted)}
  .muted{color:var(--muted)}

  .progress{position:relative;flex:1;height:10px;background:#0f152a;border:1px solid #2a3760;border-radius:999px;overflow:hidden}
  .progress .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#2ecc71,#6ea8fe)}
  .progress-text{font-size:11px;color:var(--muted);margin-left:6px;min-width:70px;text-align:right}

  .marquee{
    position:absolute;
    z-index:3;
    border:1px dashed var(--accent);
    background:rgba(110,168,254,0.12);
    pointer-events:none;
  }

  .kv-row{display:grid;grid-template-columns:84px 1fr auto;gap:6px;align-items:center}
  .kv-row input{width:100%}
  .file-list{display:flex;flex-direction:column;gap:6px}
  .file-item{display:flex;align-items:center;gap:8px;background:#0f152a;border:1px solid #2a3760;border-radius:8px;padding:6px 8px}
  .file-item.with-preview{align-items:flex-start}
  .file-item .name{flex:1}
  .file-thumb{
    width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid #2a3760;flex:0 0 auto;background:#0b1020
  }
  .image-preview-box{display:flex;flex-direction:column;gap:8px}
  .image-thumb{
    display:block;max-width:100%;max-height:260px;object-fit:contain;border-radius:10px;border:1px solid #2a3760;background:#0b1020
  }
  .image-thumb.can-open-fullscreen,
  .file-thumb.can-open-fullscreen{cursor:zoom-in}

  #srvCatalogBlocks{display:flex;flex-direction:column;gap:10px}
  .integration-section-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin:12px 2px 2px;padding-top:2px
  }
  .integration-section-title{
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c9d7ff
  }
  .integration-section-hint{
    font-size:11px;color:var(--muted)
  }
  .integration-card{
    display:flex;flex-direction:column;align-items:stretch;
    gap:10px;padding:14px 14px 12px;border-radius:18px;
    background:
      radial-gradient(circle at top right, rgba(110,168,254,.08), rgba(110,168,254,0) 34%),
      linear-gradient(180deg,#1a2140,#161d34 82%);
    border:1px solid #2b3965;
    box-shadow:0 8px 22px rgba(3,8,22,.22)
  }
  .integration-card:hover{border-color:#4e67b2;box-shadow:0 14px 28px rgba(3,8,22,.28)}
  .integration-card-enabled{
    border-color:#245f4b;
    background:
      radial-gradient(circle at top right, rgba(46,204,113,.12), rgba(46,204,113,0) 34%),
      linear-gradient(180deg,#18223b,#141b31 82%)
  }
  .integration-card-header{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px
  }
  .integration-card-title-wrap{min-width:0;display:flex;flex-direction:column;gap:8px}
  .integration-card-title{
    font-size:20px;line-height:1.1;font-weight:800;color:#f2f6ff;word-break:break-word
  }
  .integration-card-meta{display:flex;flex-wrap:wrap;gap:6px}
  .integration-chip{
    display:inline-flex;align-items:center;min-height:24px;padding:4px 10px;border-radius:999px;
    background:#14203f;border:1px solid #33467c;color:#d8e5ff;font-size:11px;font-weight:700
  }
  .integration-chip-soft{
    background:rgba(19,27,51,.78);border-color:#2a3965;color:#aebcdf;font-weight:600
  }
  .integration-status{
    flex:0 0 auto;display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;
    background:#112a22;border:1px solid #24644f;color:#bdf3d5;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em
  }
  .integration-card:not(.integration-card-enabled) .integration-status{
    background:#162142;border-color:#30457d;color:#cfe0ff
  }
  .integration-card-desc{
    color:#b7c3e3;font-size:14px;line-height:1.42
  }
  .integration-card-actions{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap
  }
  .integration-card-actions button{
    min-height:38px;padding:8px 12px;border-radius:12px
  }
  .integration-card-actions .ok{
    font-weight:700
  }
  .integration-usage{
    display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;
    background:#18213d;border:1px solid #344b86;color:#c9d8ff;font-size:11px;font-weight:700
  }
  .integration-card button[disabled]{
    opacity:.62;cursor:not-allowed;transform:none
  }

  .integration-blocks{
    display:flex;flex-direction:column;gap:8px;
    background:rgba(10,14,28,.55);
    border:1px solid rgba(42,55,96,.85);
    border-radius:14px;
    padding:10px 10px 8px;
  }
  .integration-blocks-head{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
  .integration-blocks-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .integration-block-btn{
    padding:8px 10px;border-radius:999px;
    background:#0f152a;border:1px solid #2a3760;color:#d8e5ff;
    font-size:12px;font-weight:700;cursor:pointer
  }
  .integration-block-btn:hover{border-color:#4e67b2}

  @media (max-width: 1280px){
    :root{--sidebar-width:312px}
    header .title{font-size:23px}
  }

  #callsPanel{
    display:none;background:var(--panel);border-left:1px solid #1a2136;overflow:auto;padding:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  }
  #app.calls-open #callsPanel{display:block}
  #callsPanel .calls-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  #callsList{display:flex;flex-direction:column;gap:8px}
  .call-item{background:var(--panel-2);border:1px solid #263055;border-radius:10px;padding:8px;display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center}
  .call-method{font-weight:700}
  .call-url{font-size:12px;color:#cfe0ff;word-break:break-all}
  .call-status{justify-self:end}
  .call-time{font-size:11px;color:var(--muted)}
  .call-body{grid-column:1/4;font-size:12px;color:#bfcaff;background:#0f152a;border:1px solid #2a3760;border-radius:8px;padding:6px;white-space:pre-wrap;max-height:120px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  .status-ok{color:#baf3d0;border-color:#2f855a;background:#102b22}
  .status-err{color:#ffc9d6;border-color:#86314d;background:#3a1220}
  .badge.dot{width:8px;height:8px;padding:0;border-radius:50%}

  #edgePanel{
    display:none;
    position:fixed;
    right:12px;
    bottom:12px;
    width:420px;
    max-width:calc(100vw - 24px);
    max-height:66vh;
    background:var(--panel);
    border:1px solid #263055;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    z-index:900;
    overflow:hidden;
  }
  #app.calls-open #edgePanel{right:352px}
  #edgePanel .edge-header{
    display:flex;align-items:center;gap:8px;
    padding:10px;
    background:linear-gradient(180deg,#1a2140,#161b31);
    border-bottom:1px solid #263055
  }
  #edgePanel .edge-header .title{font-weight:700}
  #edgePanel .edge-header button{
    margin-left:auto;
    background:var(--panel-2);
    color:var(--text);
    border:1px solid #263055;
    border-radius:8px;
    padding:8px 12px;
    cursor:pointer;
  }
  #edgePanel .edge-body{padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:calc(66vh - 54px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  #edgePanel .output-view{max-height:42vh}

  .modal-overlay{
    position:fixed;inset:0;background:rgba(5,8,18,0.6);backdrop-filter:saturate(140%) blur(2px);
    display:none;align-items:center;justify-content:center;z-index:1000;
  }
  .modal{
    width:520px;max-width:92vw;background:var(--panel);border:1px solid #263055;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden
  }
  .modal.modal-wide{width:980px;max-width:96vw}
  .modal-header{
    display:flex;align-items:center;gap:8px;padding:10px;background:linear-gradient(180deg,#1a2140,#161b31);border-bottom:1px solid #263055
  }
  .modal-title{font-weight:700}
  .modal-body{max-height:60vh;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  .modal-body.integrations-body{max-height:74vh}
  .modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:10px;border-top:1px solid #263055;background:#121735}
  .modal .row-slim{display:flex;align-items:center;gap:8px}
  .modal .pill{
    display:inline-flex;align-items:center;gap:8px;background:#0f152a;border:1px solid #2a3760;border-radius:10px;padding:8px 10px
  }
  .fn-item{
    display:flex;align-items:center;gap:10px;background:#0f152a;border:1px solid #2a3760;border-radius:10px;padding:8px 10px
  }
  .fn-item .fn-name{flex:1}
  .modal button, .modal .toggle, .modal select, .modal input[type="text"], .modal input[type="number"], .modal textarea{
    background:var(--panel-2);color:var(--text);border:1px solid #263055;border-radius:8px;padding:8px 12px;cursor:pointer
  }
  .modal textarea{min-height:110px;resize:vertical}
  .modal .toggle{display:inline-flex;align-items:center;gap:6px}
  .modal .tiny{color:var(--muted);font-size:12px}

  .output-editor-modal .modal-body{max-height:78vh}
  .output-editor-text{
    min-height:60vh;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space:pre;
  }

  .node .output-view{cursor:zoom-in;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  .node .output-view[data-media-preview="1"]{cursor:default}
  body.viewer-open{overflow:hidden}
  .viewer-overlay{
    position:fixed;inset:0;display:none;align-items:center;justify-content:center;
    background:rgba(3,6,16,.88);backdrop-filter:saturate(130%) blur(4px);z-index:1100
  }
  .viewer-shell{
    width:min(96vw, 1600px);height:min(96vh, 1000px);display:flex;flex-direction:column;gap:12px;
    padding:16px 18px 18px
  }
  .viewer-head{
    display:flex;align-items:center;gap:12px;padding:0 4px;color:#eef3ff
  }
  .viewer-title{
    flex:1;min-width:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .viewer-head button{
    background:#131c37;color:var(--text);border:1px solid #2a3760;border-radius:10px;padding:9px 14px;cursor:pointer
  }
  .viewer-stage{
    flex:1;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(71,90,145,.55);border-radius:18px;background:rgba(10,14,28,.68);overflow:hidden
  }
  .viewer-stage img{
    max-width:100%;max-height:100%;object-fit:contain;background:
      linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%),
      linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%);
    background-position:0 0, 12px 12px;
    background-size:24px 24px;
  }

  /* Trace viewer */
  .modal.trace-modal{width:1180px;max-width:98vw}
  .trace-body{max-height:78vh;overflow:hidden;padding:10px;display:flex;flex-direction:row;gap:10px}
  .trace-left{flex:1.2;min-width:360px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
  .trace-right{flex:0.8;min-width:300px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
  .trace-tree{
    flex:1;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    background:#0f152a;
    border:1px solid #2a3760;
    border-radius:10px;
    padding:8px;
  }
  .trace-details{max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
	  .trace-row{
	    display:flex;
	    align-items:flex-start;
	    gap:8px;
	    padding:6px 8px;
	    border-radius:8px;
	    cursor:pointer;
	    user-select:none;
	  }
  .trace-row:hover{background:rgba(130,170,255,.08)}
  .trace-row.is-selected{background:rgba(130,170,255,.14);outline:1px solid rgba(140,185,255,.35)}
  .trace-row.is-error{background:rgba(255,120,155,.08)}
  .trace-row.is-error:hover{background:rgba(255,120,155,.12)}
  .trace-row .trace-indent{width:0;flex:0 0 auto}
  .trace-row .trace-caret{
    width:22px;height:22px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;
    border-radius:7px;
    border:1px solid #263055;
    background:var(--panel-2);
    color:var(--text);
    cursor:pointer;
  }
  .trace-row .trace-caret.is-empty{opacity:.35;cursor:default}
  .trace-row .trace-kind{
    font-size:11px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid #2a3760;
    color:rgba(210,228,255,.92);
    background:rgba(13,19,40,.6);
    flex:0 0 auto;
  }
	  .trace-row .trace-name{flex:1;min-width:120px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
	  .trace-row .trace-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	  .trace-row .trace-sub{font-size:11px;color:rgba(170,190,230,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	  .trace-row .trace-meta{flex:0 0 auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
  .trace-row .trace-dur{font-variant-numeric:tabular-nums}
  .trace-row .trace-status{font-size:11px;padding:2px 6px;border-radius:999px;border:1px solid #263055;background:#101733;color:rgba(210,228,255,.9)}
  .trace-row.is-error .trace-status{border-color:#86314d;background:#3a1220;color:#ffb3c1}

  #minimap{
    position:absolute;
    right:14px;
    bottom:14px;
    width:240px;
    height:156px;
    z-index:30;
    border:1px solid #2a3760;
    border-radius:10px;
    background:rgba(12,18,35,.82);
    box-shadow:0 8px 22px rgba(0,0,0,.34);
    overflow:hidden;
    cursor:grab;
    touch-action:none;
  }
  #minimap:active{cursor:grabbing}
  #minimapCanvas{
    width:100%;
    height:100%;
    display:block;
  }
  #minimapViewport{
    position:absolute;
    border:1px solid rgba(180,210,255,.95);
    background:rgba(130,170,255,.14);
    border-radius:5px;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(18,26,48,.5);
  }

  @media (max-width: 1100px) {
    #minimap{
      width:190px;
      height:126px;
      right:10px;
      bottom:10px;
    }
  }

  @media (hover: none), (pointer: coarse) {
    header button,
    header .toggle,
    header .field,
    .btn,
    .tab,
    .add-btn,
    .node-actions button,
    #edgePanel .edge-header button,
    .modal button {
      min-height:38px;
      touch-action:manipulation;
    }
    .node-header,
    .frame-header {
      min-height:40px;
      -webkit-user-select:none;
      user-select:none;
    }
    .node-actions button {
      padding:6px 10px;
    }
    .port .dot {
      position:relative;
      width:16px;
      height:16px;
      flex:0 0 16px;
    }
    .port .dot::after {
      content:"";
      position:absolute;
      inset:-12px;
      border-radius:999px;
    }
    .row input[type="text"],
    .row input[type="number"],
    .row textarea,
    .row select,
    .modal input[type="text"],
    .modal input[type="number"],
    .modal textarea,
    .modal select {
      min-height:38px;
      font-size:16px;
      touch-action:manipulation;
    }
    .input-editor-field,
    .output-view,
    textarea[data-large-text="1"],
    .modal-body,
    #library,
    #callsPanel,
    #edgePanel .edge-body,
    .trace-tree,
    .trace-details {
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
    }
  }

  @media (max-width: 900px) {
    :root{--sidebar-width:min(336px, 44vw)}
    #app.calls-open{grid-template-columns:var(--sidebar-width) 1fr}
    #callsPanel{
      position:fixed;
      right:10px;
      top:calc(env(safe-area-inset-top, 0px) + 104px);
      bottom:10px;
      width:min(360px, calc(100vw - 20px));
      z-index:850;
      border:1px solid #263055;
      border-radius:12px;
      box-shadow:0 12px 34px rgba(0,0,0,.45);
    }
    #app.calls-open #edgePanel{right:12px}
    header{gap:8px;padding:10px}
    header .title{font-size:22px;min-width:100%}
    header .field input,
    header .field select{min-width:150px;max-width:48vw}
  }