/* ===== LUMORA 定制工坊（复刻 bracelet studio） ===== */

/* antd 风格组件基座 */
.lm-btn-ant {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 4px 15px; font-size: 13px; border-radius: 3px; cursor: pointer;
  border: 1px solid #d9dcd9; background: #fff; color: #37433c; transition: all .2s;
  white-space: nowrap; font-family: inherit;
}
.lm-btn-ant:hover { border-color: #17211c; color: #17211c; }
.lm-btn-ant.primary { background: #17211c; border-color: #17211c; color: #fff !important; }
.lm-btn-ant.primary:hover { background: #2a3a31; }
.lm-btn-ant:disabled { cursor: not-allowed; color: #b7bdb9; border-color: #e3e6e3; background: #f7f8f7; }
.lm-btn-ant.block { width: 100%; }
.lm-btn-ant.danger-active { border-color: #984e42; color: #984e42; }
.lm-btn-ant .icon { width: 14px; height: 14px; display: inline-grid; }
.lm-btn-ant .icon svg { width: 14px; height: 14px; }

.cz-input {
  width: 100%; height: 32px; padding: 4px 11px; font-size: 13px; color: #37433c;
  border: 1px solid #d9dcd9; border-radius: 3px; background: #fff; font-family: inherit;
}
.cz-input:focus { outline: none; border-color: #17211c; }
.cz-search { position: relative; }
.cz-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #9aa39d; pointer-events: none; }
.cz-search .cz-input { padding-left: 32px; }
.cz-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid #d9dcd9; border-radius: 3px; overflow: hidden; }
.cz-seg button { height: 32px; border: 0; background: #fff; font-size: 12.5px; color: #526058; cursor: pointer; font-family: inherit; }
.cz-seg button.active { background: #17211c; color: #fff; }

.cz-slider { position: relative; height: 22px; display: flex; align-items: center; }
.cz-slider .rail { position: absolute; left: 0; right: 0; height: 3px; background: #e3e6e3; border-radius: 2px; }
.cz-slider .track { position: absolute; left: 0; height: 3px; background: #17211c; border-radius: 2px; }
.cz-slider input[type="range"] { position: relative; z-index: 2; width: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; height: 22px; }
.cz-slider input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #17211c; border: 3px solid #fff; box-shadow: 0 1px 4px #17211c55; cursor: pointer; }

.cz-modal-mask { position: fixed; inset: 0; z-index: 1000; background: #17211c99; display: none; align-items: center; justify-content: center; padding: 20px; }
.cz-modal-mask.open { display: flex; }
.cz-modal { width: 480px; max-width: 100%; max-height: 86vh; overflow: auto; background: #fff; border-radius: 4px; padding: 24px; }
.cz-modal .modal-close { position: absolute; right: 14px; top: 12px; border: 0; background: none; font-size: 20px; color: #7b847e; cursor: pointer; }
.cz-modal { position: relative; }
.cz-modal h2 { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 23px; }

.cz-toast { position: fixed; z-index: 1200; left: 50%; top: 76px; transform: translateX(-50%) translateY(-8px); background: #17211c; color: #fff; padding: 10px 18px; border-radius: 4px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s; box-shadow: 0 10px 26px #17211c40; }
.cz-toast.show { opacity: 1; transform: translateX(-50%); }

/* ===== 页面骨架 ===== */
.bracelet-customizer { height: auto; min-height: calc(100dvh - 112px); background: #f3f4f2; }
.bracelet-customizer .panel-actions .lm-btn-ant.primary { background: #b47745; border-color: #b47745; }
.bracelet-customizer .panel-actions .lm-btn-ant.primary:hover { background: #9b6739; }
.custom-top { height: 112px; background: #fff; border-bottom: 1px solid #dfe4e0; padding: 0 38px; display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; }
.custom-top > div > span { display: block; font-size: 11px; letter-spacing: 3px; font-weight: 600; color: #b47745; }
.custom-top h1 { font-family: "DM Serif Display", serif; font-size: 24px; font-weight: 400; letter-spacing: 0; margin: 3px 0; }
.stepper { display: flex; justify-content: center; }
.stepper button { background: none; border: 0; display: flex; align-items: center; gap: 8px; color: #909791; position: relative; padding: 0 22px; cursor: pointer; font-size: 12px; font-family: inherit; }
.stepper button:not(:last-child):after { content: ""; height: 1px; width: 30px; background: #d8deda; position: absolute; right: -15px; }
.stepper i { width: 27px; height: 27px; border: 1px solid #c8ceca; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-style: normal; }
.stepper i svg { width: 13px; }
.stepper button.active { color: #17211c; }
.stepper button.active i, .stepper button.done i { background: #17211c; color: #fff; }
.custom-price { text-align: right; }
.custom-price small { display: block; font-size: 11px; color: #7b847e; }
.custom-price b { font-family: "DM Serif Display", serif; font-size: 25px; font-weight: 400; }

.studio { min-height: 0; height: clamp(660px, calc(100dvh - 224px), 920px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(520px, .85fr); }
@media (min-width: 1500px) { .bracelet-customizer .studio { grid-template-columns: minmax(650px, 1.22fr) minmax(650px, .78fr); } }

/* 左侧预览舞台 */
.preview-stage { position: relative; padding: 22px 30px 20px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; overflow: visible;
  background-color: #e9e4d7;
  background-image: linear-gradient(#1e18122e, #1e18122e), var(--canvas-background-image, url(/vendor/lumora/img/bracelets-multi-gem.jpg));
  background-position: center; background-size: cover; }
.preview-stage > .tray-stage-shell, .preview-stage > .tray-tool-row, .preview-stage > .tray-status-line, .preview-stage > .canvas-feature-tools { position: relative; z-index: 1; }
.tray-stage-shell { width: min(100%, 650px); display: grid; place-items: center; }

/* 木盘 */
.lumora-tray-scene { position: relative; width: min(44vw, 470px); max-width: 100%; aspect-ratio: 1; isolation: isolate; }
.lumora-wood-tray { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; border-radius: 50%; touch-action: none; cursor: grab;
  background:
    radial-gradient(circle at 50% 42%, #fff5db26 0 35%, transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 0 53%, #4b260f2e 67%, #2a1409a8 100%),
    repeating-radial-gradient(ellipse at 43% 48%, #3f200c18 0 1.2px, transparent 1.5px 10px),
    repeating-conic-gradient(from 9deg at 49% 52%, #5830141f 0, #5830141f 2deg, #efc27d0c 2deg, #efc27d0c 8deg),
    radial-gradient(circle at 43% 34%, #d49b63 0, #ad6e39 46%, #73401f 76%, #462412);
  border: clamp(10px, 1.8vw, 16px) solid #21403a;
  box-shadow: inset 0 0 0 2px #d8b36a55, inset 0 0 46px #04120ea0, 0 26px 40px #10201b40, 0 4px 10px #0a1a1530; }
.lumora-wood-tray:active { cursor: grabbing; }
.lumora-wood-tray:before { content: ""; position: absolute; top: 3.4%; right: 3.4%; bottom: 3.4%; left: 3.4%; z-index: 3; border-radius: 50%; border: 3px solid #f6ce8f42; box-shadow: inset 0 8px 14px #ffdfa82e, inset 0 -18px 27px #2d170a3b; pointer-events: none; }
.lumora-wood-tray:after { content: ""; position: absolute; z-index: 60; left: 15%; right: 15%; bottom: -5%; height: 15%; border-radius: 50%; background: linear-gradient(180deg, transparent, #2e170a61); filter: blur(6px); pointer-events: none; }
.lumora-tray-well { position: absolute; z-index: 1; top: 8%; right: 8%; bottom: 8%; left: 8%; border-radius: 50%; background: radial-gradient(circle at 46% 35%, #ffdfa82a, #5b2f1614 58%, #371c0d3d); box-shadow: inset 0 12px 20px #ffe0aa21, inset 0 -20px 30px #28140938; }
.lumora-tray-bead-layer { position: absolute; z-index: 15; top: 0; right: 0; bottom: 0; left: 0; overflow: visible; border-radius: 50%; pointer-events: none; }
.lumora-tray-bead { position: absolute; left: 0; top: 0; padding: 0; border: 1px solid #ffffff78; border-radius: 50%; pointer-events: auto; cursor: grab; background:
  radial-gradient(circle at 32% 25%, #ffffffb0 0 7%, transparent 20%),
  var(--bead-image, none) var(--bead-position, center) / var(--bead-image-size, 330%) auto no-repeat,
  linear-gradient(135deg, var(--accent), var(--bead) 48%, #1116);
  box-shadow: inset calc(var(--bead-size) * .13) calc(var(--bead-size) * .12) calc(var(--bead-size) * .25) #fff7, inset calc(var(--bead-size) * -.12) calc(var(--bead-size) * -.13) calc(var(--bead-size) * .24) #1e140e48, 0 5px 8px #26170d47; will-change: transform; }
.lumora-tray-bead.stripe { background:
  radial-gradient(circle at 32% 25%, #ffffff9e 0 7%, transparent 20%),
  var(--bead-image, none) var(--bead-position, center) / var(--bead-image-size, 330%) auto no-repeat,
  repeating-linear-gradient(115deg, var(--bead) 0 8px, var(--accent) 9px 12px, var(--bead) 13px 22px); }
.lumora-tray-bead.speckle { background:
  radial-gradient(circle at 36% 38%, var(--accent) 0 2%, transparent 3%),
  radial-gradient(circle at 66% 61%, var(--accent) 0 2%, transparent 3%),
  var(--bead-image, none) var(--bead-position, center) / var(--bead-image-size, 330%) auto no-repeat,
  var(--bead); }
.lumora-tray-bead:after { content: attr(data-engraving); position: absolute; top: 18%; right: 18%; bottom: 18%; left: 18%; display: grid; place-items: center; border-radius: 50%; color: #493223; font-size: clamp(7px, calc(var(--bead-size) * .22), 12px); font-weight: 700; line-height: 1; text-shadow: 0 1px 1px #fff8; pointer-events: none; }
.lumora-tray-bead[data-engraving=""]::after { content: ""; }
.lumora-tray-bead.selected { outline: 3px solid #b47745; outline-offset: 3px; filter: saturate(1.18) brightness(1.08) drop-shadow(0 0 7px #43241294); }
.lumora-tray-bead.selected:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 50%; background: #e5ac5b55; box-shadow: inset 0 0 0 2px #fff7; pointer-events: none; }
.lumora-tray-bead.dragging { cursor: grabbing; filter: drop-shadow(0 13px 8px #2d190d61); }
.lumora-tray-bead.spawning { animation: lumora-bead-pop .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes lumora-bead-pop { 0% { transform: scale(.3); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.lumora-tray-cord { position: absolute; z-index: 10; border: var(--cord-width, 3px) solid color-mix(in srgb, var(--cord-color, #dbe4df) 75%, #3a291f); border-radius: 50%; opacity: 0; transition: opacity .28s ease; box-shadow: inset 0 0 2px #fff8, 0 1px 3px #180e0842; pointer-events: none; }
.lumora-tray-cord.visible { opacity: 1; }
.lumora-tray-empty { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-content: center; gap: 4px; color: #f2e8d8c9; text-align: center; pointer-events: none; }
.lumora-tray-empty strong { font-size: 13px; }
.lumora-tray-empty span { font-size: 10px; }
.lumora-tray-launcher { position: absolute; z-index: -1; left: 50%; bottom: -24px; transform: translate(-50%); width: 105px; height: 83px; border-radius: 48px 48px 12px 12px; background: linear-gradient(90deg, #432414, #8a512d 25%, #a66a3c 50%, #713d1f 78%, #3b2011); box-shadow: inset 0 2px 4px #ffe1af42, 0 12px 20px #341d0f3d; }
.lumora-tray-launcher:before { content: ""; position: absolute; left: 19px; right: 19px; top: 13px; height: 32px; border-radius: 50%; background: #211209; box-shadow: inset 0 6px 8px #0009, 0 1px #ffdda52e; }
.lumora-tray-launcher i { position: absolute; z-index: 2; left: 50%; top: 24px; width: 28px; height: 28px; transform: translate(-50%) scale(.4); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, #dce5e6 35%, #809195); opacity: 0; }
.lumora-tray-launcher.firing i { animation: lumora-launcher-fire .43s cubic-bezier(.16, .8, .25, 1) both; }
@keyframes lumora-launcher-fire { 0% { opacity: 0; transform: translate(-50%) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -230%) scale(1); } }
.lumora-tray-remove-zone { position: absolute; z-index: 80; left: 50%; bottom: -48px; transform: translate(-50%, 14px); padding: 8px 14px; background: #984e42; color: #fff; border-radius: 4px; font-size: 10px; opacity: 0; transition: .16s ease; pointer-events: none; }
.lumora-tray-remove-zone:before { content: "× " attr(data-label); font-size: 12px; line-height: 1; }
.lumora-tray-scene.is-removing .lumora-tray-remove-zone { opacity: 1; transform: translate(-50%); }

/* 工具条 */
.tray-tool-row { width: min(100%, 700px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 34px; padding: 8px; }
.tray-tool-row .lm-btn-ant { flex: 0 1 auto; min-width: 0; padding-inline: 12px; }
.tray-tool-row .lm-btn-ant .tray-tool-label { overflow: hidden; text-overflow: ellipsis; }
.canvas-feature-tools { display: none; }
.tray-status-line { box-sizing: border-box; width: min(100%, 650px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; margin-top: 8px; padding: 8px 14px; border-radius: 4px; background: #121d17db; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: center; }
.tray-status-line span:first-child { font-size: 13px; font-weight: 700; }
.tray-status-line span:last-child { color: #ffffffe0; }

/* 右侧面板 */
.studio-panel { display: flex; flex-direction: column; background: #fff; border-left: 1px solid #dde2de; padding: 24px 24px 84px; position: relative; overflow: hidden; }
.panel-title > span { font-size: 11px; letter-spacing: 3px; font-weight: 600; color: #d7b184; display: block; }
.panel-title h2 { font-family: "DM Serif Display", serif; font-size: 30px; font-weight: 400; margin: 5px 0; }
.panel-title p { font-size: 12px; color: #7b847e; }
.studio-panel > label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin: 28px 0 12px; color: #37433c; }
.studio-panel > label b { color: #17211c; }

/* STEP 01 绳材 */
.cord-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cord-type-grid button { display: flex; align-items: center; gap: 9px; border: 1px solid #dfe3e0; background: #fff; padding: 10px; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; font-family: inherit; }
.cord-type-grid button.active { border: 2px solid #17211c; }
.cord-type-grid button:hover { transform: translateY(-1px); }
.cord-type-grid button > i { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 3px 3px 5px #fff7, 0 0 0 1px #0001; }
.cord-type-grid button > span { display: flex; flex-direction: column; font-size: 12px; }
.cord-type-grid small { font-size: 9px; color: #7c8580; }
.cord-swatches { display: flex; gap: 11px; flex-wrap: wrap; }
.cord-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px #cbd1cd; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.cord-swatches button.active { box-shadow: 0 0 0 2px #17211c; }
.cord-swatches button:hover { transform: translateY(-1px); }

/* STEP 02 搭配 */
.pairing-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pairing-title h2 { margin-bottom: 0; }
.pairing-help { margin: 5px 0 12px; color: #7b847e; font-size: 12px; }
.pairing-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.pairing-actions .lm-btn-ant { width: 100%; min-width: 0; height: auto; min-height: 38px; padding: 7px 8px; white-space: normal; line-height: 1.25; }
.pairing-actions .tarot-action { grid-column: 1 / -1; width: min(100%, calc((100% - 16px) / 3)); }
.pairing-wrist-select { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }
.pairing-wrist-select label { margin: 0; color: #344944; font-size: 13px; }
.pairing-wrist-select label b { color: #17211c; }
.pairing-wrist-auto { font-size: 10px; color: #9a8668; }
.stone-search { margin: 15px 0; }

.stone-browser { display: grid; grid-template-columns: minmax(68px, 82px) minmax(0, 1fr); gap: 9px; min-width: 0; min-height: 330px; }
.stone-tabs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stone-tabs button { height: 40px; border: 0; background: #f2f4f1; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; color: #526058; cursor: pointer; width: 100%; font-family: inherit; }
.stone-tabs button small { font-size: 9px; color: #929a95; }
.stone-tabs button.active { background: #17211c; color: #fff; }
.stone-tabs button.active small { color: #cbd5ce; }
.stone-tabs .element-tab { height: 42px; min-height: 42px; background: #fff; border: 1px solid color-mix(in srgb, var(--element) 45%, #fff); color: var(--element); display: flex; align-items: center; justify-content: center; padding: 0; }
.stone-tabs .element-tab svg { width: 19px; height: 19px; stroke: currentColor; }
.stone-tabs .element-tab.active { background: var(--element); color: #fff; border-color: var(--element); }

.bracelet-stone-grid { align-content: start; grid-auto-rows: 140px; max-height: min(40dvh, 420px); overflow-y: auto; overflow-x: hidden; padding-right: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bracelet-stone-grid > button { height: 140px; min-height: 0; max-height: 140px; align-self: start; background: #f6f7f5; border: 1px solid transparent; padding: 12px; display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 8px; cursor: pointer; position: relative; min-width: 0; overflow: hidden; font-family: inherit; }
.bracelet-stone-grid > button:hover { border-color: #b47745; }
.bracelet-stone-grid > button > i { width: 48px; height: 48px; flex: none; align-self: center; border-radius: 50%; display: block; background:
  radial-gradient(circle at 32% 27%, #fff9 0 6%, transparent 18%),
  var(--stone-image, none) var(--stone-position, center) / var(--stone-size, 330%) auto no-repeat,
  linear-gradient(135deg, var(--accent), var(--stone) 48%, #1115);
  box-shadow: inset 4px 4px 5px #fff6, inset -3px -3px 5px #0002; }
.bracelet-stone-grid > button > span { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.bracelet-stone-grid > button b { font-size: 12px; color: #202722; overflow-wrap: anywhere; }
.bracelet-stone-grid > button small { font-size: 9px; color: #818a84; overflow-wrap: anywhere; }
.bracelet-stone-grid > button strong { font-size: 10px; color: #9b653b; }
.bracelet-stone-grid > button > em { position: absolute; right: 9px; top: 7px; font-size: 18px; font-style: normal; color: #17211c; }
.bracelet-stone-grid i.stripe { background: radial-gradient(circle at 32% 27%, #fff8 0 6%, transparent 18%), repeating-linear-gradient(115deg, var(--stone) 0 7px, var(--accent) 8px 10px, var(--stone) 12px 19px) !important; }
.bracelet-stone-grid i.speckle { background: radial-gradient(circle at 35% 35%, var(--accent) 0 2%, transparent 3%), radial-gradient(circle at 65% 60%, var(--accent) 0 2%, transparent 3%), radial-gradient(circle at 32% 27%, #fff8 0 6%, transparent 18%), var(--stone) !important; }

/* 底部操作 */
.panel-actions { position: absolute; z-index: 40; right: 0; bottom: 0; left: 0; width: 100%; min-height: 64px; padding: 16px 24px; background: #fffffff7; border-top: 1px solid #e1e6e2; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -10px 24px #18221d14; }
.panel-primary-actions { display: flex; gap: 10px; margin-left: auto; min-width: 0; }

/* 五行弹窗 */
.five-element-picker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.five-element-picker-grid button { display: grid; place-items: center; gap: 7px; min-height: 88px; padding: 10px 4px; border: 1px solid #dfe4e0; background: #fff; color: var(--element); cursor: pointer; font-family: inherit; }
.five-element-picker-grid button.active { border-color: var(--element); box-shadow: inset 0 -3px var(--element); background: #f8faf8; }
.five-element-picker-grid svg { width: 28px; height: 28px; stroke: currentColor; }
.five-element-picker-grid span { color: #37433c; font-size: 12px; }
.open-five-calculator { height: 42px; margin-top: 18px; border-color: #855431 !important; color: #855431 !important; }
.calculator-heading { display: flex; align-items: center; gap: 12px; }
.calculator-heading > button { display: none; border: 0; background: none; padding: 4px; cursor: pointer; }
.calculator-heading span { display: block; font-size: 9px; letter-spacing: 3px; color: #a06f48; font-weight: 600; }
.calculator-heading h2 { margin: 2px 0 12px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.calc-grid .field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #37433c; }
.calc-grid .field .err { display: none; font-size: 11px; color: #b03a2e; margin-top: 4px; }
.calc-grid .field.invalid .err { display: block; }
.calc-grid .field.invalid .cz-input { border-color: #b03a2e; }

/* 刻字弹窗 */
.engrave-current { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.engrave-current i { width: 56px; height: 56px; border-radius: 50%; flex: none; display: block; background: radial-gradient(circle at 32% 27%, #fff9 0 6%, transparent 18%), var(--bead-image, none) var(--bead-position, center) / var(--bead-image-size, 330%) auto no-repeat, linear-gradient(135deg, var(--accent), var(--bead) 48%, #1115); box-shadow: inset 4px 4px 6px #fff6, inset -3px -3px 6px #0002; }
.engrave-current b { font-size: 13px; color: #202722; }
.engrave-current small { display: block; color: #8a8f8b; font-size: 11px; }

/* ===== 响应式 ===== */
@media (max-width: 1200px) {
  .studio { grid-template-columns: minmax(430px, 1fr) minmax(440px, .92fr); }
  .studio-panel { padding-inline: 16px; }
  .mobile-stone-catalog-body { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (min-width: 821px) and (max-width: 1200px) {
  .bracelet-customizer .studio { display: grid; }
  .bracelet-customizer .studio-panel { padding-inline: 16px; }
}
@media (max-width: 1200px) {
  .studio { height: auto; }
  .studio-panel { height: clamp(680px, calc(100dvh - 190px), 900px); }
}
@media (max-width: 820px) {
  .studio { display: flex; flex-direction: column; }
  .preview-stage { height: auto; min-height: 520px; }
  .studio-panel { height: auto; max-height: none; overflow: visible; }
}
@media (max-width: 1050px) {
  .lumora-tray-scene { width: min(56vw, 500px); }
  .tray-tool-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bracelet-customizer { --mobile-action-height: calc(64px + env(safe-area-inset-bottom)); height: auto; min-height: 100dvh; overflow: visible; padding-bottom: calc(var(--mobile-action-height) + 16px); }
  .bracelet-customizer .custom-top { display: none !important; height: 0; padding: 0 !important; border: 0; }
  .bracelet-customizer .studio { display: flex; width: 100%; height: auto !important; max-height: none !important; min-height: 0; flex-direction: column; overflow: visible; }
  .bracelet-customizer .pairing-title, .bracelet-customizer .pairing-help { display: none !important; }
  .bracelet-customizer .studio-panel { display: flex; height: auto !important; max-height: none !important; padding-top: 12px; padding-bottom: calc(var(--mobile-action-height) + 20px); overflow: visible !important; border-left: 0; }
  .bracelet-customizer .preview-stage { background-position: center; min-height: 48svh; height: 48svh; min-height: 400px; padding: 16px; }
  .bracelet-customizer .studio-panel > .panel-actions { position: fixed !important; right: 0; left: 0; bottom: 0; width: 100vw; min-height: var(--mobile-action-height); margin: 0; align-items: center; gap: 8px; padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .lumora-tray-scene { width: min(88vw, 390px); }
  .tray-tool-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 31px; }
  .tray-status-line { flex-direction: column; align-items: center; text-align: center; gap: 3px; }
  .pairing-wrist-select { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .stone-browser { display: none; }
  .mobile-stone-catalog { display: flex; }
}
@media (max-width: 520px) {
  .preview-stage > .tray-tool-row { position: absolute; z-index: 90; left: 8px; top: 24px; width: 40px; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 6px; border-radius: 5px; background: #fffdf2e0; }
  .tray-tool-row .lm-btn-ant { flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center; }
  .tray-tool-label { display: none; }
  .canvas-feature-tools { position: absolute; z-index: 90; right: 8px; top: 24px; display: flex !important; width: 40px; flex-direction: column; gap: 7px; padding: 6px; border-radius: 5px; background: #fffdf2e0; }
  .canvas-feature-tools .lm-btn-ant { width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center; background: #fffdf2; border-color: #d7d1c3; box-shadow: 0 4px 10px #20170f22; }
  .preview-stage > .tray-status-line { width: calc(100% + 46px); margin: 10px 0 0 -46px; }
  .pairing-actions { display: none !important; }
  .panel-actions { width: 100%; max-width: 100vw; padding-inline: 12px; gap: 6px; }
  .panel-primary-actions { min-width: 0; gap: 6px; }
  .panel-primary-actions .lm-btn-ant { min-width: 0; padding-inline: 8px; }
  .studio-panel { padding-inline: 12px; }
  .mobile-stone-catalog { margin-inline: -12px; }
  .mobile-stone-catalog-body { grid-template-columns: 88px minmax(0, 1fr); min-height: 430px; }
  .mobile-stone-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .mobile-stone-card-main > i { width: clamp(56px, 18vw, 70px); height: clamp(56px, 18vw, 70px); }
  .five-element-picker-grid { gap: 5px; }
  .five-element-picker-grid button { min-height: 72px; }
  .five-element-picker-grid svg { width: 22px; height: 22px; }
}
@media (min-width: 430px) and (max-width: 520px) {
  .mobile-stone-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (min-width: 1201px) and (min-height: 1145px) {
  .bracelet-customizer { min-height: calc(100dvh - 112px); }
  .bracelet-customizer .studio { height: calc(100dvh - 224px); max-height: none; }
}
@media (min-width: 768px) {
  .bracelet-customizer .studio-panel { overscroll-behavior: auto; }
}

/* 移动端珠石目录（默认隐藏，桌面隐藏） */
.mobile-stone-catalog { display: none; flex: 1 1 auto; flex-direction: column; overflow: hidden; border-top: 0; background: #fafaf8; height: clamp(320px, 43dvh, 500px); min-height: 320px; }
.mobile-stone-major-tabs { display: flex; flex: 0 0 48px; min-height: 48px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid #e4e5e1; background: #fff; }
.mobile-stone-major-tabs::-webkit-scrollbar { display: none; }
.mobile-stone-major-tabs button { position: relative; flex: 0 0 auto; min-width: 82px; height: 48px; padding: 0 12px; border: 0; background: transparent; color: #737a75; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 13px; }
.mobile-stone-major-tabs button.active { color: #17211c; }
.mobile-stone-major-tabs button.active:after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; background: #b86f53; }
.mobile-stone-catalog-body { flex: 1 1 auto; display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.mobile-stone-sidebar { display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #f5f4f0; border-right: 1px solid #e6e5e0; }
.mobile-stone-sidebar strong { padding: 12px 9px 9px; color: #777c78; font-size: 11px; font-weight: 500; line-height: 1.45; }
.mobile-stone-sidebar button { position: relative; min-height: 46px; padding: 8px 8px 8px 15px; border: 0; background: transparent; color: #767c77; text-align: left; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 12.5px; }
.mobile-stone-sidebar button.active { background: #fff; color: #17211c; }
.mobile-stone-sidebar button.active:before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: #b86f53; }
.mobile-stone-sidebar .mobile-element-tab { display: grid; place-items: center; min-height: 46px; padding: 0; color: var(--element); }
.mobile-stone-sidebar .mobile-element-tab svg { width: 21px; height: 21px; }
.mobile-stone-sidebar .mobile-element-tab.active { color: var(--element); background: #fff; }
.mobile-stone-sidebar .mobile-element-tab.active:before { background: var(--element); }
.mobile-stone-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-content: start; padding: 10px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.mobile-stone-card-grid article { display: flex; flex-direction: column; min-width: 0; min-height: 174px; overflow: hidden; border: 1px solid #e1e1dc; border-radius: 7px; background: #fff; box-shadow: 0 3px 8px #26312b0b; align-self: start; }
.mobile-stone-card-main { flex: 1 1 auto; width: 100%; min-width: 0; padding: 10px 6px 8px; border: 0; background: transparent; text-align: center; cursor: pointer; font-family: inherit; }
.mobile-stone-card-main > i { display: block; width: 72px; height: 72px; margin: 0 auto 7px; border: 1px solid #fff9; border-radius: 50%; background:
  radial-gradient(circle at 32% 27%, #fff9 0 6%, transparent 18%),
  var(--stone-image, none) var(--stone-position, center) / var(--stone-size, 330%) auto no-repeat,
  linear-gradient(135deg, var(--accent), var(--stone) 48%, #1115);
  box-shadow: inset 5px 5px 9px #fff7, inset -5px -5px 10px #24170e38, 0 4px 8px #31211726; }
.mobile-stone-card-main > b, .mobile-stone-card-main > small { display: block; min-width: 0; }
.mobile-stone-card-main > b { overflow: hidden; color: #202722; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mobile-stone-card-main > small { margin-top: 3px; color: #8a8f8b; font-size: 11px; }
.mobile-stone-quantity { flex: 0 0 38px; display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; height: 38px; border-top: 1px solid #e7e7e2; }
.mobile-stone-quantity button { height: 100%; padding: 0; border: 0; background: transparent; color: #536058; font-size: 23px; cursor: pointer; }
.mobile-stone-quantity button:disabled { color: #c8ccc9; cursor: not-allowed; }
.mobile-stone-quantity span { color: #59645d; text-align: center; font-size: 11px; }

/* ===== 覆盖：桌面端同样使用移动端珠石目录（与参考站一致） ===== */
.stone-browser { display: none !important; }
.mobile-stone-catalog { display: flex !important; height: auto !important; max-height: none !important; min-height: 0; flex: 1 1 auto; }
.bracelet-customizer .mobile-stone-catalog { height: auto !important; max-height: none !important; min-height: 0; }
.bracelet-customizer .mobile-stone-catalog-body { min-height: 430px; }
.bracelet-customizer .panel-actions .lm-btn-ant.primary { background: #b47745; border-color: #b47745; }