/* ======================================================================
   CSS clip-path 生成器 · 独立设计（裁剪垫 / 手作工作台主题）
   浅色 = 奶白纸 + 青绿刻线 + 粉尺；深色 = 墨绿垫
   ====================================================================== */
.cp{
  --ink:#17302e; --sub:#4f6c69; --faint:#8aa5a1;
  --bg:#f3f7f5; --card:#ffffff; --card2:#e6f0ed; --line:#d2e2de; --line2:#e0ece9;
  --pri:#0d9488; --pri-2:#14b8a6; --pri-soft:#d9f2ef; --pri-ink:#0f766e;
  --pink:#ec4899; --pink-2:#f472b6; --pink-soft:#fce7f3;
  --red:#c62828; --red-soft:#fbeaea;
  --ok:#0d9488;
  --r:14px;
  --shadow:0 1px 2px rgba(23,48,46,.05),0 10px 28px rgba(13,148,136,.10);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  background:
    repeating-linear-gradient(0deg, rgba(13,148,136,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(13,148,136,.05) 0 1px, transparent 1px 28px),
    radial-gradient(760px 380px at 88% -120px, rgba(236,72,153,.08), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .cp{
  --ink:#e0f2ef; --sub:#9fc2bd; --faint:#6a8f8a;
  --bg:#0b1a18; --card:#122522; --card2:#17302c; --line:#254540; --line2:#1e3b36;
  --pri:#2dd4bf; --pri-2:#5eead4; --pri-soft:rgba(45,212,191,.14); --pri-ink:#99f6e4;
  --pink:#f472b6; --pink-2:#f9a8d4; --pink-soft:rgba(244,114,182,.13);
  --red:#f87171; --red-soft:rgba(248,113,113,.12);
  --ok:#2dd4bf;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.42);
}
.cp *{box-sizing:border-box;}
.cp b{font-weight:700;}
.cp-wrap{max-width:1160px;margin:0 auto;}
.cp textarea,.cp pre,.cp code,.cp input[type=range]{font-family:ui-monospace,Consolas,monospace;}

.cp-hero{margin-top:22px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(115deg,#115e59,#0d9488 55%,#db2777 130%);position:relative;}
:root[data-theme="dark"] .cp-hero{background:linear-gradient(115deg,#083a36,#0f5f58 55%,#7c2d5e 130%);}
.cp-scissors{position:absolute;right:22px;top:8px;font-size:64px;opacity:.28;transform:rotate(-12deg);}
.cp-hero-body{position:relative;padding:24px 28px;}
.cp-hero h1{margin:0 0 8px;font-size:clamp(23px,3.4vw,31px);font-weight:900;color:#fff;line-height:1.3;}
.cp-hero p{margin:0;color:#d5f0ea;font-size:15px;max-width:820px;}
.cp-hero p em{font-style:normal;color:#fbcfe8;font-weight:700;}

.cp-desk{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:20px;align-items:start;}
@media (max-width:960px){.cp-desk{grid-template-columns:1fr;}}
.cp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.cp-card h2{margin:0 0 10px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.cp-card h2::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--pink);}
.cp-tip{font-size:12.5px;color:var(--sub);margin:0 0 10px;}

.cp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;}
.cp-chip{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer;font-weight:600;transition:all .15s;}
.cp-chip:hover{border-color:var(--pri-2);color:var(--pri-ink);}
.cp-chip.on{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .cp-chip.on{color:#06231f;}
.cp-chip.pk.on{background:var(--pink);border-color:var(--pink);color:#fff;}
.cp-btn{border:none;border-radius:10px;padding:9px 20px;font-size:14px;font-weight:800;cursor:pointer;transition:all .15s;}
.cp-btn-go{background:var(--pink);color:#fff;}
.cp-btn-go:hover{background:var(--pink-2);}
.cp-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.cp-btn-ghost:hover{border-color:var(--pri-2);}
.cp-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.cp-msg.err{color:var(--red);}
.cp-msg.ok{color:var(--ok);}

/* 裁剪垫 */
.cp-stage-wrap{position:relative;}
.cp-stage{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  border:1px dashed var(--faint);
  background:
    repeating-conic-gradient(rgba(0,0,0,.05) 0% 25%, transparent 0% 50%) 0 0/24px 24px,
    var(--card2);
}
.cp-shape{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#0d9488 0%,#14b8a6 30%,#f472b6 75%,#ec4899 100%);
  transition:clip-path .05s linear;
}
.cp-shape::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 14px, transparent 14px 28px);}
.cp-handle{
  position:absolute;width:18px;height:18px;border-radius:50%;
  background:var(--pink);border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.35);
  transform:translate(-50%,-50%);cursor:grab;touch-action:none;z-index:5;
}
.cp-handle:active{cursor:grabbing;}
.cp-handle.center{background:var(--pri);}
.cp-coord{position:absolute;left:8px;bottom:6px;font-size:11.5px;font-family:ui-monospace,Consolas,monospace;color:var(--sub);background:var(--card);border:1px solid var(--line);border-radius:7px;padding:2px 8px;z-index:6;}

.cp-slider{display:grid;grid-template-columns:88px 1fr 52px;align-items:center;gap:10px;margin:7px 0;font-size:13px;color:var(--sub);font-weight:600;}
.cp-slider input[type=range]{width:100%;accent-color:var(--pri);}
.cp-slider .v{font-family:ui-monospace,Consolas,monospace;color:var(--pri-ink);text-align:right;}

.cp-pre{width:100%;min-height:110px;max-height:220px;overflow:auto;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);padding:12px 14px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;margin:0;}

.cp-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.cp-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.cp-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.cp-faq p{margin:0;color:var(--sub);font-size:14px;}
.cp-faq p b{color:var(--ink);}

/* ---------- 深度面板：扩展形状 / 顶点诊断 / 多格式导出 ---------- */
.cp-deep{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;min-width:0;}
.cp-deep-head h2{margin:0 0 4px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.cp-deep-head h2::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--pink);}
.cp-deep-head p{margin:0 0 14px;font-size:12.5px;color:var(--sub);}
.cp-deep-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;}
.cp-deep-panel{min-width:0;}
.cp-deep-panel + .cp-deep-panel{border-left:1px solid var(--line2);padding-left:16px;}
.cp-deep-cap{font-size:12px;font-weight:700;color:var(--sub);margin:0 0 6px;}
.cp-deep-tpls{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.cp-deep-tpl{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;}
.cp-deep-tpl:hover{border-color:var(--pink);color:var(--pink);}
.cp-deep-tpl.on{background:var(--pink);border-color:var(--pink);color:#fff;}
.cp-deep-in{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:12.5px;outline:none;font-family:ui-monospace,Consolas,monospace;}
.cp-deep-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.cp-deep-sel{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:13px;font-weight:700;outline:none;}
.cp-deep-sel:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.cp-deep-pre{width:100%;min-height:150px;max-height:280px;overflow:auto;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);padding:12px 14px;font-size:12px;line-height:1.65;white-space:pre-wrap;word-break:break-word;margin:8px 0 0;}
.cp-deep-svg{width:100%;height:auto;display:block;background:var(--card2);border:1px solid var(--line);border-radius:10px;}
.cp-deep-svg text{font-family:ui-monospace,Consolas,monospace;}
.cp-deep-stat{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--pri-ink);line-height:1.6;}
.cp-deep-empty{margin-top:4px;font-size:11.5px;color:var(--faint);line-height:1.6;}
@media (max-width:900px){
  .cp-deep-grid{grid-template-columns:1fr;}
  .cp-deep-panel + .cp-deep-panel{border-left:none;padding-left:0;border-top:1px solid var(--line2);padding-top:14px;}
}