:root {
  --nb-ink:#08070c;--nb-panel:#111018;--nb-panel-2:#18161f;--nb-line:rgba(255,255,255,.13);
  --nb-red-line:rgba(255,49,49,.38);--nb-red:#ff3131;--nb-red-dark:#e10f22;
  --nb-text:#fffdf8;--nb-muted:#aaa5b0;--nb-radius:22px;--nb-shadow:0 26px 70px rgba(0,0,0,.34);
  --bg:var(--nb-ink);--panel:var(--nb-panel);--panel2:var(--nb-panel-2);--border:var(--nb-line);
  --text:var(--nb-text);--muted:var(--nb-muted);--red:var(--nb-red);--red-weak:rgba(255,49,49,.15);
  --editor-bg:var(--nb-ink);--editor-bg-soft:#111018;--editor-surface:#15131d;
  --editor-surface-strong:#1b1822;--editor-surface-raised:#211d29;
  --editor-border:rgba(255,255,255,.14);--editor-border-soft:rgba(255,255,255,.1);
  --editor-text:var(--nb-text);--editor-text-soft:#cac5cf;--editor-muted:var(--nb-muted);
  --editor-accent:var(--nb-red-dark);--editor-accent-strong:var(--nb-red);
  --editor-accent-soft:rgba(255,49,49,.13);--editor-link:#fffdf8;--editor-radius:16px;
}
html{background:var(--nb-ink)}
body.nodebuilder-app{
  min-height:100%;color:var(--nb-text);font-family:"DM Sans",system-ui,sans-serif;
  background:radial-gradient(circle at 12% 5%,rgba(255,49,49,.17),transparent 26rem),radial-gradient(circle at 88% 24%,rgba(151,0,20,.13),transparent 34rem),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),var(--nb-ink)!important;
  background-size:auto,auto,68px 68px,68px 68px,auto!important;
}
.nodebuilder-app .editor-global-shell{
  width:min(1680px,calc(100% - 32px));margin:16px auto 24px;padding:11px;
  border:1px solid var(--nb-red-line);border-radius:18px;background:rgba(8,7,12,.9);
  box-shadow:0 18px 55px rgba(0,0,0,.42),0 0 30px rgba(225,15,34,.08)
}
.nodebuilder-app .editor-global-brand{
  min-height:40px;padding-inline:15px;border:1px solid var(--nb-red);border-radius:12px;
  background:#050409!important;color:var(--nb-text)!important;font-family:"Archivo Black",Impact,sans-serif;letter-spacing:-.025em
}
.nodebuilder-app .editor-global-link,.nodebuilder-app .editor-section-link{border-radius:10px;color:#c9c5cf}
.nodebuilder-app .editor-global-link:hover,.nodebuilder-app .editor-section-link:hover,
.nodebuilder-app .editor-global-link.is-active,.nodebuilder-app .editor-section-link.is-active{
  border-color:var(--nb-red-line);background:rgba(255,49,49,.11);color:var(--nb-text)
}
.nodebuilder-hero{
  position:relative;width:min(1680px,calc(100% - 32px));margin:0 auto 18px;padding:clamp(24px,3vw,42px);
  overflow:hidden;border:1px solid var(--nb-red-line);border-radius:26px;
  background:linear-gradient(125deg,rgba(225,15,34,.2),rgba(17,16,24,.9) 44%,rgba(8,7,12,.96));box-shadow:var(--nb-shadow)
}
.nodebuilder-hero:after{content:"NODE";position:absolute;right:-1rem;bottom:-2.5rem;color:rgba(255,255,255,.035);font:clamp(6rem,13vw,13rem)/.8 "Archivo Black",Impact,sans-serif;pointer-events:none}
.nodebuilder-kicker{display:flex;align-items:center;gap:9px;color:var(--nb-red);font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.nodebuilder-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:#37e66b;box-shadow:0 0 13px #37e66b}
.nodebuilder-hero h1{position:relative;z-index:1;margin:12px 0 8px;font:clamp(2.35rem,5vw,5rem)/.9 "Archivo Black",Impact,sans-serif;letter-spacing:-.055em}
.nodebuilder-hero p{position:relative;z-index:1;max-width:760px;margin:0;color:var(--nb-muted);line-height:1.65}
.nodebuilder-app .layout{width:min(1680px,calc(100% - 32px));margin:0 auto;padding:0 0 30px;grid-template-columns:minmax(340px,.82fr) minmax(620px,1.18fr);gap:18px;align-items:start}
.nodebuilder-app .panel{padding:clamp(16px,2vw,24px);border:1px solid var(--nb-line)!important;border-radius:var(--nb-radius);background:linear-gradient(145deg,rgba(24,22,31,.97),rgba(12,11,17,.96))!important;box-shadow:var(--nb-shadow)}
.nodebuilder-app .title{margin-bottom:14px;color:var(--nb-text);font:1.25rem/1.1 "Archivo Black",Impact,sans-serif;letter-spacing:-.025em}
.nodebuilder-app #right{top:18px;height:calc(100vh - 36px);min-width:0;gap:14px}
.nodebuilder-app .toolbar{gap:9px}
.nodebuilder-app .btn,.nodebuilder-app .button,.nodebuilder-app button:not(.editor-global-link){min-height:40px;padding:9px 14px;border:1px solid rgba(255,49,49,.42)!important;border-radius:999px;background:rgba(255,49,49,.09)!important;color:var(--nb-text)!important;font-weight:800;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.nodebuilder-app .btn:hover,.nodebuilder-app .button:hover,.nodebuilder-app button:not(.editor-global-link):hover{transform:translateY(-2px);border-color:var(--nb-red)!important;background:rgba(255,49,49,.18)!important}
.nodebuilder-app .btn.primary,.nodebuilder-app button.primary{border-color:var(--nb-red)!important;background:var(--nb-red-dark)!important;box-shadow:0 10px 28px rgba(225,15,34,.22)}
.nodebuilder-app .btn.xs{min-height:28px;padding:4px 9px;font-size:.7rem}
.nodebuilder-app input,.nodebuilder-app select,.nodebuilder-app textarea{min-height:42px;border:1px solid var(--nb-line)!important;border-radius:12px!important;background:rgba(5,4,9,.78)!important;color:var(--nb-text)!important;font:inherit;outline:none}
.nodebuilder-app input:focus,.nodebuilder-app select:focus,.nodebuilder-app textarea:focus{border-color:var(--nb-red)!important;box-shadow:0 0 0 3px rgba(255,49,49,.13)}
.nodebuilder-app .items,.nodebuilder-app .tree{border:1px solid var(--nb-line);border-radius:16px;background:rgba(5,4,9,.55)}
.nodebuilder-app .grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.nodebuilder-app .card{min-width:0;padding:12px;border:1px solid var(--nb-line)!important;border-radius:15px;background:rgba(18,16,24,.94)!important;color:var(--nb-text);box-shadow:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.nodebuilder-app .card:hover{transform:translateY(-3px);border-color:var(--nb-red-line)!important;background:rgba(31,25,35,.98)!important}
.nodebuilder-app .card.in-group{border-color:var(--nb-red)!important;background:rgba(255,49,49,.1)!important;box-shadow:inset 0 0 0 1px rgba(255,49,49,.25)}
.nodebuilder-app .node{min-width:600px;padding:9px;border:1px solid var(--nb-line);border-radius:12px;background:rgba(17,15,23,.96)}
.nodebuilder-app .node:hover{border-color:rgba(255,49,49,.28)}
.nodebuilder-app .node.selected{border-color:var(--nb-red);background:rgba(255,49,49,.09);box-shadow:inset 3px 0 0 var(--nb-red)}
.nodebuilder-app .node .icon,.nodebuilder-app .twist{border-color:var(--nb-line);background:#08070c}
.nodebuilder-app .children{border-left-color:rgba(255,49,49,.34)}
.nodebuilder-app textarea#jsonOut{min-height:150px;padding:14px;font:.82rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}
.nodebuilder-app #lmntFooter{width:min(1680px,calc(100% - 32px));margin:0 auto 22px!important;border:1px solid var(--nb-line)!important;border-radius:18px;background:rgba(8,7,12,.84)!important;color:var(--nb-muted)!important;overflow:hidden}
.nodebuilder-app #lmntFooter .wrap{max-width:none;padding:16px 20px}
.nodebuilder-app #lmntFooter .badge{border-color:var(--nb-red-line);background:rgba(255,49,49,.1);color:var(--nb-text)}
@media(max-width:1200px){.nodebuilder-app .layout{grid-template-columns:1fr}.nodebuilder-app #right{position:static;height:auto;min-width:0}}
@media(max-width:720px){
  .nodebuilder-app .editor-global-shell,.nodebuilder-hero,.nodebuilder-app .layout,.nodebuilder-app #lmntFooter{width:min(100% - 20px,1680px)}
  .nodebuilder-hero{padding:24px 20px;border-radius:20px}.nodebuilder-hero h1{font-size:clamp(2.2rem,13vw,3.6rem)}
  .nodebuilder-app .panel{padding:14px;border-radius:18px}.nodebuilder-app .toolbar{align-items:stretch!important}
  .nodebuilder-app .toolbar>input,.nodebuilder-app .toolbar>select,.nodebuilder-app .toolbar>.btn,.nodebuilder-app .toolbar>.button{flex:1 1 100%;width:100%}
  .nodebuilder-app .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nodebuilder-app .tree{max-height:62vh}.nodebuilder-app .node{min-width:560px}
  .nodebuilder-app #right>div:first-child{align-items:flex-start!important;flex-direction:column}.nodebuilder-app #right>div:first-child>.right{width:100%;display:grid;grid-template-columns:1fr}
  .nodebuilder-app #lmntFooter .wrap{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.nodebuilder-app *,.nodebuilder-app *:before,.nodebuilder-app *:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* WORKBENCH LAYOUT V2: fixed desktop surface with local scroll areas */
@media (min-width: 1001px) {
  body.nodebuilder-workbench {
    width: 100%;
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .nodebuilder-workbench .editor-global-shell {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 8px;
  }
  .nodebuilder-workbench .editor-global-brand { min-height: 34px; }
  .nodebuilder-workbench .editor-global-link { min-height: 30px; padding-block: 5px; }
  .nodebuilder-workbench .editor-section-menu { margin-top: 6px; padding-top: 6px; }
  .nodebuilder-workbench .layout {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding-bottom: 10px;
    grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr);
    align-items: stretch;
  }
  .nodebuilder-workbench .panel {
    min-height: 0;
    height: 100%;
    padding: 16px;
    overflow: hidden;
  }
  .nodebuilder-workbench #center {
    display: flex;
    flex-direction: column;
  }
  .nodebuilder-workbench #center > .title,
  .nodebuilder-workbench #center > .toolbar {
    flex: 0 0 auto;
  }
  .nodebuilder-workbench #center .items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .nodebuilder-workbench #center .grid { align-content: start; }
  .nodebuilder-workbench #right {
    position: relative;
    top: auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .nodebuilder-workbench #right > div,
  .nodebuilder-workbench #right > .toolbar,
  .nodebuilder-workbench #right > textarea {
    flex: 0 0 auto;
  }
  .nodebuilder-workbench #right .tree {
    flex: 1 1 auto;
    min-height: 120px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .nodebuilder-workbench textarea#jsonOut {
    flex-basis: 118px;
    min-height: 118px;
    max-height: 160px;
    resize: none;
  }
  .nodebuilder-workbench #lmntFooter { display: none; }
}

@media (max-width: 1000px) {
  body.nodebuilder-workbench {
    height: auto;
    min-height: 100%;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .nodebuilder-workbench .layout {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
  }
  .nodebuilder-workbench #center,
  .nodebuilder-workbench #right {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .nodebuilder-workbench #center .items {
    max-height: 58vh;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .nodebuilder-workbench #right .tree {
    min-height: 320px;
    max-height: 58vh;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

.nodebuilder-workbench .items,
.nodebuilder-workbench .tree {
  scrollbar-color: var(--nb-red-dark) rgba(255,255,255,.05);
  scrollbar-width: thin;
}
.nodebuilder-workbench .items::-webkit-scrollbar,
.nodebuilder-workbench .tree::-webkit-scrollbar { width: 10px; height: 10px; }
.nodebuilder-workbench .items::-webkit-scrollbar-track,
.nodebuilder-workbench .tree::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.nodebuilder-workbench .items::-webkit-scrollbar-thumb,
.nodebuilder-workbench .tree::-webkit-scrollbar-thumb {
  border: 2px solid #0b0910;
  border-radius: 999px;
  background: var(--nb-red-dark);
}