/* ============================================================
 * Clay & Flame v10 · 样式
 * 视觉语言沿用 pottery-studio（暖米底 + 陶土色），布局为三栏工作台。
 * ============================================================ */
:root{
  --bg:#f5efe6; --card:#fffdf9; --line:#e8ddd0; --line2:#f0e8dd;
  --ink:#3a2a20; --ink2:#6b5748; --mut:#9a8c7c;
  --clay:#c0653a; --clay-dark:#a4522c; --clay-soft:#fdf6f0;
  --ok:#4e9a6a; --blue:#3e6fb5;
  --r:12px;
}
*{box-sizing:border-box}
/* ⚠️ 必须显式压掉 [hidden]：本文件里有若干 display:flex 的元素，
 *    CSS 的 display 会盖过 hidden 属性，导致"该藏的没藏" */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14.5px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;gap:20px;padding:12px 20px;
  background:var(--card);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:10px;min-width:186px}
.logo{
  width:36px;height:36px;border-radius:10px;background:var(--clay);color:#fff;
  font:600 14px/36px sans-serif;text-align:center;letter-spacing:.5px;
}
.brand-txt strong{display:block;font-size:15px;letter-spacing:.2px}
.brand-txt span{display:block;font-size:11.5px;color:var(--mut)}
.stepbar{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.step-btn{
  border:1px solid var(--line);background:transparent;color:var(--ink2);
  padding:6px 14px;border-radius:20px;font-size:13px;cursor:pointer;
  transition:.18s;font-family:inherit;white-space:nowrap;
}
.step-btn:hover{border-color:var(--clay);color:var(--clay)}
.step-btn.active{background:var(--clay);border-color:var(--clay);color:#fff}
.top-actions{display:flex;gap:8px;min-width:100px;justify-content:flex-end}

.btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:8px 16px;border-radius:9px;font-size:13.5px;cursor:pointer;
  font-family:inherit;transition:.18s;
}
.btn:hover{border-color:var(--clay);color:var(--clay)}
.btn.primary{background:var(--clay);border-color:var(--clay);color:#fff}
.btn.primary:hover{background:var(--clay-dark);border-color:var(--clay-dark);color:#fff}
.btn.ghost{background:transparent}
.btn.tiny{padding:5px 11px;font-size:12.5px}
.btn.active{background:var(--clay-soft);border-color:var(--clay);color:var(--clay);font-weight:600}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line);color:var(--ink)}

/* ---------- 三栏 ---------- */
.studio{display:grid;grid-template-columns:300px 1fr 268px;gap:14px;padding:14px;flex:1;min-height:0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow-y:auto}
.panel.left{padding:18px}
.panel.right{padding:18px;display:flex;flex-direction:column}

/* ---------- 步骤面板 ---------- */
.step-body{display:none}
.step-body.active{display:block}
h3{margin:0 0 8px;font-size:16px;letter-spacing:.2px}
.desc{margin:0 0 14px;font-size:13px;color:var(--ink2);line-height:1.65}
.desc.small{font-size:12.5px;color:var(--mut);margin-top:14px}

.fam-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fam-btn{
  border:1px solid var(--line);background:transparent;color:var(--ink2);
  padding:4px 11px;border-radius:15px;font-size:12.5px;cursor:pointer;font-family:inherit;
}
.fam-btn.active{background:var(--clay-soft);border-color:var(--clay);color:var(--clay);font-weight:600}

.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.shape-card{
  border:1px solid var(--line);border-radius:10px;padding:11px 6px 8px;
  text-align:center;cursor:pointer;transition:.16s;background:#fffefc;
}
.shape-card:hover{border-color:var(--clay);transform:translateY(-1px)}
.shape-card.active{border-color:var(--clay);background:var(--clay-soft);box-shadow:0 0 0 1px var(--clay) inset}
.shape-card .ic{font-size:19px;line-height:1.5;display:block}
.shape-card .nm{font-size:12px;color:var(--ink2);display:block;margin-top:3px;line-height:1.35}
.shape-card.active .nm{color:var(--clay);font-weight:600}

.slider-row{margin-bottom:16px}
.slider-row label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px;color:var(--ink2)}
.slider-row label b{color:var(--ink);font-weight:600}
input[type=range]{
  width:100%;-webkit-appearance:none;height:4px;border-radius:2px;
  background:var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--clay);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.safe-note{
  background:var(--clay-soft);border:1px solid #f0dfd0;border-radius:9px;
  padding:11px 13px;font-size:12.5px;color:var(--ink2);line-height:1.65;
}
.safe-note b{color:var(--clay)}
.size-real{margin-top:14px;font-size:12.5px;color:var(--mut);line-height:1.8}

.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px}
.swatch{
  aspect-ratio:1;border-radius:9px;cursor:pointer;border:2px solid transparent;
  transition:.16s;position:relative;
}
.swatch:hover{transform:scale(1.06)}
.swatch.active{border-color:var(--clay);box-shadow:0 0 0 2px var(--clay-soft)}
.swatch .nm{
  position:absolute;left:0;right:0;bottom:-17px;text-align:center;
  font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.palette{margin-bottom:30px}

.finish-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.finish-btn{
  border:1px solid var(--line);background:transparent;border-radius:9px;padding:9px 4px;
  font-size:12.5px;color:var(--ink2);cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:.16s;
}
.finish-btn:hover{border-color:var(--clay)}
.finish-btn.active{border-color:var(--clay);background:var(--clay-soft);color:var(--clay);font-weight:600}
.dot{width:15px;height:15px;border-radius:50%;background:#d9c9aa}
.dot.m{box-shadow:inset 0 0 0 3px #efe6d8}
.dot.g{box-shadow:inset -3px -3px 5px rgba(255,255,255,.85),inset 2px 2px 4px rgba(0,0,0,.14)}

.craft-note{
  background:var(--clay-soft);border:1px solid #f0dfd0;border-radius:9px;
  padding:12px 14px;font-size:12.5px;color:var(--ink2);line-height:1.7;margin-bottom:16px;
}
.craft-note b{color:var(--clay)}
.step-body .btn{width:100%;margin-bottom:9px}

/* ---------- 分区上色 ---------- */
.sub-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin:22px 0 10px;border-top:1px dashed var(--line2);padding-top:16px;
}
.sub-head span{font-size:13.5px;font-weight:600}
.sub-head small{font-size:11.5px;color:var(--mut)}
.zone-row{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:16px}
/* 色带分界滑块：比常规滑块紧凑些，多条一起出现时不至于太占地方 */
.cut-row{margin-bottom:9px}
.cut-row label{font-size:12px;color:var(--mut)}
.cut-row label b{color:var(--ink2)}
.zone-btn{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:transparent;
  border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--ink2);
  cursor:pointer;font-family:inherit;transition:.16s;text-align:left;
}
.zone-btn i{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.zone-btn:hover{border-color:var(--clay)}
.zone-btn.active{border-color:var(--clay);background:var(--clay-soft);color:var(--clay);font-weight:600}

/* ---------- 图案颜色 ---------- */
.ink-row{display:flex;gap:9px;margin-bottom:16px}
.ink-dot{
  width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  transition:.16s;box-shadow:inset 0 1px 3px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.08);
}
.ink-dot:hover{transform:scale(1.1)}
.ink-dot.active{border-color:var(--clay);box-shadow:0 0 0 2px var(--clay-soft),inset 0 1px 3px rgba(0,0,0,.18)}

/* ---------- 装饰模具 ---------- */
.mold-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:18px}
.mold-btn{
  aspect-ratio:1;border:1px solid var(--line);background:#fffefc;border-radius:9px;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:.16s;
}
.mold-btn:hover{border-color:var(--clay);transform:translateY(-1px)}
.mold-btn.active{border-color:var(--clay);background:var(--clay-soft);box-shadow:0 0 0 1px var(--clay) inset}
.mold-btn canvas{width:32px;height:32px;display:block}

.list-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--ink2);margin-bottom:8px;
}
.decor-list .empty{font-size:12.5px;color:var(--mut);padding:10px 0}
.decor-item{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:6px 7px;border-radius:8px;border:1px solid transparent;
  font-size:12.5px;cursor:pointer;transition:.14s;
}
.decor-item:hover{background:#faf6f1}
.decor-item.active{border-color:var(--clay);background:var(--clay-soft)}
.d-name{color:var(--ink2);display:flex;align-items:center;gap:6px;min-width:0}
.d-swatch{
  width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
}
.d-actions{display:flex;gap:2px}
/* 装饰项上的按钮变多了（旋转 ×2 + 缩放 ×2 + 删除），compact 一点 */
.d-actions .btn.tiny{padding:3px 6px;font-size:11.5px;min-width:24px;line-height:1.3}

/* ---------- 文字印章 ---------- */
.text-row{display:flex;gap:7px;margin-bottom:10px}
.text-row input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;font-size:14px;font-family:inherit;color:var(--ink);
  background:#fffefc;transition:.16s;letter-spacing:.5px;
}
.text-row input::placeholder{color:var(--mut)}
.text-row input:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 2px var(--clay-soft)}
#textLayout{margin-left:0;margin-bottom:14px}
.d-sub{
  font-size:10.5px;color:var(--mut);border:1px solid var(--line);
  border-radius:8px;padding:0 5px;margin-left:2px;
}
.btn.tiny.danger{color:#b3261e}
.btn.tiny.danger:hover{border-color:#b3261e;color:#b3261e}

/* ---------- 舞台 ---------- */
.stage{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;min-height:0;
}
.stage-head{
  display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line2);
  flex-wrap:wrap;flex:0 0 auto;
}
.tag{
  background:var(--clay-soft);color:var(--clay);border:1px solid #f0dfd0;
  padding:3px 11px;border-radius:14px;font-size:12.5px;font-weight:600;
}
.tag.light{background:#f7f3ec;color:var(--ink2);border-color:var(--line);font-weight:400}
.tag.ghost{background:transparent;color:var(--mut);border-color:var(--line);font-weight:400}
.canvas-wrap{
  flex:1;position:relative;min-height:0;
  /* 影棚感：中心略亮的柔和径向渐变，让器物从背景里"站"出来 */
  background:radial-gradient(ellipse 64% 56% at 50% 45%, #fffdfa 0%, #f8f2ea 56%, #eee4d7 100%);
}
#gl{width:100%;height:100%;display:block}
.hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:12px;color:var(--mut);background:rgba(255,253,249,.86);
  padding:4px 12px;border-radius:14px;pointer-events:none;
}
.loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--mut);font-size:13.5px;
}
.loading.hide{display:none}
.view-ctrl{
  display:flex;gap:8px;padding:11px 16px;border-top:1px solid var(--line2);
  justify-content:center;flex:0 0 auto;
}

/* ---------- 右侧清单 ---------- */
.panel.right h3{margin-bottom:14px}
.order-box{margin-bottom:16px}
.grp{display:flex;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line2);font-size:13px;align-items:baseline}
.grp:last-child{border-bottom:none}
.grp .k{color:var(--mut);flex:0 0 46px;font-size:12.5px}
.grp .v{flex:1}
.chip{
  display:inline-flex;align-items:center;gap:5px;background:#f7f3ec;border:1px solid var(--line);
  border-radius:14px;padding:2px 9px;font-size:11.5px;color:var(--ink2);margin:2px 4px 2px 0;
}
.chip i{width:9px;height:9px;border-radius:50%;display:inline-block}
.price-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:14px;border-top:1px solid var(--line2)}
.price-row span{font-size:13px;color:var(--ink2)}
.price-row strong{font-size:25px;color:var(--clay);letter-spacing:-.5px}
.price-note{font-size:11.5px;color:var(--mut);margin:5px 0 12px;line-height:1.6}
.tech-note{font-size:11px;color:#b8ab9c;margin:auto 0 0;line-height:1.6;border-top:1px dashed var(--line2);padding-top:10px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);
  background:#3a2a20;color:#fff;padding:10px 20px;border-radius:22px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.24s;z-index:99;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .studio{grid-template-columns:262px 1fr 244px}
  .brand-txt span{display:none}
}
@media (max-width:980px){
  body{overflow:auto}
  .studio{grid-template-columns:1fr;height:auto}
  .stage{min-height:460px}
  .panel{overflow:visible}
  .stepbar{justify-content:flex-start}
}
@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:10px}
  .stepbar{order:3;width:100%;justify-content:flex-start}
  .brand{min-width:0}
  .brand-txt span{display:block}
}

/* ---------- 形状控制点（第 2 步）---------- */
.handle-layer{position:absolute;inset:0;pointer-events:none;display:none}
.shape-handle{
  position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:#fff;border:2px solid var(--clay);
  box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:ew-resize;pointer-events:auto;
  transition:transform .12s;
}
.shape-handle::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--clay);opacity:.85;
}
.shape-handle:hover{transform:scale(1.25)}
.shape-handle.dragging{transform:scale(1.35);background:var(--clay);border-color:#fff}
.shape-handle.dragging::after{background:#fff;opacity:1}

/* 复选行 */
.check{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);
  margin:16px 0 6px;cursor:pointer;user-select:none;
}
.check input{width:15px;height:15px;accent-color:var(--clay);cursor:pointer}

/* ============================================================
 * 视角拉杆（画布下方）
 * 涂抹模式下左键被"上釉"占用，转不了视角 —— 这两根拉杆就是为它准备的。
 * ============================================================ */
.view-sliders{
  display:flex;gap:22px;padding:10px 18px 14px;border-top:1px solid var(--line2);
  flex:0 0 auto;flex-wrap:wrap;
}
.vs-row{display:flex;align-items:center;gap:10px;flex:1;min-width:190px}
.vs-row label{font-size:12.5px;color:var(--mut);flex:0 0 auto;white-space:nowrap}
.vs-row input[type=range]{flex:1;min-width:80px}
.vs-row b{font-size:12.5px;color:var(--ink2);font-weight:600;flex:0 0 46px;text-align:right}

/* ============================================================
 * 上传图片转简笔画
 * ============================================================ */
.upload-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* ⚠️ .step-body .btn 是 width:100% 的（面板里的按钮都通栏），这里要收回来。
 * ⚠️ 每个 flex 行都要记得把自己里面的按钮收回来 —— 漏了的话按钮会撑满整行，
 *    把同行的输入框挤成十几像素（文字输入框第一次上线就栽在这里）。 */
.upload-row .btn,.seg .btn,.text-row .btn{width:auto;margin-bottom:0;flex-shrink:0}
.seg{display:flex;gap:6px;margin-left:auto}
.seg .btn.active{background:var(--clay-soft);border-color:var(--clay);color:var(--clay);font-weight:600}

.upload-preview{
  display:flex;align-items:center;gap:11px;margin-top:14px;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  background:#fffefc;cursor:pointer;transition:.16s;
}
.upload-preview:hover{border-color:var(--clay)}
.upload-preview.active{border-color:var(--clay);background:var(--clay-soft);box-shadow:0 0 0 1px var(--clay) inset}
.upload-preview canvas{
  width:52px;height:52px;flex:0 0 auto;border-radius:7px;
  background:#f7f3ec;border:1px solid var(--line2);
  /* 简笔画是深墨线，缩略图里放大看清楚 */
  image-rendering:auto;
}
.up-txt{display:flex;flex-direction:column;min-width:0}
.up-txt b{font-size:12.5px;color:var(--ink)}
.up-txt span{font-size:11.5px;color:var(--mut);line-height:1.5}
.up-badge{
  margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--clay);
  border:1px solid #f0dfd0;background:var(--clay-soft);border-radius:12px;padding:2px 9px;
}