/* ============================================================
   builder.css —— 串珠定制设计器（移动端 App 版 · 对标「珠了个珠」DIY 流程）
   ------------------------------------------------------------
   结构（移动端自上而下，和对手的截图一一对应）：
     ① .b-statusbar   状态胶囊：手围约 X cm（过短/合适）+ 价格 + 帮助 + 🔊
     ② .b-canvas-wrap 圆环画布：细圈 + 珠子串 + 中央品牌水印
     ③ .b-actbar      四动作：删除 / 暂存 / 推荐 / 完成设计
     ④ .b-tools       次级工具（横滑）
     ⑤ .b-sheet       底部抽屉：分类 tab + 搜索 + 左侧分类栏 + 三列素材格
   桌面端（≥901px）自动变成「左画布 + 右抽屉常驻」的两栏，不浪费宽屏。

   全部选择器锁在 .builder-app 内，不与站点 .layout/.panel/.section 冲突。
   custom.html 只加载 style.css + app.css + builder.css，所以本文件必须自带
   --accent-ink 等主色文字变量（缺了主色按钮上的字会变成继承色）。
   ============================================================ */

#builder .wrap { max-width: 1560px; padding-left: 16px; padding-right: 16px; }

.builder-app {
  /* 与 css/app.css 的 --ax-* 同源；此处局部重声明，保证本文件单独也能看 */
  --b-bg: #F5F4F1;
  --b-card: #FFFFFF;
  --b-ink: #1F1B16;
  --b-muted: #8B8478;
  --b-line: #EDEBE6;
  --b-line-2: #E3E0DA;
  --b-brand: #8A6A2F;
  --b-brand2: #C29A4A;
  --b-soft: #F4F1EA;
  --b-danger: #A8452F;
  --b-ok: #4A6B54;
  --b-gold: #C29A4A;
  --accent-ink: #FFFFFF;
  --b-shadow: 0 1px 2px rgba(31,27,22,.04), 0 8px 24px rgba(31,27,22,.05);
  --b-r: 16px;     /* 卡片软圆角 */
  --b-r-sm: 12px;
  --b-r-xs: 9px;
  --b-pill: 999px;
  --b-grad: linear-gradient(135deg, #8A6A2F 0%, #C29A4A 100%);
  font-size: 15px;
}
.builder-app * { box-sizing: border-box; }

/* ---------------- 骨架 ---------------- */
.builder-app .b-app { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
/* 动作 / 工具 / 选中珠编辑三行收进一束（桌面端要整束横跨整行，见文末媒体查询） */
.builder-app .b-foot { display: flex; flex-direction: column; gap: 10px; }
.builder-app .b-foot > * { min-width: 0; }
.builder-app .b-enter .b-canvas-wrap,
.builder-app.b-enter .b-canvas-wrap { animation: b-fade-up .5s ease both; }

/* ---------------- ① 状态胶囊条 ---------------- */
.builder-app .b-statusbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  padding: 2px 0 2px; scrollbar-width: none;
}
.builder-app .b-statusbar::-webkit-scrollbar { display: none; }
.builder-app .b-statusbar .b-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: var(--b-pill);
  padding: 7px 13px; font-size: 12.5px; color: var(--b-muted); white-space: nowrap;
  cursor: pointer; font-family: inherit;
}
.builder-app .b-statusbar .b-chip b { color: var(--b-ink); font-weight: 800; }
.builder-app .b-statusbar .b-chip em {
  font-style: normal; font-weight: 700; font-size: 12px;
  padding: 1px 7px; border-radius: var(--b-pill); background: rgba(168,69,47,.10); color: var(--b-danger);
}
.builder-app .b-statusbar .b-chip em.ok { background: rgba(74,107,84,.12); color: var(--b-ok); }
.builder-app .b-statusbar .b-chip em.long { background: rgba(138,106,47,.12); color: var(--b-brand); }
.builder-app .b-statusbar .b-chip.on { border-color: var(--b-brand); }
.builder-app .b-statusbar .b-spacer { flex: 1 1 auto; }
.builder-app .b-statusbar .b-iconbtn {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--b-card); border: 1px solid var(--b-line); color: var(--b-brand);
  font-size: 14px; font-weight: 800; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-family: inherit;
}
.builder-app .b-statusbar .b-iconbtn:hover { border-color: var(--b-brand); }

/* ---------------- 配置条：性别 + 全局珠径 ----------------
   桌面 / 移动端通用，常驻在状态胶囊下方。用「标签 + 分段按钮」，
   点一下即套用，不弹层、不滚屏，符合「体验感最重要」的要求。 */
.builder-app .b-config {
  display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fff 0%, #FBFAF7 100%);
  border: 1px solid var(--b-line); border-radius: var(--b-r);
  padding: 9px 14px; box-shadow: 0 2px 10px rgba(31,27,22,.04);
}
.builder-app .b-cfg-group { display: flex; align-items: center; gap: 10px; }
.builder-app .b-cfg-lbl {
  font-size: 12px; font-weight: 800; color: var(--b-muted); letter-spacing: .02em;
  white-space: nowrap;
}
.builder-app .b-seg { display: inline-flex; background: var(--b-soft); border-radius: var(--b-pill); padding: 3px; gap: 3px; }
.builder-app .b-seg button {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--b-muted);
  padding: 6px 14px; border-radius: var(--b-pill); white-space: nowrap; transition: .14s;
}
.builder-app .b-seg button:hover { color: var(--b-ink); }
.builder-app .b-seg button.on {
  background: var(--b-brand); color: var(--accent-ink);
  box-shadow: 0 2px 8px rgba(168,69,47,.22);
}
.builder-app .b-seg button[data-gender="male"].on { background: #2F4A6B; color: #fff; box-shadow: 0 2px 8px rgba(47,74,107,.24); }
.builder-app .b-seg button[data-gender="female"].on { background: #9B3B6A; color: #fff; box-shadow: 0 2px 8px rgba(155,59,106,.24); }

/* 手围输入面板（点手围胶囊展开） */
.builder-app .b-wrist-panel {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: var(--b-r-sm);
  padding: 10px 13px;
}
.builder-app .b-wrist-panel.show { display: flex; }
.builder-app .b-wrist-panel label { font-size: 12.5px; color: var(--b-muted); }
.builder-app .b-wrist-panel input {
  width: 84px; padding: 7px 10px; border: 1px solid var(--b-line); border-radius: var(--b-r-xs);
  font-size: 15px; font-weight: 700; color: var(--b-ink); text-align: center; font-family: inherit;
}
.builder-app .b-wrist-panel .b-hint { font-size: 12.5px; color: var(--b-ok); font-weight: 600; }

/* ---------------- ② 圆环画布 ---------------- */
.builder-app .b-canvas-wrap {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #FBFAF7 55%, #F3F1EC 100%);
  border: 1px solid var(--b-line); border-radius: var(--b-r);
  padding: 12px 12px 4px; display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--b-shadow);
}
.builder-app svg.b-canvas { width: 100%; max-width: 560px; height: auto; touch-action: none; display: block; }
.builder-app .b-bead-node { cursor: pointer; }
.builder-app .b-bead-node:hover { filter: brightness(1.05); }
.builder-app .b-selinfo {
  font-size: 12px; color: var(--b-muted); min-height: 18px; text-align: center;
  padding: 0 8px 8px;
}
.builder-app .b-dropzone {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  border: 2px dashed var(--b-danger); color: var(--b-danger); border-radius: var(--b-pill);
  padding: 6px 18px; font-size: 12px; font-weight: 600; z-index: 7;
  background: rgba(255,255,255,.94); opacity: 0; transition: .15s; pointer-events: none;
}
.builder-app .b-dropzone.show { opacity: 1; }
.builder-app .b-mini-preview {
  position: absolute; top: 10px; right: 10px; width: 72px;
  background: rgba(255,255,255,.92); border: 1px solid var(--b-line); border-radius: var(--b-r-sm);
  padding: 5px; text-align: center; z-index: 6;
}
.builder-app .b-mini-preview svg { width: 100%; height: auto; display: block; }
.builder-app .b-mini-preview .b-cap { font-size: 9.5px; color: var(--b-muted); margin-top: 2px; }
.builder-app .b-mini-preview.b-hide { display: none; }
.builder-app .b-ghost {
  position: fixed; width: 38px; height: 38px; border-radius: 50%; pointer-events: none; z-index: 99;
  box-shadow: 0 6px 16px rgba(0,0,0,.28); opacity: .92; background-size: cover; background-position: center;
}
.builder-app .b-flyball, .builder-app .b-fly-canvas {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 99;
  box-shadow: 0 8px 20px rgba(0,0,0,.26); background-size: cover; background-position: center;
  transition: left .6s cubic-bezier(.3,.7,.3,1), top .6s cubic-bezier(.3,.7,.3,1),
              width .6s ease, height .6s ease, opacity .4s ease .5s;
}
.builder-app .b-justadded { animation: b-pop .6s cubic-bezier(.2,1.35,.4,1) both; transform-box: fill-box; transform-origin: center; }
@keyframes b-pop { 0% { transform: scale(.1); opacity: 0 } 55% { transform: scale(1.16) } 100% { transform: scale(1); opacity: 1 } }

/* ---------------- ③ 四动作条 ---------------- */
.builder-app .b-actbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.builder-app .b-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: var(--b-r-sm);
  padding: 10px 4px; font-size: 12px; font-weight: 600; color: var(--b-ink);
  cursor: pointer; font-family: inherit; transition: .16s;
}
.builder-app .b-act i { font-size: 16px; font-style: normal; line-height: 1; }
.builder-app .b-act:hover { border-color: var(--b-brand); color: var(--b-brand); }
.builder-app .b-act.b-main {
  background: var(--b-grad); border-color: transparent; color: var(--accent-ink); font-weight: 800;
  box-shadow: 0 8px 20px rgba(138,106,47,.26);
}
.builder-app .b-act.b-danger { color: var(--b-danger); }
.builder-app .b-act.b-danger:hover { border-color: var(--b-danger); background: rgba(168,69,47,.05); color: var(--b-danger); }

/* 次级工具：横滑小胶囊 */
.builder-app .b-tools { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.builder-app .b-tools::-webkit-scrollbar { display: none; }
.builder-app .b-tools button {
  flex: none; padding: 7px 12px; border: 1px solid var(--b-line); background: var(--b-card);
  border-radius: var(--b-pill); font-size: 12px; color: var(--b-muted); cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.builder-app .b-tools button:hover { border-color: var(--b-brand); color: var(--b-brand); }
.builder-app .b-tools button[disabled] { opacity: .4; cursor: not-allowed; }

/* 选中珠编辑行 */
.builder-app .b-editbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: var(--b-r-sm);
  padding: 9px 12px; font-size: 12px; color: var(--b-muted);
}
.builder-app .b-editbar select {
  padding: 5px 8px; border: 1px solid var(--b-line); border-radius: var(--b-r-xs);
  font-size: 12.5px; background: var(--b-card); color: var(--b-ink); font-family: inherit;
}
.builder-app .b-editbar .b-replace-hint { flex-basis: 100%; line-height: 1.5; }

/* ---------------- ④ 底部抽屉 ---------------- */
.builder-app .b-sheet {
  background: var(--b-card); border: 1px solid var(--b-line);
  border-radius: var(--b-r) var(--b-r) 0 0;
  box-shadow: 0 -2px 14px rgba(31,27,22,.06);
  display: flex; flex-direction: column; overflow: hidden;
  height: min(58vh, 520px);
}
/* 滚动穿透防护（移动端）—— 抽屉里的分类栏 / 素材格 / 材料清单滚到底时，
   手指继续拖会把**整页**带着滚（iOS 的滚动链继承）。contain 把滚动关在容器内。
   底部抽屉是手机上最主要的交互区，这一条直接决定「滚得顺不顺」。 */
.builder-app .b-sheet,
.builder-app .b-rail,
.builder-app .b-bead-list,
.builder-app .b-used-list,
.builder-app .b-box { overscroll-behavior: contain; }
.builder-app .b-sheet-handle {
  width: 40px; height: 4px; border-radius: var(--b-pill); background: var(--b-line-2);
  margin: 8px auto 6px; flex: none;
}
.builder-app .b-sheet-head {
  display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; flex: none;
}
.builder-app .b-tabs { display: flex; gap: 6px; flex: none; }
.builder-app .b-tabs button {
  padding: 7px 14px; border: none; background: var(--b-soft); border-radius: var(--b-pill);
  font-size: 13px; font-weight: 700; color: var(--b-muted); cursor: pointer; font-family: inherit;
}
.builder-app .b-tabs button.active { background: var(--b-ink); color: #fff; }
.builder-app .b-search {
  margin-left: auto; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: var(--b-soft); border-radius: var(--b-pill); padding: 6px 12px;
}
.builder-app .b-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 12.5px; color: var(--b-ink); font-family: inherit;
}
.builder-app .b-search input::placeholder { color: var(--b-muted); }
.builder-app .b-search .b-cnt { font-size: 11.5px; color: var(--b-muted); flex: none; }
/* 旧的 select 筛选：保留在 DOM 里（脚本依赖），但视觉上交给左侧分类栏 */
.builder-app .b-filters { display: none; }

.builder-app .b-sheet-body { display: flex; min-height: 0; flex: 1; border-top: 1px solid var(--b-line); }
.builder-app .b-rail {
  flex: none; width: 84px; background: var(--b-soft); overflow-y: auto;
  padding: 6px 0; scrollbar-width: none;
}
.builder-app .b-rail::-webkit-scrollbar { display: none; }
.builder-app .b-rail button {
  display: block; width: 100%; text-align: left; padding: 11px 10px; border: none;
  background: transparent; font-size: 12.5px; color: var(--b-muted); cursor: pointer;
  font-family: inherit; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.builder-app .b-rail button.on { background: var(--b-card); color: var(--b-ink); font-weight: 800; }
.builder-app .b-rail button.on::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; background: var(--b-brand); border-radius: 0 3px 3px 0;
}
.builder-app .b-rail .b-rail-sep { height: 1px; background: var(--b-line); margin: 6px 10px; }

.builder-app .b-bead-list {
  flex: 1; min-width: 0; overflow-y: auto; padding: 10px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start;
}
.builder-app .b-bead-list::-webkit-scrollbar { width: 6px; }
.builder-app .b-bead-list::-webkit-scrollbar-thumb { background: var(--b-line-2); border-radius: 3px; }
.builder-app .b-bead-card {
  position: relative; cursor: pointer; background: var(--b-card);
  border: 1px solid var(--b-line); border-radius: var(--b-r-sm); padding: 7px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: .16s;
}
.builder-app .b-bead-card:hover { border-color: var(--b-brand); box-shadow: 0 6px 16px rgba(31,27,22,.07); }
.builder-app .b-bead-card .b-photo {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--b-r-xs); overflow: hidden;
  background: #F7F5F1; display: flex; align-items: center; justify-content: center; flex: none;
}
.builder-app .b-bead-card .b-photo img {
  width: 84%; height: 84%; object-fit: contain; border-radius: 50%; display: block;
}
.builder-app .b-bead-card .b-nm {
  font-size: 12px; font-weight: 700; color: var(--b-ink); text-align: center; line-height: 1.3;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.builder-app .b-bead-card .b-pr { font-size: 11px; color: var(--b-muted); white-space: nowrap; }
.builder-app .b-bead-card .b-pr b { color: var(--b-brand); font-weight: 800; }
.builder-app .b-bead-card .b-add { display: none; }
.builder-app .b-bead-card .b-info {
  position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; line-height: 17px;
  text-align: center; border-radius: 50%; background: rgba(255,255,255,.94);
  border: 1px solid var(--b-line); color: var(--b-muted); font-size: 11px; font-weight: 800;
  cursor: pointer; padding: 0; font-family: inherit;
}
.builder-app .b-bead-card .b-info:hover { background: var(--b-brand); color: var(--accent-ink); border-color: var(--b-brand); }
.builder-app .b-bead-card .b-x {
  position: absolute; top: 5px; left: 5px; font-size: 10px; font-weight: 800;
  background: var(--b-brand); color: var(--accent-ink); border-radius: var(--b-pill); padding: 1px 6px;
}
.builder-app .b-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--b-muted); padding: 24px 8px; text-align: center; line-height: 1.6; }

/* 材料清单（在设计详情页里） */
.builder-app .b-used-list { max-height: 40vh; overflow-y: auto; }
.builder-app .b-used-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--b-line); }
.builder-app .b-used-row:last-child { border-bottom: none; }
.builder-app .b-used-row .b-thumb {
  width: 44px; height: 44px; flex: none; border-radius: var(--b-r-xs); overflow: hidden;
  background: #F7F5F1; display: flex; align-items: center; justify-content: center;
}
.builder-app .b-used-row .b-thumb img { width: 88%; height: 88%; object-fit: contain; border-radius: 50%; }
.builder-app .b-used-row .b-meta { flex: 1; min-width: 0; line-height: 1.45; }
.builder-app .b-used-row .b-nm { font-size: 13px; font-weight: 700; color: var(--b-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builder-app .b-used-row .b-sub { color: var(--b-muted); font-size: 11.5px; margin-top: 1px; }
.builder-app .b-used-row .b-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.builder-app .b-used-row .b-amt { font-weight: 800; color: var(--b-ink); font-size: 13.5px; }
.builder-app .b-stepper { display: flex; align-items: center; border: 1px solid var(--b-line); border-radius: var(--b-pill); overflow: hidden; }
.builder-app .b-stepper button {
  width: 26px; height: 24px; border: none; background: var(--b-card); color: var(--b-brand);
  font-size: 15px; font-weight: 800; cursor: pointer; line-height: 1; font-family: inherit;
}
.builder-app .b-stepper button:hover { background: var(--b-brand); color: var(--accent-ink); }
.builder-app .b-stepper span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 700; color: var(--b-ink); }

.builder-app .b-wishlist { font-size: 12px; color: var(--b-muted); margin-top: 8px; }
.builder-app .b-wishlist .b-w {
  display: inline-block; background: var(--b-soft); border-radius: var(--b-pill);
  padding: 3px 10px; margin: 4px 5px 0 0;
}

/* ---------------- 弹窗 / 全屏页 ---------------- */
.builder-app .b-modal {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: flex-end; justify-content: center;
  background: rgba(31,27,22,.44); backdrop-filter: blur(2px);
}
.builder-app .b-modal.show { display: flex; }
.builder-app .b-box {
  background: var(--b-card); border-radius: var(--b-r) var(--b-r) 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-height: 92vh; overflow-y: auto; position: relative;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18);
}
.builder-app .b-box h4 { margin: 0 0 12px; font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--b-ink); }
.builder-app .b-close {
  position: absolute; top: 12px; right: 14px; cursor: pointer; color: var(--b-muted);
  font-size: 22px; line-height: 1; width: 30px; height: 30px; text-align: center;
  border-radius: 50%; background: var(--b-soft);
}
.builder-app .b-close:hover { color: var(--b-ink); }
.builder-app .b-row {
  display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0;
  border-bottom: 1px solid var(--b-line);
}
.builder-app .b-row b { color: var(--b-ink); }
.builder-app .b-co-form { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.builder-app .b-co-form input {
  padding: 11px 13px; border: 1px solid var(--b-line); border-radius: var(--b-r-xs);
  font-size: 14px; background: var(--b-soft); font-family: inherit; color: var(--b-ink);
}
.builder-app .b-co-form input:focus { outline: none; border-color: var(--b-brand); background: var(--b-card); }
.builder-app .b-co-2 { display: flex; gap: 8px; }
.builder-app .b-co-2 input { flex: 1; min-width: 0; }
.builder-app .b-mactions { display: flex; gap: 9px; margin-top: 14px; }
.builder-app .b-mactions button {
  flex: 1; padding: 13px; border-radius: var(--b-r-sm); border: none; cursor: pointer;
  font-size: 14.5px; font-weight: 800; font-family: inherit;
}
.builder-app .b-mactions .b-go { background: var(--b-grad); color: var(--accent-ink); }
.builder-app .b-mactions .b-no { background: var(--b-soft); color: var(--b-ink); }
.builder-app .b-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 200;
  background: rgba(31,27,22,.9); color: #fff; padding: 10px 18px; border-radius: var(--b-pill);
  font-size: 13px; opacity: 0; transition: .25s; max-width: 86vw; text-align: center;
  pointer-events: none;
}
.builder-app .b-toast.show { opacity: 1; }

/* 加载遮罩（对标对手的「正在加载设计器」） */
.builder-app .b-load {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(245,244,241,.86); backdrop-filter: blur(8px); transition: opacity .3s;
}
.builder-app .b-load.hide { opacity: 0; pointer-events: none; }
.builder-app .b-load .b-load-box {
  width: 78%; max-width: 330px; background: #fff; border-radius: var(--b-r);
  padding: 20px 18px; box-shadow: 0 18px 44px rgba(31,27,22,.14); text-align: center;
}
.builder-app .b-load .b-lt { font-size: 16px; font-weight: 800; color: var(--b-ink); }
.builder-app .b-load .b-ls { font-size: 12px; color: var(--b-muted); margin-top: 5px; }
.builder-app .b-load .b-lbar { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.builder-app .b-load .b-lbar .b-lt2 { font-size: 11.5px; color: var(--b-muted); white-space: nowrap; }
.builder-app .b-load .b-ltrack { flex: 1; height: 5px; border-radius: var(--b-pill); background: var(--b-line); overflow: hidden; }
.builder-app .b-load .b-lfill { height: 100%; width: 8%; border-radius: var(--b-pill); background: var(--b-grad); transition: width .3s; }

/* 手围过小提示（对标对手的黑白双按钮弹窗） */
.builder-app .b-warn { align-items: center; }
.builder-app .b-warn .b-box {
  border-radius: var(--b-r); max-width: 330px; width: 84%; text-align: center;
  padding: 22px 18px 18px;
}
.builder-app .b-warn .b-wn { font-size: 17px; font-weight: 800; color: var(--b-ink); }
.builder-app .b-warn .b-wd { font-size: 13px; color: var(--b-muted); margin-top: 8px; line-height: 1.6; }
.builder-app .b-warn .b-mactions { margin-top: 18px; }
.builder-app .b-warn .b-mactions .b-no { background: var(--b-card); border: 1px solid var(--b-line); }
.builder-app .b-warn .b-mactions .b-go { background: var(--b-ink); color: #fff; }

/* 设计详情（全屏，对标对手的「设计详情」页） */
.builder-app .b-full { align-items: stretch; padding: 0; }
.builder-app .b-full .b-box {
  border-radius: 0; max-width: none; height: 100%; max-height: none;
  /* 底部预留要跟着安全区一起长，否则 iPhone 上固定底栏会盖住最后一屏内容 */
  padding: 0 0 calc(84px + env(safe-area-inset-bottom, 0px)); background: var(--b-bg);
}
.builder-app .b-dt-top {
  position: sticky; top: 0; z-index: 5; background: var(--b-card);
  display: flex; align-items: center; justify-content: center;
  /* 全屏详情页铺满整屏（含状态栏区），顶栏不补安全区会被灵动岛压住 */
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  border-bottom: 1px solid var(--b-line);
}
.builder-app .b-dt-top h4 { margin: 0; font-size: 15.5px; }
.builder-app .b-dt-top .b-back {
  position: absolute; left: 10px; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--b-soft); color: var(--b-ink); font-size: 20px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.builder-app .b-dt-body { padding: 12px; }
.builder-app .b-dt-pills { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.builder-app .b-dt-pills button {
  flex: 1; padding: 9px 6px; border-radius: var(--b-pill); border: 1px solid var(--b-line-2);
  background: var(--b-card); color: var(--b-ink); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.builder-app .b-dt-pills button:hover { border-color: var(--b-brand); color: var(--b-brand); }
.builder-app .b-dt-card {
  background: var(--b-card); border-radius: var(--b-r); padding: 14px; border: 1px solid var(--b-line);
}
.builder-app .b-dt-card .b-dt-nm { font-size: 16px; font-weight: 800; color: var(--b-ink); }
.builder-app .b-dt-card .b-dt-line { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--b-muted); }
.builder-app .b-dt-card .b-dt-line b { font-size: 22px; font-weight: 800; color: var(--b-ink); }
.builder-app .b-dt-card .b-dt-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--b-muted); }
.builder-app .b-dt-card .b-dt-meta .b-dt-check {
  border: 1px solid var(--b-brand); color: var(--b-brand); background: var(--b-card);
  border-radius: var(--b-pill); padding: 5px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.builder-app .b-dt-sec { margin-top: 12px; background: var(--b-card); border: 1px solid var(--b-line); border-radius: var(--b-r); padding: 13px 14px; }
.builder-app .b-dt-sec h5 { margin: 0 0 6px; font-family: var(--sans); font-size: 13.5px; font-weight: 800; color: var(--b-ink); }
.builder-app .b-dt-coupon {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: #FBF3E4; border: 1px solid #F0E1C6; border-radius: var(--b-r); padding: 12px 13px;
}
.builder-app .b-dt-coupon .b-cp-badge {
  flex: none; width: 34px; height: 34px; border-radius: var(--b-r-xs); background: var(--b-grad);
  color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.builder-app .b-dt-coupon .b-cp-b { font-size: 13px; font-weight: 700; color: var(--b-ink); }
.builder-app .b-dt-coupon .b-cp-s { font-size: 11.5px; color: var(--b-muted); margin-top: 3px; }
.builder-app .b-dt-coupon .b-cp-go { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--b-brand); white-space: nowrap; }
.builder-app .b-dt-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--b-line);
  backdrop-filter: blur(10px);
}
.builder-app .b-dt-bar .b-dt-cs {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 10.5px; color: var(--b-muted); cursor: pointer; padding: 0 6px;
}
.builder-app .b-dt-bar .b-dt-cs i { font-size: 17px; font-style: normal; }
.builder-app .b-dt-bar .b-dt-keep {
  flex: 1; padding: 12px; border-radius: var(--b-r-sm); border: 1px solid var(--b-line-2);
  background: var(--b-card); color: var(--b-ink); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.builder-app .b-dt-bar .b-dt-order {
  flex: 1.2; padding: 12px; border-radius: var(--b-r-sm); border: none;
  background: var(--b-grad); color: var(--accent-ink); font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: inherit; box-shadow: 0 8px 18px rgba(138,106,47,.24);
}

/* ---------------- 材料详情弹窗 ---------------- */
.builder-app .b-box.b-box-detail { max-width: 620px; }
.builder-app .b-detail { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 18px; align-items: start; }
.builder-app .b-d-photo {
  width: 100%; aspect-ratio: 1/1; border-radius: var(--b-r-sm); overflow: hidden;
  background: #F7F5F1; display: flex; align-items: center; justify-content: center;
}
.builder-app .b-d-photo img { width: 86%; height: 86%; object-fit: contain; border-radius: 50%; }
.builder-app .b-d-name { font-size: 19px; font-weight: 800; color: var(--b-ink); line-height: 1.25; }
.builder-app .b-d-price { font-size: 18px; font-weight: 800; color: var(--b-brand); margin: 5px 0 12px; }
.builder-app .b-d-price small { font-size: 12px; color: var(--b-muted); font-weight: 500; }
.builder-app .b-d-fields { border-top: 1px solid var(--b-line); margin-bottom: 12px; }
.builder-app .b-d-f { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--b-line); font-size: 13px; }
.builder-app .b-d-f span { color: var(--b-muted); }
.builder-app .b-d-f b { color: var(--b-ink); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.builder-app .b-d-sw { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); display: inline-block; }
.builder-app .b-d-pick { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 13px; flex-wrap: wrap; }
.builder-app .b-d-pick > span { color: var(--b-muted); min-width: 40px; }
.builder-app .b-d-pick .b-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.builder-app .b-d-pick .b-chip {
  padding: 6px 14px; border: 1px solid var(--b-line); border-radius: var(--b-pill);
  background: var(--b-card); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--b-ink);
  font-family: inherit;
}
.builder-app .b-d-pick .b-chip.on { background: var(--b-brand); color: var(--accent-ink); border-color: var(--b-brand); }
.builder-app .b-d-desc {
  font-size: 12.5px; line-height: 1.7; color: var(--b-muted); background: var(--b-soft);
  border-radius: var(--b-r-sm); padding: 11px 13px; margin-bottom: 12px;
}
.builder-app .b-d-add {
  width: 100%; padding: 13px; border: none; border-radius: var(--b-r-sm); cursor: pointer;
  font-size: 15px; font-weight: 800; background: var(--b-grad); color: var(--accent-ink);
  font-family: inherit; box-shadow: 0 8px 18px rgba(138,106,47,.24);
}

/* ---------------- 设计广场 ---------------- */
.builder-app .b-plaza-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 60vh; overflow: auto; }
.builder-app .b-plaza-card { border: 1px solid var(--b-line); border-radius: var(--b-r-sm); padding: 9px; text-align: center; background: var(--b-card); }
.builder-app .b-plaza-card svg { width: 100%; height: auto; }
.builder-app .b-plaza-card .b-pt { font-size: 13px; font-weight: 700; margin-top: 5px; color: var(--b-ink); }
.builder-app .b-plaza-card .b-pa { font-size: 11.5px; color: var(--b-muted); margin-top: 2px; }
.builder-app .b-plaza-card .b-like { font-size: 11.5px; color: var(--b-brand2); margin-top: 3px; }
.builder-app .b-plaza-card .b-pbtn {
  margin-top: 7px; font-size: 12.5px; padding: 6px 15px; border: 1px solid var(--b-brand);
  color: var(--b-brand); border-radius: var(--b-pill); background: var(--b-card); cursor: pointer;
  font-weight: 700; font-family: inherit;
}
.builder-app .b-plaza-card .b-pbtn:hover { background: var(--b-brand); color: var(--accent-ink); }

/* ============================================================
   桌面端（≥901px）：一屏工作台
   ------------------------------------------------------------
   用户反馈（2026-09-17）：「电脑端的预览窗口和选珠窗口需要固定在同一屏幕里，
   不要切屏幕了，并且固定住同一高度」。
   上一版是「画布在左 + 抽屉 sticky 在右」，问题有三个：
     · 抽屉 sticky 只是「跟着滚」，抽屉底部的格子仍然在首屏之外 —— 等于要滚；
     · 左右不是同一行，高度天然不等（左边画布 + 动作 + 工具叠出来）；
     · 整页还要上下滚，滚了就看不到另一半。

   现在改成：整节正好一屏高（见文末 .section-hero），里面三行网格 ——
     状态行 / 「画布 | 抽屉」（同一行 ⇒ **天然等高**） / 动作工具束（横跨整行）。
   两侧各自内部滚动，不再有「切屏幕」。 */
@media (min-width: 901px) {
  .builder-app .b-app {
    position: relative;                       /* 手围面板浮层的定位基准 */
    display: grid; grid-template-columns: minmax(0,1fr) 460px;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "status status"
      "config config"
      "canvas sheet"
      "foot   foot";
    gap: 12px 18px; align-items: stretch; padding: 0;
    flex: 1 1 auto; min-height: 0;
  }
  .builder-app .b-statusbar { grid-area: status; }
  .builder-app .b-config { grid-area: config; }
  .builder-app .b-canvas-wrap { grid-area: canvas; min-height: 0; }
  .builder-app .b-sheet {
    grid-area: sheet; height: auto; min-height: 0;
    border-radius: var(--b-r); position: static;
  }
  .builder-app .b-foot { grid-area: foot; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .builder-app .b-foot .b-actbar { flex: 0 0 auto; grid-template-columns: repeat(4, minmax(92px, 1fr)); }
  .builder-app .b-foot .b-tools { flex: 1 1 320px; flex-wrap: wrap; overflow: visible; }
  .builder-app .b-foot .b-editbar { flex: 1 1 100%; }
  /* 手围输入面板：绝对定位浮在画布上方。
     为什么不用 grid 单占一行 —— 空行也会吃掉 12px 行距，
     关掉面板时那条缝看着像「莫名多了条空隙」。 */
  .builder-app .b-wrist-panel {
    position: absolute; top: 46px; left: 0; z-index: 30;
    box-shadow: 0 10px 30px rgba(31,27,22,.12); min-width: 320px;
  }
  /* 画布撑满行高（同一行里抽屉也这么高 ⇒ 两边天然等高）。
     width:100% + flex:1 会让 SVG 的绘制区被 preserveAspectRatio 居中缩放，
     圆环自动落在卡片正中，不会再出现「上面一大片空、圆环缩在中间」。 */
  .builder-app svg.b-canvas { flex: 1 1 0; min-height: 0; width: 100%; max-width: none; }
  .builder-app .b-bead-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .builder-app .b-modal { align-items: center; }
  .builder-app .b-box { border-radius: var(--b-r); max-width: 560px; padding: 22px 20px; }
  .builder-app .b-full .b-box { border-radius: 0; max-width: none; }
  /* 桌面端：这一节是客户的 DIY 工作台，不是营销 hero（2026-09-18 Frank 反馈）。
     目标两条要同时成立：「饱满到整个屏幕」+「不切屏（不带裁内容）」。

     ⚠️ 三条都是踩过坑写下的，别只改其中一条：
       ① 必须有**确定高度** height: 100dvh − 页头。
          只写 min-height 会翻车：网格行的 1fr 在「高度不确定」的容器里会退化成
          max-content，而右栏珠格的自然高度是 20 颗 × 7 行 ≈ 1300px，
          于是整节被撑到 1739px（实测 2026-09-18，工作台变成一条竖井）。
          有了确定高度，1fr 才会解析成「剩余空间」，珠格才会真正在容器内部滚动。
       ② min-height: 620px 是**地板**，不是主角。
          矮窗口（如 1280×620，浏览器只剩 544px）下 ① 会被压到不可用，
          这时由地板接管：宁可整页多滚几十像素，也保住一个能干活的工作台。
       ③ 不写 overflow: hidden。
          旧版 height + overflow:hidden 在矮窗口下会把抽屉底部与分类栏整块裁掉 —— 那才是「切屏」。
          现在溢出是 visible，最坏情况是页面多滚一点，内容一个都不少。
       ④ 画布行 minmax(300px, 1fr)：行高充裕时吃掉全部剩余空间（画布撑满 = 饱满），
          不够时它最后被压，但绝不塌成一条缝（旧版实测被压到 59px）。 */
  /* 选择器写成 #builder.section-hero（而不是 .section-hero）：本文件下面还有一条
     `.section-hero { min-height: 100dvh − 页头 }`，同特异性时「后写的赢」会把
     620px 地板吃掉。用 id 提权重，才能保证地板在任何源序下都生效。 */
  #builder.section-hero {
    height: calc(100dvh - var(--header-h));
    min-height: 620px;      /* 矮窗口地板 */
    overflow: visible;      /* 不裁内容 */
  }
  .builder-app .b-app { grid-template-rows: auto auto minmax(300px, 1fr) auto; }
}

/* 矮窗口友好（1366×768 笔记本 / 分屏半高 / 带书签栏的浏览器）。
   不切屏的第一手段是「让它真的装得下」：把固定开销压下来，剩余空间全给画布，
   于是画布 + 珠格仍然满满一屏，而不是靠裁切换来的假一屏。 */
@media (min-width: 901px) and (max-height: 820px) {
  .section-hero { padding-top: var(--s-1); }
  .builder-app .b-app { gap: 8px 14px; grid-template-rows: auto auto minmax(240px, 1fr) auto; }
  .builder-app .b-config { padding: 7px 12px; }
  .builder-app .b-act { padding: 8px 4px; }
  .builder-app .b-tools button { padding: 5px 10px; }
  .builder-app .b-editbar { padding: 7px 12px; }
}
@media (min-width: 1280px) {
  .builder-app .b-app { grid-template-columns: minmax(0,1fr) 520px; }
  .builder-app .b-bead-list { padding: 12px; gap: 10px; }
  .builder-app .b-bead-card .b-nm { font-size: 12.5px; }
}

/* ============================================================
   一屏舞台：让「预览」与「选珠」永远同屏
   ------------------------------------------------------------
   用户两条反馈都指向同一件事 —— 预览和选珠被拆到了两屏：
     · 电脑端：预览窗口和选珠窗口要固定在同一屏幕里、同一高度，不要切屏幕；
     · 手机端：选珠子的时候要能看到预览全景，不要滑上滑下。

   做法：把 #builder 这一节做成「正好一屏高」的容器，再用 flex 把高度
   一级级传下去（section → .wrap → .builder-app → .b-app），
   最后由两端各自的媒体查询决定「画布怎么摆、抽屉怎么摆」。

   ⚠️ 高度单位用 dvh（前面写一条 vh 兜底）：手机浏览器的地址栏/工具栏会占掉
   100vh 的一部分，只写 vh 会让底部抽屉被工具栏压住 —— 那正是「要滑一下才看得全」
   的来源之一。旧版 iOS 不认识 dvh 时会落到前一条 vh，不会失效。
   ⚠️ 用 min-height 而不是 height：内容实在放不下时允许它长高，
   宁可多滚一屏，也不要把画布压成一条缝。
   ⚠️ 2026-09-18 补充（Frank 反馈「别当 hero 钉死」）：本节只允许用 min-height 撑满一屏，
   **任何地方都不许再对 .section-hero / .section-hero .wrap 写 height 或 overflow:hidden**
   —— 那会把「一屏工作台」变成「裁掉一半的工作台」。要调整疏密请走下面的矮窗口媒体查询。
   ============================================================ */
.section-hero {
  display: flex; flex-direction: column; box-sizing: border-box;
  min-height: calc(100vh - var(--header-h));      /* 兜底 */
  min-height: calc(100dvh - var(--header-h));
}
.section-hero .wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.section-hero .hero-head { flex: none; }
.section-hero .builder-app { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* ---------------- 手机 / 平板（≤900px）----------------
   竖排：状态条 → 画布（钉子，可伸缩，但不低于 200px）→ 四动作 → 抽屉 → 工具 → 编辑。
   工具和编辑行**排在抽屉之后**：它们是低频操作，让位给「画布 + 抽屉」这对主角，
   这样第一屏永远是「上面圆环、下面格子」，挑珠子时不用上下找预览。
   顺序靠 order 排，不靠改 DOM —— 同一份 DOM 两端共用，DOM 一改两端都要跟着改。 */
@media (max-width: 900px) {
  .builder-app .b-app { gap: 8px; padding: 0; }
  .builder-app .b-foot { display: contents; }   /* 拆开，好让三行各排各的序 */
  .builder-app .b-statusbar { order: 1; }
  .builder-app .b-config { order: 2; }
  .builder-app .b-wrist-panel { order: 3; }
  .builder-app .b-canvas-wrap { order: 4; flex: 1 1 auto; min-height: 200px; }
  .builder-app .b-actbar { order: 5; }
  .builder-app .b-sheet {
    order: 6; flex: 0 0 auto; height: var(--b-sheet-h, 40vh);
    height: var(--b-sheet-h, 40dvh);
  }
  .builder-app .b-tools { order: 7; flex-wrap: wrap; overflow-x: visible; }
  .builder-app .b-editbar { order: 8; }
  /* 画布在固定高度里要「撑满可用空间」而不是按宽度撑高（否则圆环会被挤出去） */
  .builder-app svg.b-canvas { flex: 1 1 0; min-height: 0; width: 100%; max-width: none; }
  /* 抽屉手柄：拖拽改高的抓手，得给够触摸面积，并且禁止「拖动=滚页面」 */
  .builder-app .b-sheet-handle {
    width: 54px; height: 5px; margin: 9px auto 5px;
    touch-action: none; cursor: ns-resize;
  }
  /* 三列格子在小屏上会被「名字不换行」顶宽 → 必须 minmax(0,1fr)，
     否则第 3 列会跑到屏幕外，用户得左右滑才看得见（实测 390 视口就是如此）。 */
  .builder-app .b-bead-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .builder-app .b-rail { width: 76px; }
  .builder-app .b-rail button { padding: 11px 8px; font-size: 12px; }
  .builder-app .b-bead-card .b-nm {
    white-space: normal; font-size: 11.5px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}
@media (max-width: 380px) {
  .builder-app .b-rail { width: 68px; }
  .builder-app .b-bead-card .b-nm { font-size: 11px; }
}

/* ============================================================
   Custom 页其它区块（三元素 / 三步骤 / 咨询表单）—— 顺带 App 化
   ============================================================ */
.section-hero { padding-top: var(--s-3); }
.section-hero .wrap { max-width: 1560px; width: 100%; margin: 0 auto; }
.hero-head { max-width: 780px; margin: 0 auto 16px; text-align: center; }
.hero-head .cn-accent { justify-content: center; }
.hero-head h1 { font-size: 30px; line-height: 1.15; margin: var(--s-1) 0; font-family: var(--serif); font-weight: 700; color: var(--ink); }
.hero-head .lead { font-size: 15px; color: var(--ink-soft); margin: 0 auto; max-width: 620px; }
.value-grid.three-up { grid-template-columns: repeat(3, 1fr); }
.ritual-steps.three-up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .value-grid.three-up, .ritual-steps.three-up { grid-template-columns: 1fr; }
  .hero-head h1 { font-size: 23px; }
  .builder-app { font-size: 14.5px; }
}
@keyframes b-fade-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }