.fcd-app{--d:#0b1422;--m:#85ead2;--g:#075e54;--t:#152536;--mut:#607884;--line:#d7e5e3;box-sizing:border-box;color:var(--t);font-family:inherit}
.fcd-app *{box-sizing:border-box}.fcd-app button,.fcd-app input,.fcd-app select{font:inherit}
.fcd-hero{display:grid;gap:22px;padding:28px;border-radius:24px;background:radial-gradient(circle at 92% 10%,rgba(133,234,210,.14),transparent 28%),linear-gradient(135deg,#0b1422,#102031 72%,#12342f);color:#fff}
.fcd-kicker,.fcd-eyebrow{margin:0 0 8px;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.15em}.fcd-hero h2{margin:0!important;padding:0!important;border:0!important;background:none!important;color:#fff!important;font-size:clamp(28px,6vw,46px)!important;line-height:1.25!important}.fcd-hero p{color:rgba(255,255,255,.76)}
.fcd-badges{display:flex;flex-wrap:wrap;gap:8px}.fcd-badges span{padding:6px 10px;border:1px solid rgba(133,234,210,.2);border-radius:999px;background:rgba(133,234,210,.07);font-size:11px;font-weight:900}.fcd-mini{align-self:center;padding:18px;border:1px solid rgba(133,234,210,.16);border-radius:16px;background:rgba(6,17,27,.55);text-align:center;line-height:1.8}
.fcd-toolbar,.fcd-panel{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(11,20,34,.055)}.fcd-toolbar{display:grid;gap:12px}.fcd-field{display:grid;gap:6px}.fcd-field span{font-size:12px;font-weight:800;color:#58717d}.fcd-field input,.fcd-field select{min-height:44px;padding:10px 12px;border:1px solid #c8dad8;border-radius:11px}
.fcd-actions{display:flex;flex-wrap:wrap;gap:8px}.fcd-btn{min-height:44px;padding:10px 14px;border-radius:11px;border:1px solid transparent;font-weight:800;cursor:pointer}.fcd-btn.primary{background:var(--g);color:#fff}.fcd-btn.ghost{border-color:#c9dcda;background:#fff;color:var(--g)}.fcd-btn.danger{border-color:#efc7c2;background:#fff;color:#ad4037}
.fcd-layout{display:grid;grid-template-columns:1fr;gap:20px}.fcd-head{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.fcd-head h3{margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--t)!important;font-size:22px!important}.fcd-head p:not(.fcd-eyebrow){color:var(--mut);font-size:14px}
.fcd-list{display:grid;gap:10px}.fcd-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfdfd}.fcd-card-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.fcd-index{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:30px;border-radius:999px;background:#eaf8f4;color:var(--g);font-size:12px;font-weight:900}.fcd-card-actions{display:flex;gap:6px}.fcd-card-actions button{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff}.fcd-grid{display:grid;grid-template-columns:1fr;gap:10px}.fcd-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #e2ecea;color:#6a808a;font-size:13px}.fcd-foot button{border:0;background:none;color:var(--g);font-weight:800}
.fcd-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fbfdfd}.fcd-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#536a75}.fcd-legend i{display:inline-flex;align-items:center;justify-content:center;font-style:normal}.terminal{width:36px;height:20px;border:2px solid #0c8d75;border-radius:999px}.process{width:30px;height:22px;border:2px solid #3478f6;border-radius:4px}.decision{width:22px;height:22px;border:2px solid #ef6c72;transform:rotate(45deg)}.arrow{font-size:20px}
.fcd-canvas{min-height:520px;padding:28px;overflow:auto;border:1px solid #dfeae8;border-radius:14px;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}
.fcd-stage{min-width:650px;display:flex;flex-direction:column;align-items:center}.fcd-terminal{min-width:190px;padding:12px 20px;border:2px solid #0c8d75;border-radius:999px;background:#e8f8f3;color:#075e54;font-weight:900;text-align:center}.fcd-process{min-width:260px;max-width:420px;padding:14px 18px;border:2px solid #3478f6;border-radius:8px;background:#f3f7ff;text-align:center}.fcd-decision-wrap{position:relative;width:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.fcd-decision{position:relative;width:210px;height:126px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#ef6c72}.fcd-decision:before{content:"";position:absolute;inset:2px;clip-path:inherit;background:#fff7f7}.fcd-decision span{position:relative;z-index:1;width:140px;text-align:center;font-size:12px;font-weight:800}.fcd-line{position:relative;width:2px;height:42px;background:#173b42}.fcd-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}.fcd-side{position:absolute;top:50%;left:calc(50% + 115px);display:flex;align-items:center}.fcd-side-line{width:80px;height:2px;background:#718894}.fcd-side-target{margin-left:8px;min-width:120px;padding:9px;border:1px solid #b9c9d3;border-radius:8px;background:#f4f7f9;text-align:center;font-size:11px}.fcd-side-label{position:absolute;top:-22px;left:32px;color:#d34b52;font-size:11px;font-weight:900}
.fcd-op{position:absolute;top:6px;left:calc(50% - 150px);min-width:46px;padding:5px 9px;border-radius:999px;background:#0b1422;color:#fff;font-size:11px;font-weight:900;text-align:center}.fcd-op.and{background:#3478f6}.fcd-op.or{background:#8b5cf6}.fcd-op.not{background:#d97706}.fcd-op.then{background:#075e54}
.fcd-export{display:grid;grid-template-columns:1fr;gap:10px}.fcd-export button,.fcd-export label{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}.fcd-export b{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#eaf8f4;color:var(--g)}.fcd-export span{display:grid}.fcd-export small{color:#708690}.fcd-toast{position:fixed;left:50%;bottom:26px;z-index:9999;padding:11px 16px;border-radius:12px;background:#0b1422;color:#fff;opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:.2s}.fcd-toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){.fcd-hero{grid-template-columns:1.1fr .9fr;padding:38px}.fcd-toolbar{grid-template-columns:2fr 1fr auto;align-items:end}.fcd-head{flex-direction:row;justify-content:space-between}.fcd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fcd-export{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.fcd-layout{grid-template-columns:minmax(0,1.1fr) minmax(520px,.9fr)}.fcd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v1.1.0 */
.fcd-step-kicker{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.fcd-step-badge{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#85ead2,#43c8ae);color:#075e54;font-size:14px;font-weight:900;box-shadow:0 7px 18px rgba(7,94,84,.12)}
.fcd-step-label{color:#40c7ad;font-size:12px;font-weight:900;letter-spacing:.16em}
.fcd-app .fcd-head h3{position:static!important;padding-left:0!important}
.fcd-app .fcd-head h3::before,.fcd-app .fcd-head h3::after{content:none!important;display:none!important}

@media(min-width:1100px){
  .fcd-layout{grid-template-columns:minmax(600px,1.03fr) minmax(650px,.97fr)!important}
}
.fcd-card{overflow:hidden}
.fcd-grid{grid-template-columns:minmax(110px,.72fr) minmax(220px,1.7fr) minmax(115px,.82fr) minmax(115px,.82fr) minmax(220px,1.65fr)!important;align-items:end}
.fcd-grid>*{min-width:0}
.fcd-field input,.fcd-field select{width:100%;min-width:0;max-width:100%}
.fcd-field select{padding-right:34px}

.fcd-flow-controls{display:flex;flex-wrap:wrap;gap:7px}
.fcd-flow-controls button{min-height:38px;padding:7px 11px;border:1px solid #cbdcda;border-radius:9px;background:#fff;color:#075e54;font-size:12px;font-weight:800;cursor:pointer}
.fcd-canvas{min-height:620px!important;padding:34px 42px 44px!important;overflow:auto!important}
.fcd-stage{transform-origin:top center;transition:transform .18s ease}

.fcd-decision-wrap{min-height:188px!important}
.fcd-decision{width:220px!important;height:132px!important}
.fcd-decision span{width:148px!important;max-width:148px;font-size:12px!important;line-height:1.45;overflow-wrap:anywhere}
.fcd-op{top:50%!important;left:calc(50% - 225px)!important;transform:translateY(-50%);min-width:56px!important;z-index:3}
.fcd-line{width:2px!important;height:48px!important;margin:0 auto;background:#173b42!important}
.fcd-line::after{left:50%!important;transform:translateX(-50%)!important}

.fcd-side{top:50%!important;left:calc(50% + 110px)!important;transform:translateY(-1px);align-items:center}
.fcd-side-line{position:relative;width:94px!important;height:2px!important;background:#718894!important}
.fcd-side-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}
.fcd-side-label{top:-25px!important;left:38px!important;white-space:nowrap}
.fcd-side-target{margin-left:10px!important;min-width:132px!important}

.fcd-decision-wrap::after{content:"Yes";position:absolute;left:50%;bottom:9px;transform:translateX(16px);color:#0b8d75;font-size:11px;font-weight:900;pointer-events:none}
.fcd-decision-wrap[data-op="OR"] .fcd-side-label{font-size:0}
.fcd-decision-wrap[data-op="OR"] .fcd-side-label::before{content:"Yes";font-size:11px;color:#0b8d75;font-weight:900}
.fcd-decision-wrap[data-op="OR"]::after{content:"No";color:#8b5cf6}
.fcd-decision-wrap[data-op="NOT"]::after{content:"No";color:#d97706}
.fcd-process{min-width:280px!important;max-width:440px!important;min-height:68px}

@media(max-width:1299px){.fcd-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:699px){
 .fcd-step-badge{width:42px;height:42px;font-size:13px}
 .fcd-step-label{font-size:11px}
 .fcd-grid{grid-template-columns:1fr!important}
 .fcd-canvas{padding:24px 16px 34px!important}
 .fcd-stage{min-width:680px!important}
}


/* =========================================================
 * v1.2.0 — Full-bleed Flowchart Designer layout
 * ======================================================= */

/* Full-page canvas: break out of Cocoon / fixed-page width */
.fcd-app{
  position:relative;
  left:50%;
  width:100vw !important;
  max-width:none !important;
  margin-left:-50vw !important;
  padding:24px clamp(12px,2vw,28px) 48px !important;
  background:#f5f8f8;
  overflow-x:hidden;
  isolation:isolate;
}

/* paint the entire viewport width so white gutters disappear */
.fcd-app::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#f5f8f8;
}

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

/* fallback paint for themes/browsers */
.fcd-app{
  box-shadow:50vw 0 0 #f5f8f8,-50vw 0 0 #f5f8f8;
}

/* center major sections on large displays */
.fcd-app > .fcd-hero,
.fcd-app > .fcd-toolbar,
.fcd-app > .fcd-layout,
.fcd-app > .fcd-panel{
  width:min(100%,1840px);
  max-width:1840px;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Main workspace: editor + flowchart */
.fcd-layout{
  display:grid !important;
  grid-template-columns:minmax(560px,.78fr) minmax(760px,1.22fr) !important;
  gap:20px !important;
  align-items:start;
}

/* No sticky/narrow behavior; right pane stays centered */
.fcd-layout > .fcd-panel{
  min-width:0;
}

/* Right flowchart panel should use all available width */
.fcd-layout > aside.fcd-panel{
  width:100%;
  overflow:hidden;
}

/* Flow canvas centered, no right-shift */
.fcd-canvas{
  width:100%;
  max-width:none;
  min-height:700px !important;
  padding:28px 26px 44px !important;
  overflow:auto !important;
  display:block;
}

/* stage centered inside the viewport */
.fcd-stage{
  width:max-content;
  min-width:760px !important;
  margin:0 auto;
  padding:0 120px 26px;
  transform-origin:top center;
}

/* Make side branches fit inside centered canvas */
.fcd-side{
  left:calc(50% + 110px) !important;
}
.fcd-side-line{
  width:120px !important;
}
.fcd-side-target{
  min-width:140px !important;
}

/* Flow header + controls */
.fcd-layout > aside .fcd-head{
  align-items:flex-start;
}
.fcd-flow-controls{
  margin-left:auto;
}
.fcd-flow-controls button{
  min-width:86px;
  white-space:nowrap;
}

/* Keep legend fully visible */
.fcd-legend{
  width:100%;
  flex-wrap:wrap;
}

/* Let left editor use clean full row; no accidental clipping */
.fcd-layout > section.fcd-panel{
  width:100%;
  overflow:hidden;
}
.fcd-card{
  width:100%;
}
.fcd-grid{
  width:100%;
}

/* Large screens: a little more width to flowchart */
@media(min-width:1500px){
  .fcd-layout{
    grid-template-columns:minmax(620px,.72fr) minmax(900px,1.28fr) !important;
  }
  .fcd-stage{
    min-width:860px !important;
  }
}

/* Medium screens: stack rather than crushing either side */
@media(max-width:1199px){
  .fcd-layout{
    grid-template-columns:1fr !important;
  }
  .fcd-stage{
    min-width:760px !important;
  }
}

/* Mobile */
@media(max-width:699px){
  .fcd-app{
    padding:12px 8px 32px !important;
  }

  .fcd-app > .fcd-hero,
  .fcd-app > .fcd-toolbar,
  .fcd-app > .fcd-layout,
  .fcd-app > .fcd-panel{
    width:100%;
  }

  .fcd-canvas{
    min-height:620px !important;
    padding:20px 10px 32px !important;
  }

  .fcd-stage{
    min-width:720px !important;
    margin:0;
    padding-left:80px;
    padding-right:100px;
  }

  .fcd-flow-controls{
    width:100%;
    margin-left:0;
  }

  .fcd-flow-controls button{
    flex:1 1 calc(33.333% - 6px);
    min-width:0;
  }
}