.fld-app{--d:#0b1422;--d2:#122235;--m:#85ead2;--g:#075e54;--bg:#f5f8f8;--t:#152536;--mut:#607884;--line:#d7e5e3;box-sizing:border-box;color:var(--t);font-family:inherit}
.fld-app *{box-sizing:border-box}.fld-app button,.fld-app input,.fld-app select{font:inherit}
.fld-hero{display:grid;gap:22px;padding:28px;border-radius:24px;background:radial-gradient(circle at 90% 12%,rgba(133,234,210,.14),transparent 28%),linear-gradient(135deg,var(--d),#102031 72%,#12342f);color:#fff}
.fld-kicker,.fld-eyebrow{margin:0 0 8px;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.15em}
.fld-hero h2{margin:0!important;padding:0!important;background:none!important;border:0!important;color:#fff!important;font-size:clamp(28px,6vw,46px)!important;line-height:1.25!important}
.fld-hero p{color:rgba(255,255,255,.75)}.fld-badges{display:flex;flex-wrap:wrap;gap:7px}.fld-badges span{padding:6px 9px;border:1px solid rgba(133,234,210,.18);border-radius:999px;background:rgba(133,234,210,.06);font-size:10px;font-weight:800}
.fld-hero-card{padding:18px;border:1px solid rgba(133,234,210,.16);border-radius:16px;background:rgba(6,17,27,.55)}.fld-hero-card small{display:block;color:#8ba3b1;margin-bottom:10px}.fld-hero-card code{color:#dbe9f2;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fld-toolbar,.fld-panel{margin-top:20px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(11,20,34,.055)}
.fld-toolbar{display:flex;flex-direction:column;gap:12px;padding:16px}.fld-actions,.fld-segment{display:flex;flex-wrap:wrap;gap:8px;align-items:end}.fld-grow{flex:1 1 220px}
.fld-segment{padding:4px;background:#eef5f4;border-radius:12px}.fld-segment button,.fld-tabs button,.fld-preview-tabs button{min-height:42px;border:0;border-radius:9px;background:transparent;color:#48636e;font-weight:800;cursor:pointer;padding:8px 12px}.fld-segment button.is-active,.fld-tabs button.is-active,.fld-preview-tabs button.is-active{background:var(--g);color:#fff}
.fld-field{display:grid;gap:6px;min-width:0}.fld-field span{font-size:12px;font-weight:800;color:#58717d}.fld-field input,.fld-field select{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #c8dad8;border-radius:11px;background:#fff;color:var(--t)}
.fld-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:11px;border:1px solid transparent;font-weight:800;cursor:pointer}.fld-btn.primary{background:var(--g);color:#fff}.fld-btn.ghost{border-color:#c9dcda;background:#fff;color:var(--g)}.fld-btn.danger{border-color:#efc7c2;background:#fff;color:#ad4037}
.fld-layout{display:grid;grid-template-columns:1fr;gap:20px}.fld-panel{padding:18px}.fld-head{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}.fld-head h3{margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--t)!important;font-size:22px!important}.fld-head p:not(.fld-eyebrow){margin:6px 0 0;color:var(--mut);font-size:14px}.fld-head.stack{align-items:stretch}
.fld-tabs,.fld-preview-tabs{display:flex;gap:6px;overflow:auto;margin-bottom:14px}.fld-tabs button,.fld-preview-tabs button{border:1px solid var(--line);background:#fff;white-space:nowrap}
.fld-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fbfdfd;margin-bottom:12px}.fld-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.fld-index{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:30px;padding:0 10px;border-radius:999px;background:#eaf8f4;color:var(--g);font-size:12px;font-weight:800}.fld-card-actions{display:flex;gap:6px}.fld-card-actions button{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}.fld-card-actions .remove{color:#ad4037;border-color:#efd0cc}
.fld-grid{display:grid;grid-template-columns:1fr;gap:10px}.fld-wide{grid-column:1/-1}.fld-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid #e2ecea;color:#6a808a;font-size:13px}.fld-foot button{border:0;background:none;color:var(--g);font-weight:800;cursor:pointer}
.fld-pane{display:none}.fld-pane.is-active{display:block}.fld-empty{display:grid;place-items:center;min-height:240px;border:1px dashed #cbdcda;border-radius:14px;background:#f9fcfc;color:#78909a;text-align:center;padding:24px}
.fld-tree-group{margin-bottom:12px;border:1px solid #dce9e7;border-radius:14px;overflow:hidden}.fld-tree-head{display:flex;justify-content:space-between;padding:10px 12px;background:#eff8f6;color:var(--g);font-size:12px;font-weight:800}.fld-tree-item{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 12px;border-top:1px solid #edf2f1}.fld-tree-item em{font-style:normal;color:#0a796c;font-size:11px;font-weight:800}.fld-tree-item strong{font-size:13px}.fld-tree-item small{display:block;color:#6b818b;font-size:11px}
.fld-flow{display:flex;flex-direction:column;align-items:center;gap:8px}.fld-flow-node{width:100%;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:center}.fld-flow-node.start,.fld-flow-node.end{max-width:240px;background:#eaf8f4;border-color:#aadfd2;color:var(--g);font-weight:800}.fld-arrow{color:#0a796c;font-weight:800}
.fld-codebox{overflow:hidden;border:1px solid #274257;border-radius:14px;background:#0b1825}.fld-code-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #274257;color:#a9bec9;font-size:11px;font-weight:800}.fld-code-top button{min-height:36px;border:1px solid #3b596d;border-radius:8px;background:#122738;color:#d7e6ef}.fld-codebox pre{margin:0!important;min-height:300px;max-height:560px;overflow:auto;padding:18px!important;background:transparent!important;border:0!important;color:#dbe9f2!important;font-size:13px!important;line-height:1.75!important}.fld-codebox code{background:none!important;color:inherit!important;padding:0!important}
.fld-export{display:grid;grid-template-columns:1fr;gap:10px}.fld-export button{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;min-height:92px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;cursor:pointer}.fld-export b{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#eaf8f4;color:var(--g);font-size:12px}.fld-export span{display:grid}.fld-export small{color:#708690}.fld-import{margin-top:14px;padding-top:14px;border-top:1px solid #e2ecea}
.fld-toast{position:fixed;left:50%;bottom:26px;z-index:9999;padding:11px 16px;border-radius:12px;background:var(--d);color:#fff;opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:.2s}.fld-toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){.fld-hero{grid-template-columns:1.1fr .9fr;padding:38px}.fld-toolbar{flex-direction:row;align-items:end}.fld-head{flex-direction:row;justify-content:space-between}.fld-head.stack{flex-direction:column}.fld-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fld-export{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.fld-layout{grid-template-columns:1.12fr .88fr}.fld-panel{padding:22px}.fld-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fld-export{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* =========================================================
 * v1.1.0 — Wide Logic Designer + formal flowchart notation
 * ======================================================= */
.fld-app{
  width:min(100%,1600px);
  margin-inline:auto;
}
.fld-toolbar-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  flex:1 1 auto;
  width:100%;
}
.fld-description{grid-column:1/-1}

.fld-flow-toolbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:-4px 0 14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfdfd;
}
.fld-flow-tools,.fld-flow-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.fld-flow-tool{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#526a75;
  font-size:12px;
  font-weight:800;
}
.terminal-shape,.process-shape,.decision-shape,.arrow-shape{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.terminal-shape{
  width:38px;height:22px;border:2px solid #0c8d75;border-radius:999px;background:#eaf8f4
}
.process-shape{
  width:34px;height:24px;border:2px solid #3478f6;border-radius:4px;background:#eef5ff
}
.decision-shape{
  width:26px;height:26px;border:2px solid #ef6c72;background:#fff4f4;transform:rotate(45deg)
}
.arrow-shape{
  min-width:34px;color:#173b42;font-style:normal;font-size:20px;font-weight:900
}
.fld-flow-options .fld-btn.is-active{
  background:#eaf8f4;color:#075e54;border-color:#a9ddcf
}

.fld-flow{
  position:relative;
  min-height:520px;
  padding:24px 18px 32px;
  overflow:auto;
  border:1px solid #dfeae8;
  border-radius:14px;
  background:#fff;
}
.fld-flow-grid{
  background-image:
    linear-gradient(rgba(11,20,34,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,20,34,.035) 1px,transparent 1px);
  background-size:20px 20px;
}
.fld-flow.no-grid{background-image:none}
.fld-flow-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:560px;
  gap:0;
}
.fld-flow-terminal{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  min-height:58px;
  padding:10px 22px;
  border:2px solid #0c8d75;
  border-radius:999px;
  background:#e8f8f3;
  color:#075e54;
  font-weight:900;
  text-align:center;
}
.fld-flow-process{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:260px;
  max-width:420px;
  min-height:72px;
  padding:14px 18px;
  border:2px solid #3478f6;
  border-radius:8px;
  background:#f3f7ff;
  color:#17314d;
  text-align:center;
}
.fld-flow-decision-wrap{
  position:relative;
  width:100%;
  min-height:155px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fld-flow-decision{
  width:165px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  border:2px solid #ef6c72;
  background:#fff7f7;
  transform:rotate(45deg);
  box-shadow:0 4px 16px rgba(11,20,34,.05);
}
.fld-flow-decision__inner{
  transform:rotate(-45deg);
  max-width:125px;
  color:#263b49;
  font-size:12px;
  font-weight:800;
  line-height:1.45;
  text-align:center;
}
.fld-flow-line{
  position:relative;
  width:2px;
  height:42px;
  background:#173b42;
}
.fld-flow-line::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:9px solid #173b42;
}
.fld-flow-branch{
  position:absolute;
  top:50%;
  left:calc(50% + 90px);
  display:flex;
  align-items:center;
}
.fld-flow-branch-line{
  position:relative;
  width:82px;
  height:2px;
  background:#718894;
}
.fld-flow-branch-line::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  transform:translateY(-50%);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:8px solid #718894;
}
.fld-flow-branch-label{
  position:absolute;
  top:-23px;
  left:34px;
  color:#d64b52;
  font-size:11px;
  font-weight:900;
}
.fld-flow-branch-target{
  margin-left:8px;
  min-width:120px;
  padding:10px 12px;
  border:1px solid #b9c9d3;
  border-radius:8px;
  background:#f4f7f9;
  color:#536a75;
  font-size:11px;
  font-weight:800;
  text-align:center;
}
.fld-flow-yes{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(14px);
  color:#0b8d75;
  font-size:11px;
  font-weight:900;
}
.fld-flow.hide-labels .fld-flow-yes,
.fld-flow.hide-labels .fld-flow-branch-label{display:none}

.fld-legend{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:20px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f8fbfb;
}
.fld-legend>div{
  display:grid;
  grid-template-columns:46px auto;
  grid-template-areas:"icon strong" "icon span";
  gap:0 10px;
  align-items:center;
}
.fld-legend i{grid-area:icon}
.fld-legend strong{grid-area:strong;color:#16313b;font-size:13px}
.fld-legend span{grid-area:span;color:#6e838d;font-size:12px}

.fld-help-modal{
  display:none;position:fixed;inset:0;z-index:10000;padding:20px;background:rgba(5,12,20,.62);place-items:center
}
.fld-help-modal.is-open{display:grid}
.fld-help-card{
  position:relative;width:min(100%,620px);padding:26px;border-radius:20px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.24)
}
.fld-help-card h3{margin:0 0 14px!important;padding:0!important;border:0!important;background:none!important}
.fld-help-card li+li{margin-top:10px}
.fld-help-close{
  position:absolute;right:14px;top:14px;width:40px;height:40px;border:1px solid #d7e5e3;border-radius:10px;background:#fff;font-size:22px;cursor:pointer
}

@media(min-width:700px){
  .fld-toolbar-grid{grid-template-columns:1.1fr 2fr 1fr 1fr}
  .fld-description{grid-column:1/-1}
  .fld-flow-toolbar{flex-direction:row;justify-content:space-between;align-items:center}
  .fld-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1180px){
  .fld-app{width:min(96vw,1680px)}
  .fld-layout{grid-template-columns:minmax(680px,1.25fr) minmax(560px,.95fr)}
  .fld-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fld-description{grid-column:auto}
  .fld-toolbar-grid{grid-template-columns:1.1fr 2fr .8fr .9fr 2.2fr}
  .fld-legend{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* =========================================================
 * v1.2.0 — Full-bleed page + true diamond decisions
 * ======================================================= */

/* Break out of Cocoon/Page content width and use the full viewport. */
.fld-app{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:clamp(14px,2vw,32px);
  padding-right:clamp(14px,2vw,32px);
  overflow-x:hidden;
}

/* Keep the actual UI comfortably centered on very wide monitors. */
.fld-app > .fld-hero,
.fld-app > .fld-toolbar,
.fld-app > .fld-layout,
.fld-app > .fld-panel,
.fld-app > .fld-legend{
  width:min(100%,1800px);
  margin-left:auto;
  margin-right:auto;
}

/* Toolbar must wrap; actions never escape the viewport. */
.fld-toolbar{
  align-items:stretch !important;
}
.fld-toolbar-grid{
  min-width:0;
}
.fld-toolbar .fld-actions{
  width:100%;
  justify-content:flex-end;
  flex:0 0 100%;
}
.fld-toolbar .fld-actions .fld-btn{
  flex:0 0 auto;
}

/* Wider desktop split, while still respecting viewport width. */
@media(min-width:1180px){
  .fld-layout{
    grid-template-columns:minmax(0,1.18fr) minmax(520px,.82fr) !important;
  }
  .fld-panel{
    min-width:0;
  }
}

/* Prevent condition controls from expanding the left panel. */
.fld-grid > *,
.fld-toolbar-grid > *,
.fld-head > *{
  min-width:0;
}
.fld-field input,
.fld-field select{
  max-width:100%;
}

/* True diamond shape: no rotated square/text hack. */
.fld-flow-decision{
  position:relative;
  width:210px !important;
  height:126px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#ef6c72 !important;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  transform:none !important;
  display:grid !important;
  place-items:center;
  box-shadow:none !important;
  isolation:isolate;
}
.fld-flow-decision::before{
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  background:#fff7f7;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.fld-flow-decision__inner{
  transform:none !important;
  width:142px;
  max-width:142px !important;
  padding:0 4px;
  color:#263b49;
  font-size:12px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  overflow-wrap:anywhere;
}

/* Give each decision enough breathing room for side branches. */
.fld-flow-decision-wrap{
  min-height:190px !important;
}
.fld-flow-branch{
  left:calc(50% + 115px) !important;
}
.fld-flow-yes{
  bottom:12px !important;
  transform:translateX(18px) !important;
}

/* Flow canvas wider and horizontally scrollable rather than clipping nodes. */
.fld-flow{
  width:100%;
  min-width:0;
  overflow:auto !important;
}
.fld-flow-stage{
  min-width:720px !important;
  padding:12px 90px 22px;
}

/* On smaller screens the app is still full width, but without forcing oversized controls. */
@media(max-width:1179px){
  .fld-app{
    padding-left:12px;
    padding-right:12px;
  }
  .fld-toolbar .fld-actions{
    justify-content:flex-start;
  }
  .fld-flow-stage{
    min-width:680px !important;
    padding-left:70px;
    padding-right:70px;
  }
}

/* Mobile: keep full-bleed, allow the chart canvas itself to scroll horizontally. */
@media(max-width:699px){
  .fld-app{
    padding-left:8px;
    padding-right:8px;
  }
  .fld-app > .fld-hero,
  .fld-app > .fld-toolbar,
  .fld-app > .fld-layout,
  .fld-app > .fld-panel,
  .fld-app > .fld-legend{
    width:100%;
  }
  .fld-toolbar .fld-actions .fld-btn{
    flex:1 1 calc(50% - 6px);
  }
  .fld-flow-decision{
    width:190px !important;
    height:116px !important;
  }
  .fld-flow-decision__inner{
    width:128px;
    max-width:128px !important;
    font-size:11.5px;
  }
}


/* =========================================================
 * v1.3.0 — Full-page canvas / top settings layout fix
 * ======================================================= */

/* Eliminate Cocoon white gutters around the app */
.fld-app{
  position:relative;
  left:50%;
  right:50%;
  width:100vw !important;
  max-width:none !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  padding:24px clamp(12px,2vw,32px) 48px !important;
  background:#f5f8f8;
  overflow-x:hidden;
  isolation:isolate;
}

/* Paint the complete viewport width, including theme content gutters */
.fld-app::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#f5f8f8;
}

/* Neutralize common Cocoon fixed-page wrappers only around this shortcode area */
body.page:has(.fld-app) .entry-content,
body.page:has(.fld-app) .article,
body.page:has(.fld-app) .content,
body.page:has(.fld-app) .main,
body.page:has(.fld-app) main{
  overflow:visible !important;
}
body.page:has(.fld-app) .creator-page-body{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.page:has(.fld-app) .creator-page-shell{
  background:#f5f8f8 !important;
}
body.page:has(.fld-app) .creator-page-wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
body.page:has(.fld-app) .creator-page-hero{
  display:none !important;
}

/* Center each major application region on wide displays */
.fld-app > .fld-hero,
.fld-app > .fld-toolbar,
.fld-app > .fld-layout,
.fld-app > .fld-panel,
.fld-app > .fld-legend{
  width:min(100%,1800px) !important;
  max-width:1800px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Top project settings: grid controls, actions below. */
.fld-toolbar{
  display:block !important;
  padding:20px !important;
  overflow:hidden;
}

.fld-toolbar-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  width:100% !important;
  min-width:0 !important;
  align-items:end;
}

.fld-toolbar-grid > .fld-field{
  min-width:0 !important;
  width:100% !important;
}

.fld-toolbar-grid > .fld-field > input,
.fld-toolbar-grid > .fld-field > select{
  width:100% !important;
  max-width:none !important;
}

.fld-toolbar-grid .fld-segment{
  width:100%;
  min-width:0;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
}

.fld-toolbar-grid .fld-segment button{
  width:100%;
  min-width:0;
  white-space:nowrap;
}

.fld-toolbar .fld-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  width:100% !important;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #e2ecea;
  justify-content:flex-start !important;
}

.fld-toolbar .fld-actions .fld-btn{
  flex:0 1 auto !important;
  min-width:96px;
}

/* Tablet: sensible 2-column arrangement */
@media(min-width:700px){
  .fld-toolbar-grid{
    grid-template-columns:
      minmax(220px,1fr)
      minmax(280px,1.7fr) !important;
  }
  .fld-toolbar-grid .fld-description{
    grid-column:1/-1 !important;
  }
}

/* Desktop: each field gets enough space. */
@media(min-width:1100px){
  .fld-toolbar-grid{
    grid-template-columns:
      minmax(240px,1.15fr)
      minmax(320px,1.8fr)
      minmax(150px,.75fr)
      minmax(170px,.85fr)
      minmax(360px,2.2fr) !important;
    gap:14px !important;
  }

  .fld-toolbar-grid .fld-description{
    grid-column:auto !important;
  }

  .fld-toolbar .fld-actions{
    justify-content:flex-end !important;
  }
}

/* Extra wide screens: larger, easier controls. */
@media(min-width:1500px){
  .fld-toolbar-grid{
    grid-template-columns:
      minmax(260px,1.1fr)
      minmax(390px,1.75fr)
      minmax(170px,.7fr)
      minmax(190px,.8fr)
      minmax(460px,2fr) !important;
  }
}

/* Main workspace should never inherit a constrained parent width. */
.fld-layout{
  width:min(100%,1800px) !important;
  max-width:1800px !important;
  min-width:0 !important;
  margin-inline:auto !important;
}

/* Prevent full-page white cards from appearing below the app */
.fld-app .fld-panel,
.fld-app .fld-toolbar{
  background:#fff;
}

/* Mobile: no sideways page scroll; only flow canvas may scroll horizontally. */
@media(max-width:699px){
  .fld-app{
    padding:12px 8px 32px !important;
  }
  .fld-toolbar{
    padding:14px !important;
  }
  .fld-toolbar .fld-actions .fld-btn{
    flex:1 1 calc(50% - 5px) !important;
    min-width:0;
  }
}

/* Fallback for browsers/themes where :has is not available:
   still visually cover the viewport around shortcode. */
.fld-app{
  box-shadow:
    50vw 0 0 #f5f8f8,
    -50vw 0 0 #f5f8f8;
}


/* =========================================================
 * v1.4.0 — IF / AND / OR flow semantics
 * ======================================================= */
.fld-card{
  border-left:4px solid #cfeee6;
}
.fld-card .fld-field:has([data-key="yesAction"]),
.fld-card .fld-field:has([data-key="noAction"]){
  padding:10px;
  border:1px solid #dce9e7;
  border-radius:12px;
  background:#fff;
}
.fld-card .fld-field:has([data-key="yesAction"]) span{color:#0b8d75}
.fld-card .fld-field:has([data-key="noAction"]) span{color:#d34b52}
.fld-card [data-key="yesAction"]{border-color:#addfd3!important;background:#f3fbf8!important}
.fld-card [data-key="noAction"]{border-color:#efd0cc!important;background:#fff8f7!important}

.fld-flow-logic-badge{
  position:absolute;
  left:calc(50% - 150px);
  top:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:28px;
  padding:0 9px;
  border-radius:999px;
  background:#0b1422;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  z-index:3;
}
.fld-logic-if .fld-flow-logic-badge{background:#075e54}
.fld-logic-and .fld-flow-logic-badge{background:#3478f6}
.fld-logic-or .fld-flow-logic-badge{background:#8b5cf6}

.fld-logic-or .fld-flow-decision{
  background:#8b5cf6!important;
}
.fld-logic-or .fld-flow-decision::before{
  background:#faf7ff;
}
.fld-logic-and .fld-flow-decision{
  background:#3478f6!important;
}
.fld-logic-and .fld-flow-decision::before{
  background:#f5f8ff;
}

.fld-flow-or-no{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  color:#8b5cf6;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.fld-logic-or .fld-flow-yes{
  color:#8b5cf6;
}

/* OR: side branch means success/short-circuit */
.fld-flow-branch.yes-branch .fld-flow-branch-label{
  color:#0b8d75;
}
.fld-flow-branch.yes-branch .fld-flow-branch-line{
  background:#0b8d75;
}
.fld-flow-branch.yes-branch .fld-flow-branch-line::after{
  border-left-color:#0b8d75;
}

@media(min-width:1080px){
  .fld-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:1500px){
  .fld-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}

/* v2.0.0 Logic Tree only */
.fld-layout{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr)!important}
.fld-flow-toolbar,.fld-flow,.fld-codebox,.fld-legend{display:none!important}
@media(max-width:1079px){.fld-layout{grid-template-columns:1fr!important}}


/* =========================================================
 * v2.1.0 — Tree-only UI / button repair / C-style badges
 * ======================================================= */
body.fld-modal-open{overflow:hidden}

.fld-step-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
}
.fld-step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:50px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(135deg,#85ead2,#43c8ae);
  color:#075e54;
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 20px rgba(7,94,84,.12);
}
.fld-step-label{
  color:#36bfa5;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}

/* Kill Cocoon/theme dots and pseudo decorations on plugin headings. */
.fld-app .fld-head h3,
.fld-app .fld-help-card h3{
  position:static!important;
  padding-left:0!important;
}
.fld-app .fld-head h3::before,
.fld-app .fld-head h3::after,
.fld-app .fld-help-card h3::before,
.fld-app .fld-help-card h3::after{
  content:none!important;
  display:none!important;
}

/* Functional toolbar buttons: clearer interactive state. */
.fld-actions .fld-btn{
  min-width:112px;
  cursor:pointer;
}
.fld-actions .fld-btn:active{
  transform:translateY(1px);
}
.fld-actions .fld-btn:focus-visible,
.fld-btn:focus-visible,
.fld-card-actions button:focus-visible{
  outline:3px solid rgba(133,234,210,.45);
  outline-offset:3px;
}

/* Tree-only node cards. */
.fld-card-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.fld-node-type{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}
.fld-node-type--condition{background:#eaf8f4;color:#075e54}
.fld-node-type--concept{background:#eef5ff;color:#2865b8}
.fld-node-type--rule{background:#fff4df;color:#9a6200}

/* Logic-tree visual hierarchy */
.fld-tree-root{
  position:relative;
  display:flex;
  justify-content:center;
  margin:6px 0 24px;
}
.fld-tree-root::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  width:2px;
  height:24px;
  background:#b9d7d1;
}
.fld-tree-root__title{
  min-width:210px;
  max-width:100%;
  padding:13px 18px;
  border:2px solid #0c8d75;
  border-radius:999px;
  background:#eaf8f4;
  color:#075e54;
  font-weight:900;
  text-align:center;
}
.fld-tree-branches{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.fld-tree-group{
  position:relative;
}
.fld-tree-nodes{
  display:grid;
  gap:8px;
  padding:10px;
}
.fld-tree-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.fld-tree-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:24px;
  padding:3px 7px;
  border-radius:999px;
  background:#eef5f4;
  color:#075e54;
  font-size:10px;
  font-weight:900;
}
.fld-tree-item--concept .fld-tree-type{background:#eef5ff;color:#2865b8}
.fld-tree-item--rule .fld-tree-type{background:#fff4df;color:#9a6200}

.fld-help-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  place-items:center;
  padding:20px;
  background:rgba(5,12,20,.65);
}
.fld-help-modal.is-open{display:grid}
.fld-help-card{
  position:relative;
  width:min(100%,620px);
  max-height:min(80vh,700px);
  overflow:auto;
  padding:28px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.fld-help-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border:1px solid #d7e5e3;
  border-radius:10px;
  background:#fff;
  color:#152536;
  font-size:22px;
  cursor:pointer;
}

/* Hide obsolete flow-only styling if inherited from older versions. */
.fld-flow-toolbar,.fld-flow,.fld-codebox,.fld-legend{display:none!important}

@media(min-width:900px){
  .fld-tree-branches{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1400px){
  .fld-tree-branches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .fld-step-badge{width:42px;height:42px;font-size:14px}
  .fld-step-label{font-size:11px}
  .fld-actions .fld-btn{min-width:0}
}


/* =========================================================
 * v2.2.0 — Real logic tree hierarchy
 * ROOT → CATEGORY → NODE
 * ======================================================= */

/* Hide old card-grid tree rendering styles from previous versions */
.fld-tree-root,
.fld-tree-branches,
.fld-tree-group,
.fld-tree-nodes,
.fld-tree-item,
.fld-tree-type{
  display:none !important;
}

.fld-logic-tree{
  --tree-line:#b9d7d1;
  --tree-line-strong:#89bbb0;
  position:relative;
  width:100%;
  min-width:0;
  padding:14px 8px 26px;
}

.fld-logic-tree__root{
  position:relative;
  z-index:3;
  width:min(100%,420px);
  margin:0 auto;
  padding:16px 22px;
  border:2px solid #0c8d75;
  border-radius:999px;
  background:linear-gradient(180deg,#eaf8f4,#e4f6f1);
  color:#075e54;
  text-align:center;
  box-shadow:0 8px 22px rgba(7,94,84,.07);
}
.fld-logic-tree__root-kicker{
  display:block;
  margin-bottom:3px;
  color:#32bca1;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}
.fld-logic-tree__root strong{
  display:block;
  font-size:18px;
  line-height:1.4;
}
.fld-logic-tree__root small{
  display:block;
  margin-top:4px;
  color:#628078;
  font-size:11px;
  line-height:1.55;
}

.fld-logic-tree__root-stem{
  width:2px;
  height:34px;
  margin:0 auto;
  background:var(--tree-line-strong);
}

/* Categories on desktop: horizontal branches from a shared rail */
.fld-logic-tree__categories{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:24px 14px;
  padding-top:28px;
}
.fld-logic-tree__categories::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(10% / 2);
  right:calc(10% / 2);
  height:2px;
  background:var(--tree-line-strong);
}

.fld-logic-tree__branch{
  position:relative;
  min-width:0;
}
.fld-logic-tree__branch::before{
  content:"";
  position:absolute;
  top:-28px;
  left:50%;
  width:2px;
  height:28px;
  background:var(--tree-line-strong);
  transform:translateX(-50%);
}

.fld-logic-tree__category{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:54px;
  padding:12px 14px;
  border:1px solid #cfe1de;
  border-radius:14px;
  background:#eef8f6;
  color:#075e54;
  font-size:13px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(11,20,34,.035);
}
.fld-logic-tree__category b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  background:#d9f1eb;
  color:#075e54;
  font-size:11px;
}

.fld-logic-tree__item-stem{
  width:2px;
  height:22px;
  margin:0 auto;
  background:var(--tree-line);
}

.fld-logic-tree__items{
  position:relative;
  display:grid;
  gap:10px;
}
.fld-logic-tree__items::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:13px;
  width:2px;
  background:var(--tree-line);
}

.fld-logic-tree__item{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:9px;
  align-items:start;
  margin-left:28px;
  padding:11px 12px;
  border:1px solid #dbe8e6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 15px rgba(11,20,34,.035);
}
.fld-logic-tree__item::before{
  content:"";
  position:absolute;
  top:22px;
  right:100%;
  width:16px;
  height:2px;
  background:var(--tree-line);
}

.fld-logic-tree__type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:24px;
  padding:3px 7px;
  border-radius:999px;
  background:#eaf8f4;
  color:#075e54;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.fld-logic-tree__item--concept .fld-logic-tree__type{
  background:#eef5ff;
  color:#2865b8;
}
.fld-logic-tree__item--rule .fld-logic-tree__type{
  background:#fff4df;
  color:#9a6200;
}

.fld-logic-tree__item-copy{
  min-width:0;
}
.fld-logic-tree__item-copy strong{
  display:block;
  color:#172a39;
  font-size:12px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.fld-logic-tree__item-copy small{
  display:block;
  margin-top:3px;
  color:#72858e;
  font-size:10px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

/* Tablet: two branches per row, keeping connection logic readable */
@media(max-width:1199px){
  .fld-logic-tree__categories{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile: transform into a vertical tree so it remains a tree rather than cards */
@media(max-width:699px){
  .fld-logic-tree{
    padding:8px 0 20px;
  }

  .fld-logic-tree__root{
    width:calc(100% - 10px);
    border-radius:18px;
    padding:14px 16px;
  }

  .fld-logic-tree__root-stem{
    height:24px;
    margin-left:22px;
  }

  .fld-logic-tree__categories{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    padding-top:0;
    padding-left:22px;
  }

  .fld-logic-tree__categories::before{
    top:0;
    bottom:0;
    left:21px;
    right:auto;
    width:2px;
    height:auto;
    background:var(--tree-line-strong);
  }

  .fld-logic-tree__branch{
    padding-left:22px;
  }

  .fld-logic-tree__branch::before{
    top:26px;
    left:0;
    width:22px;
    height:2px;
    transform:none;
    background:var(--tree-line-strong);
  }

  .fld-logic-tree__category{
    min-height:50px;
  }

  .fld-logic-tree__item-stem{
    width:2px;
    height:16px;
    margin-left:14px;
  }

  .fld-logic-tree__items::before{
    left:13px;
  }

  .fld-logic-tree__item{
    margin-left:28px;
  }
}

/* Extra-wide screen: allow all five categories across when room permits */
@media(min-width:1450px){
  .fld-logic-tree__categories{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}


/* =========================================================
 * v2.3.0 — Readable tree widths / no vertical text collapse
 * ======================================================= */

/* Preview becomes a horizontal canvas on desktop.
   Keep every branch wide enough for normal Japanese text. */
.fld-logic-tree{
  overflow-x:auto !important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  padding-bottom:34px;
}

.fld-logic-tree__root{
  min-width:420px;
}

.fld-logic-tree__categories{
  display:flex !important;
  align-items:flex-start;
  gap:22px !important;
  width:max-content;
  min-width:100%;
  padding-inline:28px;
  padding-top:28px;
}

.fld-logic-tree__categories::before{
  left:120px !important;
  right:120px !important;
}

.fld-logic-tree__branch{
  flex:0 0 240px;
  width:240px;
  min-width:240px;
}

.fld-logic-tree__category{
  width:240px;
  min-width:240px;
  padding:13px 16px;
  font-size:14px;
  line-height:1.45;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:normal;
}

.fld-logic-tree__items{
  width:240px;
  min-width:240px;
}

.fld-logic-tree__item{
  width:212px;
  min-width:212px;
  grid-template-columns:auto minmax(0,1fr) !important;
  padding:12px 13px;
}

.fld-logic-tree__type{
  min-width:48px;
  white-space:nowrap;
  writing-mode:horizontal-tb !important;
}

.fld-logic-tree__item-copy{
  min-width:0;
  width:auto;
}

.fld-logic-tree__item-copy strong,
.fld-logic-tree__item-copy small{
  display:block;
  width:100%;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  hyphens:none;
}

.fld-logic-tree__item-copy strong{
  font-size:13px;
  line-height:1.65;
}

.fld-logic-tree__item-copy small{
  margin-top:5px;
  font-size:11px;
  line-height:1.7;
}

/* Give the preview panel more space than the editor on large screens. */
@media(min-width:1080px){
  .fld-layout{
    grid-template-columns:minmax(430px,.72fr) minmax(720px,1.28fr) !important;
  }
}

/* Very wide screens: branches can be slightly larger. */
@media(min-width:1500px){
  .fld-logic-tree__branch,
  .fld-logic-tree__category,
  .fld-logic-tree__items{
    flex-basis:270px;
    width:270px;
    min-width:270px;
  }

  .fld-logic-tree__item{
    width:242px;
    min-width:242px;
  }
}

/* Tablet: still use horizontal scrolling instead of crushing text. */
@media(min-width:700px) and (max-width:1079px){
  .fld-logic-tree__categories{
    display:flex !important;
    grid-template-columns:none !important;
  }
  .fld-logic-tree__branch{
    flex:0 0 230px;
    width:230px;
    min-width:230px;
  }
  .fld-logic-tree__category,
  .fld-logic-tree__items{
    width:230px;
    min-width:230px;
  }
  .fld-logic-tree__item{
    width:202px;
    min-width:202px;
  }
}

/* Mobile remains vertical, with full-width readable nodes. */
@media(max-width:699px){
  .fld-logic-tree{
    overflow-x:hidden !important;
  }

  .fld-logic-tree__root{
    min-width:0;
    width:100%;
  }

  .fld-logic-tree__categories{
    display:grid !important;
    width:100%;
    min-width:0;
    padding-inline:0 0;
    padding-left:22px;
  }

  .fld-logic-tree__branch{
    width:auto;
    min-width:0;
    flex:none;
  }

  .fld-logic-tree__category{
    width:100%;
    min-width:0;
    word-break:normal;
  }

  .fld-logic-tree__items{
    width:100%;
    min-width:0;
  }

  .fld-logic-tree__item{
    width:calc(100% - 28px);
    min-width:0;
  }

  .fld-logic-tree__item-copy strong{
    font-size:13px;
  }

  .fld-logic-tree__item-copy small{
    font-size:11px;
  }
}