/* ====== 33 流程图生成器 · 白板纸 + 记号笔橙 ====== */
.tsk.flw{
  --tsk-bg:#faf7f0;
  --tsk-card:#fffdf8;
  --tsk-card-2:#f6f1e6;
  --tsk-ink:#22282f;
  --tsk-sub:#5c6672;
  --tsk-faint:#949784;
  --tsk-line:#e5dfd1;
  --tsk-line-2:#f1ecdf;
  --tsk-brand:#d9480f;
  --tsk-brand-2:#b13405;
  --tsk-brand-soft:#fdece3;
  --tsk-brand-ink:#b93e0a;
  --tsk-teal:#0b7285;
  --tsk-teal-soft:#e3f3f5;
  --tsk-ok:#2f9e44;
  --tsk-ok-soft:#e8f6eb;
  --tsk-shadow-sm:0 1px 2px rgba(34,40,47,.07),0 8px 20px rgba(34,40,47,.05);
  --tsk-shadow:0 2px 6px rgba(34,40,47,.08),0 20px 44px rgba(34,40,47,.09);
  background:
    radial-gradient(700px 320px at 100% -12%, rgba(217,72,15,.10), transparent 62%),
    radial-gradient(520px 260px at -8% 8%, rgba(11,114,133,.07), transparent 60%),
    var(--tsk-bg);
}
:root[data-theme="dark"] .tsk.flw{
  --tsk-bg:#151310;
  --tsk-card:#1e1b16;
  --tsk-card-2:#26221c;
  --tsk-ink:#f2ede1;
  --tsk-sub:#bdb4a3;
  --tsk-faint:#8b8271;
  --tsk-line:#362f26;
  --tsk-line-2:#2a251e;
  --tsk-brand:#ff8a5c;
  --tsk-brand-2:#ffa77f;
  --tsk-brand-soft:rgba(255,138,92,.13);
  --tsk-brand-ink:#ffa07a;
  --tsk-teal:#4fc3d4;
  --tsk-teal-soft:rgba(79,195,212,.13);
  --tsk-ok:#5ddb7f;
  --tsk-ok-soft:rgba(93,219,127,.13);
  --tsk-shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.3);
  --tsk-shadow:0 2px 6px rgba(0,0,0,.55),0 20px 44px rgba(0,0,0,.4);
  background:
    radial-gradient(700px 320px at 100% -12%, rgba(255,138,92,.12), transparent 62%),
    radial-gradient(520px 260px at -8% 8%, rgba(79,195,212,.08), transparent 60%),
    var(--tsk-bg);
}

/* ---------- 首屏 ---------- */
.flw-hero{display:grid;grid-template-columns:minmax(0,1fr) 394px;gap:30px;padding:30px 0 24px;align-items:stretch;}
.flw-hero-l{display:flex;flex-direction:column;}
.flw-hero-l>.tsk-hs{flex:1 1 auto;}
.flw-hero-l .tsk-h1 b{color:var(--tsk-brand-ink);}
.flw-hero-r{align-self:start;}

.flw-lib{
  background:var(--tsk-card);
  border:1px solid var(--tsk-line);
  border-radius:15px;
  padding:16px 17px 14px;
  box-shadow:var(--tsk-shadow);
  position:relative;
}
.flw-lib::before{
  content:"";
  position:absolute;top:-7px;left:26px;
  width:66px;height:14px;
  background:rgba(217,72,15,.22);
  transform:rotate(-3deg);
  border-radius:2px;
}
.flw-lib-hd{display:flex;align-items:baseline;justify-content:space-between;padding:4px 2px 10px;border-bottom:1px dashed var(--tsk-line);}
.flw-lib-hd b{font-size:14px;font-weight:800;color:var(--tsk-ink);}
.flw-lib-hd small{font-size:10.5px;color:var(--tsk-faint);}
.flw-lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 0 10px;}
.flw-add{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 6px 9px;border-radius:9px;cursor:pointer;
  border:1.5px solid var(--tsk-line);background:var(--tsk-card-2);
  color:var(--tsk-sub);transition:.15s;
}
.flw-add i{font-style:normal;font-size:16px;line-height:1;}
.flw-add span{font:800 11px/1.4 var(--tsk-font);}
.flw-add:hover{border-color:var(--tsk-brand);color:var(--tsk-brand-ink);transform:translateY(-1px);}
.flw-add.is-start i{color:var(--tsk-ok);}
.flw-add.is-process i{color:var(--tsk-teal);}
.flw-add.is-decision i{color:var(--tsk-brand);}
.flw-add.is-io i{color:#6741d9;}
.flw-add.is-end i{color:var(--tsk-faint);}
.flw-tpl{border-top:1px dashed var(--tsk-line);padding-top:11px;}
.flw-tpl>b{display:block;margin-bottom:7px;font-size:11.5px;font-weight:800;color:var(--tsk-sub);}
.flw-tpl>div{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.flw-tplbtn{
  height:32px;border-radius:7px;cursor:pointer;
  border:1px solid var(--tsk-line);background:var(--tsk-card-2);
  color:var(--tsk-sub);font:700 11.5px/1 var(--tsk-font);transition:.15s;
}
.flw-tplbtn:hover{border-color:var(--tsk-teal);color:var(--tsk-teal);}
.flw-lib-note{margin:11px 0 0;font-size:10.5px;line-height:1.7;color:var(--tsk-faint);}

/* ---------- 工作区 ---------- */
.flw-work{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  border:1px solid var(--tsk-line);border-radius:16px;overflow:hidden;
  background:var(--tsk-card);box-shadow:var(--tsk-shadow);
}
.flw-side{
  border-right:1px solid var(--tsk-line);
  background:var(--tsk-card-2);
  display:flex;flex-direction:column;min-width:0;
}
.flw-side-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--tsk-line);
}
.flw-side-hd b{font-size:13px;font-weight:800;color:var(--tsk-ink);}
.flw-side-hd span{font-size:10.5px;font-weight:700;color:var(--tsk-faint);}
.flw-empty{padding:26px 18px;font-size:12px;line-height:1.85;color:var(--tsk-faint);}
.flw-prop{padding:14px 16px 18px;}
.flw-field{display:block;margin-bottom:11px;}
.flw-field>span{display:block;margin-bottom:5px;font-size:11px;font-weight:800;color:var(--tsk-sub);}
.flw-field select,.flw-field input{
  width:100%;height:36px;padding:0 10px;
  border:1.5px solid var(--tsk-line);border-radius:7px;
  background:var(--tsk-card);color:var(--tsk-ink);
  font:600 13px/36px var(--tsk-font);outline:none;transition:.14s;
}
.flw-field input{line-height:normal;}
.flw-field select:focus,.flw-field input:focus{border-color:var(--tsk-brand);box-shadow:0 0 0 3px var(--tsk-brand-soft);}
.flw-field-hint{margin:-2px 0 12px;font-size:10.5px;line-height:1.75;color:var(--tsk-faint);}
.flw-del{
  width:100%;height:34px;border-radius:7px;cursor:pointer;
  border:1.5px solid var(--tsk-bad);background:var(--tsk-bad-soft);
  color:var(--tsk-bad);font:800 12px/1 var(--tsk-font);transition:.15s;
}
.flw-del:hover{filter:brightness(.96);}
.flw-edge{padding:16px 16px 20px;}
.flw-edge p{margin:0 0 11px;font-size:12px;line-height:1.8;color:var(--tsk-sub);}
.flw-side-foot{
  margin-top:auto;display:flex;justify-content:space-between;gap:6px;
  padding:12px 16px;border-top:1px solid var(--tsk-line);
  font-size:10.5px;color:var(--tsk-faint);
}
.flw-side-foot b{color:var(--tsk-brand-ink);font-family:var(--tsk-num);font-size:12px;}

.flw-main{min-width:0;display:flex;flex-direction:column;}
.flw-bar{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--tsk-line);
  background:var(--tsk-card);
}
.flw-tool{
  height:31px;padding:0 12px;border-radius:6px;cursor:pointer;
  border:1px solid var(--tsk-line);background:var(--tsk-card-2);
  color:var(--tsk-sub);font:700 11.5px/1 var(--tsk-font);transition:.14s;
}
.flw-tool:hover{border-color:var(--tsk-brand);color:var(--tsk-brand-ink);}
.flw-tool.is-on{background:var(--tsk-brand-soft);border-color:rgba(217,72,15,.3);color:var(--tsk-brand-ink);}
.flw-tool.is-connect[aria-pressed="true"]{background:var(--tsk-teal-soft);border-color:var(--tsk-teal);color:var(--tsk-teal);}
.flw-tool.is-danger:hover{border-color:var(--tsk-bad);color:var(--tsk-bad);background:var(--tsk-bad-soft);}
.flw-bar-sep{width:1px;height:18px;background:var(--tsk-line);margin:0 3px;}
.flw-canvas{
  position:relative;flex:1;min-height:520px;overflow:auto;
  background-color:#fffdf8;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(92,102,114,.20) 1px, transparent 1.6px);
  background-size:20px 20px;
}
:root[data-theme="dark"] .flw-canvas{
  background-color:#171410;
  background-image:radial-gradient(circle at 1px 1px, rgba(189,180,163,.22) 1px, transparent 1.6px);
}
.flw-hint{
  position:absolute;left:14px;top:11px;z-index:2;
  padding:5px 11px;border-radius:99px;
  background:rgba(217,72,15,.09);color:var(--tsk-brand-ink);
  font-size:10.5px;font-weight:700;pointer-events:none;
}
.flw-canvas svg{display:block;width:100%;height:auto;touch-action:none;}
.flw-canvas svg text{user-select:none;}

/* ---------- 校验 ---------- */
.flw-check{
  margin-top:16px;padding:18px 20px 16px;
  border:1px solid var(--tsk-line);border-left:4px solid var(--tsk-brand);border-radius:12px;
  background:var(--tsk-card);box-shadow:var(--tsk-shadow-sm);
}
.flw-check-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px;}
.flw-check-sub{margin-top:3px;font-size:12px;color:var(--tsk-faint);}
.flw-check-count{
  padding:5px 12px;border-radius:99px;background:var(--tsk-brand-soft);
  color:var(--tsk-brand-ink);font:800 11px/1.6 var(--tsk-font);
}
.flw-check-count.is-ok{background:var(--tsk-ok-soft);color:var(--tsk-ok);}
.flw-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:7px;}
.flw-checks li{
  display:flex;gap:8px;align-items:flex-start;
  padding:9px 11px;border-radius:8px;background:var(--tsk-card-2);
  font-size:11.5px;line-height:1.7;color:var(--tsk-sub);
}
.flw-checks li i{flex:none;width:16px;height:16px;border-radius:50%;font-style:normal;font-size:9px;font-weight:800;line-height:16px;text-align:center;}
.flw-checks li.is-ok{color:var(--tsk-sub);}
.flw-checks li.is-ok i{background:var(--tsk-ok-soft);color:var(--tsk-ok);}
.flw-checks li.is-warn i{background:var(--tsk-brand-soft);color:var(--tsk-brand-ink);}
.flw-checks li.is-bad i{background:var(--tsk-bad-soft);color:var(--tsk-bad);}
.flw-checks li.is-bad{color:var(--tsk-bad);}

/* ---------- 规则卡 ---------- */
.flw-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.flw-rule{
  padding:18px 19px;border:1px solid var(--tsk-line);border-radius:11px;
  background:var(--tsk-card);box-shadow:var(--tsk-shadow-sm);
}
.flw-rule i{display:block;font-style:normal;font-size:20px;line-height:1;color:var(--tsk-brand);margin-bottom:7px;}
.flw-rule b{font-size:14px;font-weight:800;color:var(--tsk-ink);}
.flw-rule p{margin:5px 0 0;font-size:12px;line-height:1.85;color:var(--tsk-sub);}

/* ---------- Toast ---------- */
.flw-toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);
  z-index:9999;max-width:86vw;padding:10px 20px;border-radius:99px;
  background:var(--tsk-ink);color:var(--tsk-bg);
  font-size:13px;font-weight:700;text-align:center;
  opacity:0;pointer-events:none;transition:.24s;box-shadow:var(--tsk-shadow);
}
.flw-toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .flw-work{grid-template-columns:1fr;}
  .flw-side{border-right:0;border-bottom:1px solid var(--tsk-line);}
  .flw-canvas{min-height:440px;}
  .flw-canvas svg{min-height:0;}
  .flw-checks{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .flw-hero{grid-template-columns:1fr;gap:22px;}
  .flw-rules{grid-template-columns:1fr;}
  .flw-bar{padding:9px 10px;}
}
@media (max-width:560px){
  .flw-checks{grid-template-columns:1fr;}
  .flw-lib-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- 键盘可访问与打印 ---------- */
.tsk.flw button:focus-visible,
.tsk.flw input:focus-visible,
.tsk.flw select:focus-visible{
  outline:2px solid var(--tsk-brand);
  outline-offset:2px;
}
@media print{
  .tsk.flw .flw-hero,
  .tsk.flw .flw-side,
  .tsk.flw .flw-bar,
  .tsk.flw .flw-hint,
  .tsk.flw .flw-check,
  .tsk.flw .flw-toast,
  .tsk.flw .tskb,
  .tsk.flw .tsk-crumb,
  .tsk.flw .tsk-foot{display:none!important;}
  .tsk.flw .flw-work{display:block;border:0;box-shadow:none;}
  .tsk.flw .flw-canvas{padding:0;border:0;min-height:0;}
}