/* 卡通头像制作 · 波普Q版风：高饱和波普圆点 + 粗描边 + 贴纸按钮 */
.cav-wrap{
  --cav-pink:#ff4d8d; --cav-yellow:#ffd23f; --cav-blue:#2f9bff; --cav-green:#25c19f;
  --cav-bg:#fff6fb; --cav-card:#fff; --cav-ink:#241f31; --cav-mute:#7a7288; --cav-line:#241f31;
  max-width:900px;margin:0 auto;padding:18px 14px 40px;
  font-size:15.5px;line-height:1.78;color:var(--cav-ink);
}
.cav-wrap h1,.cav-wrap h2{font-weight:900;}
.cav-hero{position:relative;overflow:hidden;background:var(--cav-bg);border:4px solid var(--cav-line);border-radius:22px;padding:24px 22px;box-shadow:8px 8px 0 var(--cav-pink);}
.cav-kicker{display:inline-block;background:var(--cav-yellow);border:3px solid var(--cav-line);border-radius:999px;padding:3px 14px;font-weight:900;font-size:13px;transform:rotate(-2deg);}
.cav-hero h1{font-size:clamp(24px,4.6vw,36px);margin:14px 0 8px;line-height:1.3;}
.cav-sub{max-width:600px;color:var(--cav-mute);font-weight:600;}
.cav-hero-dots{position:absolute;right:-10px;top:-10px;width:180px;height:140px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;opacity:.9;}
.cav-hero-dots i{width:22px;height:22px;border-radius:50%;border:3px solid var(--cav-line);}
.cav-hero-dots i:nth-child(1){background:var(--cav-pink);}
.cav-hero-dots i:nth-child(2){background:var(--cav-yellow);}
.cav-hero-dots i:nth-child(3){background:var(--cav-blue);}
.cav-hero-dots i:nth-child(4){background:var(--cav-green);}
.cav-hero-dots i:nth-child(5){background:var(--cav-pink);}
.cav-hero-dots i:nth-child(6){background:var(--cav-yellow);}
.cav-hero-dots i:nth-child(7){background:var(--cav-blue);}
.cav-hero-dots i:nth-child(8){background:var(--cav-green);}
.cav-hero-dots i:nth-child(9){background:var(--cav-pink);}
.cav-stage-card{display:flex;gap:18px;background:var(--cav-card);border:4px solid var(--cav-line);border-radius:22px;margin-top:20px;padding:20px;align-items:center;flex-wrap:wrap;box-shadow:8px 8px 0 var(--cav-blue);}
.cav-stage{flex:0 0 auto;background:var(--cav-bg);border:4px solid var(--cav-line);border-radius:18px;padding:8px;transform:rotate(-1.5deg);}
.cav-side{flex:1 1 240px;display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:220px;}
.cav-btn{border:4px solid var(--cav-line);border-radius:999px;padding:13px 18px;font-size:16px;font-weight:900;cursor:pointer;background:#fff;color:var(--cav-ink);box-shadow:4px 4px 0 var(--cav-line);transition:transform .08s,box-shadow .08s;}
.cav-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--cav-line);}
.cav-btn.main{background:var(--cav-pink);color:#fff;}
.cav-btn.pop{background:var(--cav-yellow);}
.cav-btn.ghost{background:#fff;box-shadow:none;font-weight:700;}
.cav-btn:disabled{opacity:.6;cursor:wait;}
.cav-tip{color:var(--cav-mute);font-size:13.5px;margin:0;}
.cav-card{background:var(--cav-card);border:4px solid var(--cav-line);border-radius:22px;margin-top:20px;padding:20px;box-shadow:8px 8px 0 var(--cav-green);}
.cav-card h2{font-size:19px;margin:0 0 14px;}
.cav-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;}
.cav-part{border:3px solid var(--cav-line);border-radius:16px;padding:10px 12px;background:var(--cav-bg);}
.cav-part-h{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:14px;margin-bottom:8px;}
.cav-part-name{color:var(--cav-mute);font-weight:700;}
.cav-nav{display:flex;align-items:center;gap:8px;}
.cav-arrow{width:34px;height:34px;border:3px solid var(--cav-line);border-radius:50%;background:#fff;font-size:15px;font-weight:900;cursor:pointer;box-shadow:2px 2px 0 var(--cav-line);}
.cav-arrow:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--cav-line);}
.cav-bgs{display:flex;gap:8px;flex-wrap:wrap;}
.cav-bgdot{width:30px;height:30px;border-radius:50%;border:3px solid var(--cav-line);cursor:pointer;box-shadow:2px 2px 0 var(--cav-line);}
.cav-bgdot.on{outline:4px solid var(--cav-pink);outline-offset:2px;}
.cav-steps{margin:0;padding-left:20px;}
.cav-steps li{margin-bottom:8px;}
.cav-note{color:var(--cav-mute);font-size:14px;margin-top:12px;border-top:2px dashed var(--cav-mute);padding-top:12px;}
.cav-faqs dt{font-weight:900;margin-top:12px;}
.cav-faqs dd{margin:4px 0 0;color:var(--cav-mute);}

html[data-theme="dark"] .cav-wrap{
  --cav-bg:#2a2333; --cav-card:#332b3f; --cav-ink:#f5eef8; --cav-mute:#b3a8c0; --cav-line:#f5eef8;
}
html[data-theme="dark"] .cav-btn,
html[data-theme="dark"] .cav-arrow{background:#332b3f;color:#f5eef8;}
html[data-theme="dark"] .cav-btn.main{background:var(--cav-pink);color:#fff;}
html[data-theme="dark"] .cav-btn.pop{background:var(--cav-yellow);color:#241f31;}

@media (max-width:768px){
  .cav-stage-card{justify-content:center;}
  .cav-hero-dots{display:none;}
}

/* ===== v1.1 尺寸预设 / 图层 / 套系生成 ===== */
.cav-size-row{display:flex;gap:8px;margin-bottom:10px;}
.cav-size{flex:1;padding:8px 0;border:3px solid var(--cav-line);border-radius:999px;background:#fff;font-weight:900;font-size:14px;cursor:pointer;}
.cav-size.on{background:var(--cav-blue);color:#fff;}
.cav-layer-row{display:flex;gap:8px;flex-wrap:wrap;}
.cav-layer-row input,.cav-layer-row select{flex:1 1 130px;min-width:0;padding:9px 12px;border:3px solid var(--cav-line);border-radius:12px;font-size:15px;background:#fff;color:var(--cav-ink);}
.cav-layer-row input:focus,.cav-layer-row select:focus{outline:3px solid var(--cav-yellow);}
.cav-series{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px;}
.cav-series-item{border:3px solid var(--cav-line);border-radius:16px;background:var(--cav-bg);padding:6px;cursor:pointer;transition:transform .12s;}
.cav-series-item:hover{transform:translateY(-3px);box-shadow:3px 3px 0 var(--cav-pink);}
.cav-series-item.picked{outline:4px solid var(--cav-green);}
.cav-series-item svg{display:block;width:100%;height:auto;border-radius:10px;}
.cav-series-empty{grid-column:1/-1;color:var(--cav-mute);padding:12px;border:2px dashed var(--cav-mute);border-radius:14px;}

html[data-theme="dark"] .cav-size,
html[data-theme="dark"] .cav-layer-row input,
html[data-theme="dark"] .cav-layer-row select{background:#332b3f;color:#f5eef8;}
html[data-theme="dark"] .cav-size.on{background:var(--cav-blue);color:#fff;}

@media (max-width:768px){
  .cav-series{grid-template-columns:repeat(3,1fr);}
}