:root{
      --bg:#0b1220; --panel:#101a33; --panel2:#0f1a30; --stroke:rgba(255,255,255,.12);
      --text:#e8f0ff; --muted:#90a4c7;
      --ok:#3ddc97; --bad:#ff5c7a; --warn:#ffd166;
      --btn:#142149; --btn2:#1a2a5a; --shadow:0 18px 60px rgba(0,0,0,.45); --r:16px;
    }
    .light{
      --bg:#f5f7fb; --panel:#fff; --panel2:#fff; --stroke:rgba(0,0,0,.10);
      --text:#0b1220; --muted:#4b5f86; --btn:#e9eef8; --btn2:#dfe8fb; --shadow:0 18px 60px rgba(10,20,60,.12);
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
      background:
        radial-gradient(1200px 700px at 20% 0%, rgba(61,220,151,.10), transparent 60%),
        radial-gradient(900px 500px at 95% 20%, rgba(255,209,102,.10), transparent 55%),
        var(--bg);
    }
    header{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);
      background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
      border-bottom:1px solid var(--stroke);
    }
    .wrap{max-width:1300px;margin:0 auto;padding:16px}
    .top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .brand{display:flex;gap:12px;align-items:center}
    .badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(61,220,151,.25), rgba(255,209,102,.18));
      border:1px solid var(--stroke); box-shadow:var(--shadow); font-weight:900}
    h1{margin:0;font-size:18px}
    .sub{color:var(--muted);font-size:13px;margin-top:2px}
    .actions{display:flex;gap:10px;flex-wrap:wrap}
    .btn{border:1px solid var(--stroke); background:linear-gradient(180deg,var(--btn2),var(--btn));
      color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:800;
      box-shadow:0 10px 30px rgba(0,0,0,.18)}
    .btn.ghost{background:transparent;box-shadow:none}
    .btn.small{padding:8px 10px;font-size:13px;border-radius:10px}

    main .grid{max-width:1300px;margin:0 auto;padding:16px;display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
    @media (max-width: 1050px){ main .grid{grid-template-columns:1fr} }

    .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--panel);
      border:1px solid var(--stroke); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
    .hd{padding:14px;border-bottom:1px solid var(--stroke);display:flex;justify-content:space-between;gap:10px;align-items:flex-end}
    .hd h2{margin:0;font-size:15px}
    .hd p{margin:4px 0 0 0;color:var(--muted);font-size:12px}
    .bd{padding:14px}

    /* Editor area (MELHORADO: rolagem + área maior) */
    .editor{
      position:relative;
      height: 640px;              /* aumentado */
      border: 1px dashed var(--stroke);
      border-radius: 16px;
      background: rgba(0,0,0,.08);
      overflow: auto;             /* antes: hidden (agora permite rolar) */
    }
    .light .editor{ background: rgba(10,20,60,.05); }

    .editor::-webkit-scrollbar{ height: 10px; width:10px; }
    .editor::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 10px; }
    .editor::-webkit-scrollbar-track{ background: rgba(0,0,0,.10); }

    .gridbg{
      position:absolute; inset:0;
      background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity:.35;
      pointer-events:none;
    }
    .light .gridbg{
      background-image:
        linear-gradient(to right, rgba(0,0,0,.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.07) 1px, transparent 1px);
      opacity:.22;
    }

    svg.wires{
      position:absolute; inset:0;
      pointer-events:none;
      z-index:4;
      overflow:visible;
    }

    /* Nodes */
    .node{
      position:absolute;
      z-index:2;
      width: 220px;
      border: 1px solid var(--stroke);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
      box-shadow: 0 16px 48px rgba(0,0,0,.25);
      user-select:none;
    }
    .node.small{ width: 160px; }
    .node .title{
      padding: 10px 12px;
      border-bottom: 1px solid var(--stroke);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      cursor: grab;
      font-weight: 900;
    }
    .node .title:active{ cursor:grabbing; }
    .node .body{ padding: 10px 12px; display:flex; flex-direction:column; gap:10px; }
    .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .tag{ font-size:12px; color:var(--muted); }
    select{
      background:rgba(0,0,0,.10); color:var(--text);
      border:1px solid var(--stroke); border-radius:12px; padding:8px 10px; outline:none;
      font-weight:800;
    }
    .light select{ background:rgba(10,20,60,.05); }

    .ports{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .portcol{ display:flex; flex-direction:column; gap:8px; }
    .port{
      display:flex; align-items:center; gap:8px;
      font-size:12px; color:var(--muted);
    }
    .dot{
      width: 12px; height: 12px; border-radius: 99px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.08);
      cursor:pointer;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
    }
    .dot.out{ background: rgba(61,220,151,.18); }
    .dot.in{ background: rgba(255,209,102,.14); }

    .dot.selected{
      outline: 2px solid rgba(255,209,102,.70);
      outline-offset: 2px;
    }

    .chip{
      min-width:46px; text-align:center; padding:6px 10px; border-radius:12px;
      border:1px solid var(--stroke); font-weight:900; letter-spacing:.5px;
      background: rgba(0,0,0,.10);
    }
    .chip.ok{ background: rgba(61,220,151,.16); }
    .chip.bad{ background: rgba(255,92,122,.16); }

    .mini-actions{ display:flex; gap:8px; }
    .iconbtn{
      border:1px solid var(--stroke);
      background:rgba(0,0,0,.10);
      color:var(--text);
      padding:6px 10px;
      border-radius:12px;
      cursor:pointer;
      font-weight:900;
      font-size:12px;
    }
    .light .iconbtn{ background:rgba(10,20,60,.05); }

    /* Right pane */
    .inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    @media (max-width:560px){.inputs{grid-template-columns:repeat(2,1fr)}}
    .inbox{border:1px solid var(--stroke);border-radius:14px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}
    .label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .label b{font-size:14px}
    .label span{font-size:12px;color:var(--muted)}
    .toggle{display:flex;border:1px solid var(--stroke);border-radius:12px;overflow:hidden}
    .toggle button{flex:1;padding:10px 0;border:0;background:transparent;color:var(--text);cursor:pointer;font-weight:900}
    .toggle button.active{background:linear-gradient(135deg, rgba(61,220,151,.20), rgba(255,209,102,.12))}

    .final{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:16px;
      border:1px solid rgba(61,220,151,.35); background:linear-gradient(135deg, rgba(61,220,151,.18), rgba(255,209,102,.10))}
    .final .out{font-size:18px;font-weight:900;letter-spacing:1px;padding:8px 12px;border-radius:14px;border:1px solid var(--stroke);
      background:rgba(0,0,0,.12);min-width:56px;text-align:center}

    .expr{margin-top:12px;padding:12px;border-radius:14px;border:1px solid var(--stroke);color:var(--muted);
      font-size:12px;line-height:1.45;background:rgba(0,0,0,.08)}
    .msg{
      margin-top:12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.08);
      color: var(--muted);
      font-size: 12px;
      line-height:1.45;
    }
    .msg.ok{border-color: rgba(61,220,151,.35); color: var(--text); background: rgba(61,220,151,.10);}
    .msg.warn{border-color: rgba(255,209,102,.35); color: var(--text); background: rgba(255,209,102,.10);}
    .msg.bad{border-color: rgba(255,92,122,.35); color: var(--text); background: rgba(255,92,122,.10);}

    table{width:100%;border-collapse:collapse;border:1px solid var(--stroke);border-radius:14px;overflow:hidden}
    th,td{padding:9px 8px;border-bottom:1px solid var(--stroke);text-align:center;font-size:13px}
    th{font-size:12px;color:var(--muted);background:rgba(0,0,0,.10);position:sticky;top:0}
    .tblwrap{max-height:360px;overflow:auto;border-radius:14px;border:1px solid var(--stroke);display:none}
    .note{margin-top:10px;color:var(--muted);font-size:12px}

    .help{
      margin-top:12px;
      font-size:12px; color:var(--muted);
      border:1px dashed var(--stroke);
      border-radius:14px;
      padding:12px;
      background: rgba(0,0,0,.06);
    }

    input[type="file"]{ display:none; }

/* Ajuste para 2-4 entradas */
.node{ width:240px; }


/* === Ajustes para portas com 2-4 entradas === */
.node{ width: 260px; }
.node.small{ width: 170px; }
.portcol{ gap: 10px; }

/* Conexões sobre os blocos */
.wire-shadow{
  fill:none;
  stroke:rgba(0,0,0,.72);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wire-main{
  fill:none;
  stroke:#79dcff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(79,205,255,.85));
}
.node:hover{
  z-index:3;
}

/* LogicLab 2.0 — bancada realista e responsiva */
:root{
  --bg:#07101c; --panel:#0d1726; --panel2:#111e30; --stroke:rgba(164,190,218,.18);
  --text:#edf6ff; --muted:#91a6bc; --ok:#2ee59d; --bad:#ff657a; --warn:#ffc857;
  --btn:#14243a; --btn2:#1b3150; --shadow:0 20px 60px rgba(0,0,0,.42); --r:18px;
}
html{scroll-behavior:smooth}
body{min-height:100dvh;background:
  radial-gradient(circle at 15% -10%,rgba(0,194,255,.14),transparent 30rem),
  radial-gradient(circle at 95% 15%,rgba(46,229,157,.10),transparent 32rem),
  linear-gradient(145deg,#050b13,#0a1524 55%,#07101c);overscroll-behavior:none}
header{background:rgba(6,13,23,.84);box-shadow:0 10px 35px rgba(0,0,0,.28)}
.wrap,main .grid{max-width:1480px}
.badge{position:relative;width:48px;height:48px;border-radius:14px;background:
  linear-gradient(145deg,#1c3454,#0b1524);border-color:rgba(88,201,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.35);color:#dff7ff}
.pulse{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 12px var(--ok);animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
h1{font-size:20px;letter-spacing:.2px}.version{font-size:9px;color:#06110d;background:var(--ok);
  border-radius:5px;padding:3px 5px;vertical-align:middle;letter-spacing:1px}
.actions{justify-content:flex-end}.btn{min-height:40px;transition:transform .16s ease,border-color .16s ease,filter .16s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.20)}
.btn:hover{transform:translateY(-1px);border-color:rgba(117,207,255,.42);filter:brightness(1.08)}
.btn:active{transform:translateY(1px);filter:brightness(.94)}.btn.primary{color:#04130e;background:
  linear-gradient(180deg,#45edaa,#1cc783);border-color:#72ffc1}.btn.danger{color:#ffdce2;border-color:rgba(255,101,122,.35)}
main .grid{grid-template-columns:minmax(0,1.4fr) minmax(330px,.6fr);gap:16px;padding-bottom:28px}
.card{background:linear-gradient(165deg,rgba(255,255,255,.055),transparent 22%),var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.34)}
.hd{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);padding:16px 18px}
.hd h2{font-size:16px;display:flex;align-items:center;gap:8px}.status-dot{width:9px;height:9px;border-radius:50%;
  background:#56caff;box-shadow:0 0 12px rgba(86,202,255,.8)}.status-dot.live{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.editor{height:clamp(520px,67vh,760px);min-width:760px;background:
  linear-gradient(rgba(7,16,28,.88),rgba(7,16,28,.88)),
  radial-gradient(circle at center,#16304d,#07101c);border-style:solid;box-shadow:inset 0 0 60px rgba(0,0,0,.45)}
.gridbg{background-size:24px 24px,24px 24px;opacity:.55}
.bench-label{position:absolute;right:18px;bottom:14px;color:rgba(145,166,188,.42);font:700 10px/1 monospace;
  letter-spacing:1.8px;pointer-events:none}
.node{border-color:rgba(150,190,225,.28);background:
  linear-gradient(145deg,rgba(37,60,89,.96),rgba(12,24,39,.98));box-shadow:
  inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.45),0 18px 35px rgba(0,0,0,.4)}
.node .title{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.08));touch-action:none}
.node .title:before{content:"⠿";color:rgba(168,199,225,.5);font-size:15px}.node .body{background:
  repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.012) 14px 15px)}
.dot{width:18px;height:18px;border:2px solid rgba(190,213,232,.45);box-shadow:
  inset 0 0 0 3px rgba(0,0,0,.4),0 2px 7px rgba(0,0,0,.4);touch-action:manipulation}
.dot.out{background:#1ad48c;box-shadow:0 0 14px rgba(46,229,157,.45),inset 0 0 0 3px rgba(0,0,0,.38)}
.dot.in{background:#f2b84b;box-shadow:0 0 12px rgba(255,200,87,.3),inset 0 0 0 3px rgba(0,0,0,.38)}
.chip{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;border-radius:8px;background:#07101a;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.65)}.chip.ok,.final .out{color:#77ffbd;text-shadow:0 0 12px rgba(46,229,157,.75)}
.chip.bad{color:#ff91a0}.inbox{background:linear-gradient(145deg,#14243a,#0b1524);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.toggle button{min-height:44px}.toggle button.active{color:#06150f;background:linear-gradient(180deg,#51f0b0,#22c984)}
.final{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.22)}
.final .out{font-size:28px;background:#03130d;border-color:rgba(46,229,157,.4)}
.live-label{font-size:9px;color:#05150f;background:var(--ok);padding:3px 5px;border-radius:5px;margin-left:5px}
.help{line-height:1.6}
:focus-visible{outline:3px solid rgba(86,202,255,.75);outline-offset:2px}

@media (max-width:1050px){
  header{position:relative}.wrap{padding:12px}.top{align-items:flex-start}.brand{width:100%}
  .actions{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .btn.small{padding:9px 7px;font-size:12px}
  main .grid{grid-template-columns:1fr;padding:12px;gap:12px}
}
@media (max-width:680px){
  .wrap{padding:10px}.badge{width:42px;height:42px}.sub{font-size:11px;line-height:1.35}
  h1{font-size:17px}.actions{display:flex;overflow-x:auto;flex-wrap:nowrap;padding:3px 1px 8px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .actions .btn{flex:0 0 auto;scroll-snap-align:start;min-height:44px;padding-inline:12px}
  main .grid{padding:8px}.hd,.bd{padding:12px}.hd p{line-height:1.45}
  .editor{height:58vh;min-height:430px;min-width:720px;border-radius:13px}
  .card{border-radius:14px}.node{transform:scale(.92);transform-origin:top left}
  .inputs{grid-template-columns:repeat(2,1fr)}.inbox{padding:10px}.toggle button{min-height:48px}
  .final{position:sticky;bottom:8px;z-index:4}.help{font-size:11px}
  .tblwrap{max-height:52vh}th,td{min-width:42px}
}
@media (max-width:380px){
  .sub{display:none}.actions .btn{font-size:11px}.inputs{gap:7px}.inbox{padding:8px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}