:root{
      --bg:#0f1115;
      --panel:#171a21;
      --panel2:#1f2430;
      --text:#e8eaf0;
      --muted:#a9b0c0;
      --accent:#7aa2f7;
      --danger:#ff5c7a;
      --grid:rgba(255,255,255,0.05);
      --shadow:0 10px 30px rgba(0,0,0,0.35);
      --radius:14px;
    }
  body[data-theme="light"]{
    --bg:#f6f7fb;
    --panel:#ffffff;
    --panel2:#eef1f6;
    --text:#0f172a;
    --muted:#4b5563;
    --accent:#2563eb;
    --danger:#e11d48;
    --grid:rgba(15,23,42,0.08);
    --shadow:0 10px 24px rgba(15,23,42,0.12);
  }
  body[data-theme="light"] .control{
    background:rgba(255,255,255,0.9);
    border-color:rgba(15,23,42,0.12);
  }
  body[data-theme="light"] .control input[type="text"],
  body[data-theme="light"] .control select{
    background:rgba(255,255,255,0.98);
    border-color:rgba(15,23,42,0.14);
    color:var(--text);
  }
  body[data-theme="light"] .control input[type="color"]{
    border-color:rgba(15,23,42,0.16);
  }
  body[data-theme="light"] #toast{
    background:rgba(255,255,255,0.9);
    border-color:rgba(15,23,42,0.12);
    color:var(--muted);
  }
  body[data-theme="light"] .editorCard{
    background:rgba(255,255,255,0.96);
    border-color:rgba(15,23,42,0.12);
  }
  body[data-theme="light"] .editorCard input,
  body[data-theme="light"] .editorCard textarea{
    background:rgba(255,255,255,0.95);
    border-color:rgba(15,23,42,0.14);
    color:var(--text);
  }

    *{box-sizing:border-box;}
    html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;overflow:hidden;}
    #app{position:relative;height:100%;width:100%;}

    #topbar{
      position:absolute;top:14px;left:14px;right:14px;
      display:flex;align-items:center;gap:10px;
      flex-wrap:wrap;
      row-gap:8px;
      padding:10px 12px;border-radius:var(--radius);
      background:color-mix(in srgb,var(--panel) 90%, black 10%);
      box-shadow:var(--shadow);
      z-index:5;user-select:none;
    }
    .btn{
      border:1px solid rgba(255,255,255,0.12);
      background:var(--panel2);
      color:var(--text);
      padding:8px 10px;border-radius:12px;
      cursor:pointer;font-weight:800;letter-spacing:0.2px;
    }
    .btn:hover{border-color:rgba(255,255,255,0.24);}
    .btn:active{transform:translateY(1px);}
    .btn.danger{border-color:rgba(255,92,122,0.45);}
    .btn.danger:hover{border-color:rgba(255,92,122,0.75);}
    .spacer{flex:1;}

    .control{
      display:flex;align-items:center;gap:10px;
      flex-wrap:wrap;
      padding:6px 10px;border-radius:12px;
      border:1px solid rgba(255,255,255,0.12);
      background:rgba(0,0,0,0.08);
    }
    .control label{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:700;}

    .control input[type="text"]{
      border:1px solid rgba(255,255,255,0.16);
      background:rgba(31,36,48,0.95);
      color:var(--text);
      padding:6px 10px;
      border-radius:12px;
      font-weight:800;
      outline:none;
      min-width:120px;
    }

    .control select{
      appearance:none;
      border:1px solid rgba(255,255,255,0.16);
      background:rgba(31,36,48,0.95);
      color:var(--text);
      padding:6px 10px;
      border-radius:12px;
      font-weight:800;
      cursor:pointer;
    }
    .control select:hover{border-color:rgba(255,255,255,0.28);}

    .control input[type="color"]{
      width:34px;height:28px;
      padding:0;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.18);
      background:transparent;
      cursor:pointer;
    }
    .control input[type="color"]::-webkit-color-swatch-wrapper{padding:0;border-radius:10px;}
    .control input[type="color"]::-webkit-color-swatch{border:none;border-radius:9px;}

    .swatches{display:flex;gap:6px;align-items:center;}
    .swatch{
      width:18px;height:18px;border-radius:6px;
      border:1px solid rgba(255,255,255,0.18);
      cursor:pointer;display:inline-block;
      box-shadow:0 3px 10px rgba(0,0,0,0.25);
      background:#6aa7ff;
    }
    .swatch:hover{border-color:rgba(255,255,255,0.35);}
    .swatch.selected{outline:2px solid var(--accent);outline-offset:2px;}

    #hint{font-size:12px;color:var(--muted);opacity:0.95;white-space:nowrap;flex:1 0 100%;}

    #workspaceWrap{position:absolute;inset:0;}
    #grid{position:absolute;inset:0;
      background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size:40px 40px;
      pointer-events:none;
      opacity:0.9;
    }

    #svg{position:absolute;inset:0;width:100%;height:100%;user-select:none;}
    #svg.pan-mode, #svg.pan-mode *{cursor:grab !important;}
    #svg.pan-active, #svg.pan-active *{cursor:grabbing !important;}

    .node{filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));}
    .node-rect{rx:16;ry:16;stroke:rgba(255,255,255,0.20);stroke-width:1.25;}
    .node.selected .node-rect{stroke:rgba(255,255,255,0.92);stroke-width:2.25;}
    .node.selected{filter:drop-shadow(0 14px 28px rgba(0,0,0,0.65));}

    /* Clean white text with black stroke + soft shadow */
    .node-title{
      font-size:14px;font-weight:900;pointer-events:none;
      fill:#fff;
      paint-order:stroke;
      stroke:rgba(0,0,0,0.65);
      stroke-width:3.2;
      filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.55));
    }
    .node-desc{
      font-size:11.5px;font-weight:800;pointer-events:none;
      fill:#fff;
      paint-order:stroke;
      stroke:rgba(0,0,0,0.65);
      stroke-width:3;
      filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.50));
    }

.port{cursor:crosshair;stroke:rgba(0,0,0,0.35);stroke-width:1;}
    .port-hit{cursor:crosshair;fill:transparent;stroke:transparent;stroke-width:14;}

    .edge{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0.96;}
    .edge-hit{fill:none;stroke:rgba(0,0,0,0);stroke-width:14;cursor:pointer;}
    .edge-outline{fill:none;stroke:rgba(255,255,255,0.92);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none;}
    .edge-label{cursor:pointer;}
    .edge-selected{filter:drop-shadow(0 10px 18px rgba(0,0,0,0.65));}
    .edge-outline.edge-selected{opacity:1;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.65));}

    #toast{
      position:absolute;bottom:14px;left:14px;
      padding:10px 12px;border-radius:12px;
      background:rgba(23,26,33,0.85);
      border:1px solid rgba(255,255,255,0.12);
      color:var(--muted);z-index:6;
      backdrop-filter:blur(6px);
      user-select:none;
      max-width:min(760px,calc(100vw - 28px));
    }
    #toast b{color:var(--text);}

    /* Editors */
    .editorWrap{position:absolute;z-index:10;display:none;pointer-events:auto;}
    .editorCard{
      padding:10px;border-radius:14px;
      border:1px solid rgba(255,255,255,0.18);
      background:rgba(15,17,21,0.96);
      box-shadow:var(--shadow);
      width:300px;
    }
    .editorCard .row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
    .editorCard .row label{font-size:12px;color:var(--muted);font-weight:800;width:68px;}
    .editorCard input,
    .editorCard textarea{
      width:100%;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.18);
      background:rgba(0,0,0,0.18);
      color:var(--text);
      padding:8px 10px;
      outline:none;
      font-weight:800;
    }
    .editorCard textarea{height:90px;resize:vertical;font-weight:650;}
    .editorCard .help{font-size:12px;color:var(--muted);line-height:1.35;}

    @media (max-width: 980px){
      #hint{display:none;}
    }