/* ============================================================
   Stone LAB 灵感石验室 — 共享样式
   风格：自然禅意 · 米色温暖 · 手绘黑猫 IP · 高端文玩
   ============================================================ */
:root {
  --bg: #faf9f6;
  --card: #ffffff;
  --ink: #3a3530;
  --muted: #a89a8a;
  --line: #e8e8e8;
  --accent: #c9a26a;
  --accent-soft: #8a7a68;
  --gold: #c9a26a;
  --gold-soft: #f3e9da;
  --pink: #e8c4c4;
  --green: #7a9a6a;
  --red: #c9705e;
  --radius: 14px;
  --shadow: 0 2px 8px rgba(0,0,0,.04);
  --tabbar-h: 58px; /* 底部 TabBar（贴底）：58px 高 */
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  padding-bottom: calc(var(--tabbar-h) + 8px);
  min-height: 100vh;
  /* 减弱浏览器边缘滑动导致的前进/后退切页误触 */
  overscroll-behavior-x: none;
}
body.no-tabbar {
  padding-bottom: 0;
  /* DIY 页锁死整页滚动：只留素材库内部滚动 */
  overflow: hidden;
  height: 100dvh;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
/* 禁用双击缩放：快速连点按钮/卡片不再触发手机浏览器放大缩小 */
button, a, [onclick], .tool-btn, .mat-card, .mat-cat, .mat-side-btn, .tabbar .tab {
  touch-action: manipulation;
}

/* ---------- 通用 SVG 图标 ---------- */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: inherit;
  vertical-align: middle;
}
.ic svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}
.ic-lg { width: 28px; height: 28px; }
.ic-xl { width: 48px; height: 48px; }
.ic-inline { margin: -2px 0; }

.page { max-width: 640px; margin: 0 auto; display: none; }
/* P0-2 路由隔离：只有激活页显示，其余页不渲染 */
.page.page-active { display: block; }
.hidden { display: none !important; }

/* ---------- 顶部标题 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar .brand {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 1.1rem;
}
.topbar .brand small { color: var(--muted); font-weight: 400; margin-left: 6px; letter-spacing: .05em; }
.topbar .native-menu { color: var(--muted); font-size: 1.1rem; letter-spacing: 4px; }

/* ---------- 胶囊按钮 ---------- */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  background: linear-gradient(135deg, #d9b88c 0%, #c9a26a 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(201,162,106,.35);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.pill-btn:active { transform: scale(.96); }
.pill-btn.plain { background: #f0ece4; color: var(--ink); box-shadow: none; }
.pill-btn#homeStartBtn { background: #fff; color: #1c1c1e; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
/* 首页轮播图内 CTA：米白底 + 深字，在深色大图上有层次 */
.pill-btn.home-cta {
  background: #f8f5f0;
  color: var(--ink);
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  min-height: 52px;
  font-size: 1rem;
}
.pill-btn.block { width: 100%; }
/* 首页新版式：开始定制卡片（覆盖轮播底部） */
.card.home-start-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 24px 20px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
/* 定制卡右侧：动态成串手串（canvas 动画，盘静止、手串转） */
.home-start-ring { width: 150px; height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.home-start-ring canvas { width: 100%; height: 100%; }
/* 定制卡生辰信息 */
.home-bazi-chip {
  display: inline-flex; align-items: center;
  background: #f7f3ea; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
  font-size: .72rem; color: var(--ink); font-weight: 600;
  cursor: pointer;
}
.home-bazi-chip.home-bazi-ask { background: #fdf6ea; border-color: #e5cfa5; color: #a9792f; }
.home-bazi-edit { font-size: .72rem; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 4px; }
.home-start-text { flex: 1; }
.home-start-card .pill-btn { flex-shrink: 0; min-height: 44px; font-size: .86rem; }
/* 精选商城 / 智能顾问 入口卡 */
.home-entry { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid #e6e6e6; background: #fff; text-align: left; cursor: pointer; }
.home-entry-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #e2e2e2; display: flex; align-items: center; justify-content: center; color: #1c1c1e; flex-shrink: 0; }
.home-entry-ic.ic { width: 40px; height: 40px; }
.home-entry-ic.ic svg { width: 24px; height: 24px; }
/* 热门推荐横滑卡（与优秀客订串联，5 个紧凑横滑） */
.card.home-hot { flex: 0 0 125px; padding: 6px; margin: 0 0 8px; cursor: pointer; border: none; box-shadow: none; text-align: center; }
#homeHot { gap: 16px; overscroll-behavior-x: contain; }
.home-hot-thumb { width: 100%; aspect-ratio: 1/1; border-radius: 50%; background-color: #f0ece4; display: flex; align-items: center; justify-content: center; font-size: 2rem; position: relative; overflow: hidden; }
/* 作品成品图缩略图（圆形，与详情页同源内容） */
.home-hot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 私享群二维码 */
.home-qr { text-align: center; padding: 18px; }
.home-qr-img { width: 140px; height: 140px; margin: 0 auto; border: 1px dashed var(--line); border-radius: 12px; background: #fbfaf7; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .72rem; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 16px;
  margin: 0 14px 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* 标题衬线（韩系柔美 · 优雅文玩感） */
.page-head h2, .section-title, .home-start-text h2, .home-entry b,
.modal h3, .user-card .name, .design-card .title, .checkout-ring .lab {
  font-family: var(--font-serif);
  letter-spacing: .04em;
}
/* 通用微动效：卡片/素材卡轻浮起 */
.card:active, .home-hot:active, .design-card:active {
  transform: scale(.98);
}
.mat-card { transition: transform .15s ease; }

/* ---------- 底部 TabBar（深色悬浮胶囊） ---------- */
.tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 10px;
  width: auto;
  max-width: 640px;
  margin: 0 auto;
  height: var(--tabbar-h);
  min-height: 64px;
  background: #1c1c1e;
  border-radius: 32px;
  /* 导航上方灰色阴影已去除 */
  display: flex;
  align-items: flex-start;
  z-index: 70;
  overflow: visible;
  transition: opacity .35s, transform .35s;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tabbar.fade {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tabbar.hide { opacity: 0; transform: translateY(60%); pointer-events: none; }
/* PRD 1.2: DIY 定制页隐藏 TabBar */
body.no-tabbar #tabbar { display: none; }

.tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  height: 100%;
  padding-top: 8px;
  font-size: 10px;
  color: #8e8e93;
  background: transparent;
  position: relative;
  transition: color .15s ease, transform .15s ease;
}
.tabbar .tab:active { transform: scale(0.96); }
.tabbar .tab.active { color: #fff; }
.tabbar .tab.active .ico { transform: translateY(-2px); }
.tabbar .tab .ico {
  width: 24px;
  height: 24px;
  line-height: 1;
  transition: transform .15s ease;
}
.tabbar .tab .ico svg { width: 100%; height: 100%; }
.tabbar .tab .label { font-weight: 500; letter-spacing: .02em; }
.tabbar .tab .badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(4px);
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #1c1c1e;
}

/* DIY 中间突出按钮 */
.tabbar .tab.craft {
  padding-top: 0;
  justify-content: center;
}
.tabbar .tab.craft .ico-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #1c1c1e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  border: 3px solid #1c1c1e;
  transition: transform .15s ease;
}
.tabbar .tab.craft:active .ico-circle { transform: scale(0.92); }
.tabbar .tab.craft .ico-circle svg { width: 28px; height: 28px; }
.tabbar .tab.craft .label {
  margin-top: 2px;
  color: #fff;
}



/* ---------- 弹窗（居中模态） ---------- */
.mask {
  position: fixed; inset: 0;
  background: rgba(42,42,42,.45);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mask.open { display: flex; }
.modal {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px;
  animation: pop .25s ease;
  max-height: 84vh;
  overflow-y: auto;
}
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 { font-size: 1.05rem; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.modal h3 .x { color: var(--muted); font-size: 1rem; padding: 4px; }
.modal p.body { font-size: .82rem; color: var(--accent-soft); line-height: 1.7; }
.modal .actions { display: grid; gap: 10px; margin-top: 16px; }
.modal .btn {
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.modal .btn.primary { background: var(--accent); color: #fff; }
.modal .btn.ghost { background: #f0ece4; color: var(--ink); }
.modal .btn.text { background: none; color: var(--ink); font-weight: 500; }
/* 清空确认弹窗：淡粉圆底红叹号 + 砖红陶土红危险主按钮（最终版 6.1） */
.clear-warn-ic {
  width: 52px; height: 52px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #fdece9;
  border: 2px solid #e06a52;
  color: #c0482f;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.modal .btn.danger { background: #b0563f; color: #fff; }
.qr-box {
  background: var(--bg);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin: 12px 0;
}
.qr-box .qr-slogan { font-size: .95rem; font-weight: 800; letter-spacing: .08em; }
.qr-box .qr-sub { font-size: .72rem; color: var(--muted); margin: 2px 0 12px; }
.qr-box .qr-code {
  width: 140px; height: 140px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  color: #2a2a2a;
  letter-spacing: 0;
}
.qr-note { font-size: .7rem; color: var(--muted); margin-top: 8px; }

/* ---------- 底部半屏抽屉 ---------- */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
  max-width: 640px;
  margin: 0 auto;
}
.sheet.open { transform: none; }
.sheet .drag-bar {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 2px auto 14px;
}
.sheet .sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 10px;
}
.sheet .sheet-head .x { color: var(--muted); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  top: 60px; left: 50%;
  transform: translateX(-50%) translateY(-160%);
  background: rgba(42,42,42,.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: .8rem;
  z-index: 100;
  transition: transform .3s, visibility .3s;
  white-space: nowrap;
  max-width: 86vw;
  text-align: center;
  pointer-events: none;   /* 不拦截任何点击 */
  visibility: hidden;     /* 隐藏时彻底不可见、不可交互 */
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

/* ---------- 通用区块标题 ---------- */
.sec-title { font-size: 1.05rem; font-weight: 800; margin: 18px 16px 10px; }
.sec-sub { font-size: .78rem; color: var(--muted); margin: -6px 16px 12px; line-height: 1.6; }

/* ============================================================
   「灵感」页
   ============================================================ */
/* 灵感页：内部滚动容器 = 视口 − 底部导航栏，body 不再溢出出现整页滚动条 */
#page-inspire,
#page-custom {
  height: calc(100dvh - var(--tabbar-h) - 12px);
  overflow-y: auto;
}
/* 一体固定头：标题栏 + tab 栏合成一个吸顶整体，滚动内容时不动 */
.inspire-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.inspire-head .topbar {
  position: static;          /* 吸顶交给外层整体（避免嵌套 sticky 冲突） */
  border-bottom: none;       /* 去掉标题与 tab 之间的分隔线 → 视觉一体 */
  padding-bottom: 4px;
}
.inspire-tabs { display: flex; gap: 8px; padding: 2px 16px 10px; }
.inspire-tab {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #f0ece4;
  font-size: .82rem;
  font-weight: 600;
}
.inspire-tab.active { background: var(--accent); color: #fff; }

/* AI 推荐 · 聊天界面 */
.ai-chat { padding: 4px 14px 16px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.ai-chat-msgs { display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; padding-bottom: 0px; scrollbar-width: none; justify-content: flex-end; }
.ai-chat-msgs::-webkit-scrollbar { display: none; }
/* 底部输入栏（聊天窗口） */
.ai-input-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 5px 0 4px;
  background: var(--card);
  position: sticky; bottom: 0;
}
.ai-input-bar input {
  flex: 1; min-width: 0;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: .85rem; outline: none;
}
.ai-input-bar input:focus { border-color: var(--accent); }
.ai-input-bar button {
  flex-shrink: 0; padding: 0 18px; height: 38px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .85rem; font-weight: 600;
}
.ai-input-bar button:active { transform: scale(.95); }
/* 客服按钮：置于输入框与发送之间 */
.ai-input-bar button.ai-svc-btn {
  flex-shrink: 0; width: 39px; height: 39px; padding: 0;
  border-radius: 50%; background: #fff; color: var(--ink);
  border: 1px solid var(--line); font-size: 1.05rem; line-height: 1;
}
.ai-input-bar button.ai-svc-btn:active { transform: scale(.9); }
/* 购物车结算页（#orders） */
.cart-subtitle { font-size: .8rem; color: var(--muted); margin: -8px 0 14px; letter-spacing: .02em; }
.cart-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.cart-check { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.cart-thumb { width: 72px; height: 72px; border-radius: 12px; background: #f3ede3; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-thumb .ph { font-size: 1.4rem; }
.cart-thumb .dot { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset -2px -3px 5px rgba(0,0,0,.18); }
.cart-info { flex: 1; min-width: 0; }
.cart-name { font-weight: 700; font-size: .95rem; }
.cart-meta { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.cart-price { font-size: .86rem; color: #b3a797; margin-top: 5px; font-weight: 600; }
.cart-del { border: none; background: none; color: #cfc4b6; font-size: 1.05rem; cursor: pointer; padding: 6px; align-self: flex-start; }
.cart-del:hover { color: var(--accent); }
/* 底部结算栏：左半透明白 pill + 右深色按钮 */
.order-bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; margin-top: 6px; background: rgba(255,255,255,.72); border: 1px solid rgba(201,162,106,.22); border-radius: 999px; box-shadow: 0 10px 30px rgba(42,42,42,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ob-left { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--ink); white-space: nowrap; }
.ob-left input { width: 18px; height: 18px; accent-color: var(--accent); }
.ob-cart-ico { font-size: 1.05rem; }
.ob-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.ob-sum { font-size: .85rem; color: var(--ink); white-space: nowrap; }
.ob-sum b { color: #1c2624; font-size: 1.08rem; font-weight: 800; }
.ob-pay { padding: 11px 28px; border-radius: 999px; background: #1c2624; color: #fff; font-weight: 700; font-size: .92rem; border: none; cursor: pointer; transition: transform .15s, opacity .2s; }
.ob-pay:active { transform: scale(.96); }
.ob-pay:disabled { opacity: .5; cursor: not-allowed; }
.ai-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: .82rem; line-height: 1.6; white-space: pre-wrap; }
/* JARVIS 欢迎卡：居中文字 + 呼吸生日按钮（首屏，替代原「请先填写生辰信息」） */
.jarvis-welcome { margin: auto; text-align: center; padding: 8px 6px; width: 100%; }
.jw-title { font-size: 1.06rem; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.jw-line2 { font-size: .9rem; color: var(--ink); margin-top: 10px; }
.jw-div { width: 30px; height: 2px; background: var(--accent); opacity: .5; margin: 16px auto; border-radius: 2px; }
.jw-line3 { font-size: .8rem; color: var(--muted); }
.jw-line4 { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.jw-bday {
  margin-top: 18px; padding: 11px 24px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .88rem; font-weight: 700;
  animation: jwBreathe 2.6s ease-in-out infinite;
}
.jw-bday:active { transform: scale(.96); }
@keyframes jwBreathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(201,162,106,.38); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 9px rgba(201,162,106,0); }
}
.ai-msg.ai { background: var(--card); border: 1px solid var(--line); border-top-left-radius: 4px; align-self: flex-start; }
.ai-msg.user { background: var(--accent); color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.ai-options { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.ai-opt {
  padding: 8px 16px;
  border-radius: 999px;
  background: #f0ece4;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--line);
  transition: transform .12s ease, background .2s ease;
}
.ai-opt:active { transform: scale(.95); background: var(--accent); color: #fff; }
.ai-reco {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  width: 100%;
}
.ai-reco .disc { background: #f0eae0; border-radius: 50%; width: 96px; height: 96px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.ai-reco .row { display: flex; justify-content: space-between; font-size: .8rem; margin: 4px 0; }
.ai-reco .total { font-weight: 800; color: var(--accent); font-size: .95rem; }
.ai-reco .go { 
  width: 100%; margin-top: 10px; padding: 10px;
  border-radius: 12px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: .85rem;
}
.ai-reco .go:active { transform: scale(.97); }

/* 生辰八字 · 能量档案卡 */
.ai-archive {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  width: 100%;
  font-size: .8rem;
}
.arch-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .82rem; padding-bottom: 8px; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.arch-date { font-weight: 400; color: var(--muted); font-size: .72rem; }
.arch-pillars { display: flex; gap: 6px; justify-content: space-between; margin-bottom: 10px; }
.arch-pillar { flex: 1; text-align: center; background: #f7f3ea; border-radius: 10px; padding: 6px 2px; }
.arch-p-label { font-size: .66rem; color: var(--muted); margin-bottom: 4px; }
.arch-gan, .arch-zhi { display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; color: #fff; font-size: .78rem; margin: 0 1px; }
.arch-chart { width: 100%; border-radius: 8px; background: #faf8f2; margin-bottom: 8px; }
.arch-row { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; padding: 4px 0; }
.arch-row > span:last-child { text-align: right; }
.arch-master { font-weight: 800; color: var(--accent); }
.arch-txt { font-size: .76rem; color: #6b6357; background: #f7f3ea; border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.arch-reco { margin: 8px 0; }
.reco-bead { display: flex; align-items: center; gap: 6px; font-size: .78rem; padding: 5px 0; }
.reco-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.reco-sub { color: var(--muted); font-size: .68rem; }
.reco-total { text-align: right; font-weight: 800; color: var(--accent); font-size: .82rem; padding-top: 6px; border-top: 1px dashed var(--line); margin-top: 4px; }
.ai-archive .go {
  width: 100%; margin-top: 10px; padding: 10px;
  border-radius: 12px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: .85rem;
}
.ai-archive .go:active { transform: scale(.97); }

/* ===== Tử Vi（紫微斗数）命盘 —— #inspire 右栏 ===== */
.tuvi-wrap { width: 100%; font-size: .8rem; }
.tuvi-head { text-align: center; padding-bottom: 10px; border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.tuvi-title { font-weight: 800; font-size: 1rem; letter-spacing: 2px; color: #3a3530; }
.tuvi-meta { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.tuvi-meta2 { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.tuvi-meta3 { font-size: .68rem; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }
.tuvi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tuvi-cell {
  background: #fdfaf5; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 6px; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between;
}
.tuvi-cell.is-menh { border-color: var(--accent); background: linear-gradient(180deg, #faf3e6, #fdfaf5); box-shadow: 0 2px 8px rgba(201, 162, 106, .18); }
.tuvi-cell.is-than { outline: 2px solid #e8c4c4; outline-offset: -2px; }
.tuvi-cung { font-size: .72rem; font-weight: 700; color: var(--accent); display: flex; justify-content: space-between; align-items: center; }
.tuvi-than { font-size: .58rem; background: #e8c4c4; color: #fff; border-radius: 6px; padding: 1px 4px; font-weight: 600; }
.tuvi-stars { font-size: .68rem; line-height: 1.5; color: #3a3530; margin: 4px 0; }
.tuvi-stars i { font-style: normal; margin-right: 4px; color: #5a4a3a; }
.tuvi-stars i em { font-style: normal; font-size: .55rem; color: var(--muted); margin-left: 2px; }
.tuvi-none { color: #b8b0a5; font-size: .62rem; }
.tuvi-hoa { font-size: .66rem; color: #c05a4a; letter-spacing: 2px; font-weight: 700; }
.tuvi-el { font-size: .6rem; color: var(--muted); }
.tuvi-loading { text-align: center; color: var(--muted); font-size: .78rem; padding: 20px 0; }
.tuvi-reco { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tuvi-reco-title { font-size: .78rem; font-weight: 800; color: #3a3530; margin-bottom: 8px; }
.tuvi-reco .go {
  width: 100%; margin-top: 10px; padding: 10px;
  border-radius: 12px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: .85rem;
}
.tuvi-reco .go:active { transform: scale(.97); }

/* 灵感详情页（静态展示） */
.scheme-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 8px;
  background: none;
  backdrop-filter: none;
}
#page-scheme .scheme-title {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
  padding: 5px 12px; font-weight: 600; font-size: .92rem;
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scheme-nav-left { display: flex; align-items: center; }
.scheme-back-label { display: none; }
#schemeBack { border: 1px solid #e0e0e0; background: #fff; color: #2a2a2a; }
#page-scheme .scheme-nav {
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  min-height: calc(48px + env(safe-area-inset-top));
  padding: calc(env(safe-area-inset-top) + 10px) 12px;
  box-sizing: border-box;
  background: none; backdrop-filter: none;
  pointer-events: none;
}
/* 桌面两列容器：移动端 display:contents 维持原单列顺序 */
.scheme-body, .scheme-left, .scheme-right { display: contents; }
/* 移动端：内容提升为 #page-scheme 直系 flex 项，用 order 精确恢复「原可见顺序」零回归 */
#page-scheme { display: flex; flex-direction: column; }
#page-scheme .scheme-nav { order: 1; }
#page-scheme .scheme-nav > * { pointer-events: auto; }
#page-scheme .scheme-hero { order: 2; }
#page-scheme .scheme-head { order: 3; }
#page-scheme .scheme-desc-title { order: 4; }
#page-scheme .scheme-desc { order: 5; }
#page-scheme .scheme-photo-head { order: 6; }
#page-scheme .scheme-photo-note { order: 7; }
#page-scheme .scheme-photos { order: 8; }
#page-scheme #schemeMatTitle { order: 9; }
#page-scheme .scheme-table { order: 10; }
#page-scheme .scheme-actions { order: 11; }
.scheme-hero { padding: calc(env(safe-area-inset-top) + 48px) 6% 0; background: #f5f5f5; }
.scheme-plate {
  position: relative;
  width: 88%; aspect-ratio: 1/1; margin: 0 auto;
  border-radius: 14px;
  /* 复用 DIY 圆盘：真实陶瓷浅盘图（米白金边） */
  background: url('../img/plate-ceramic.webp') center / cover no-repeat;
  border: none;
  box-shadow:
    inset 8px 10px 28px rgba(255,255,255,.55),
    inset -14px -18px 38px rgba(42,42,42,.10);
  overflow: hidden;
}
.scheme-watermark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; letter-spacing: .3em; color: rgba(42,42,42,.08); font-weight: 800; pointer-events: none;
}
.scheme-bead {
  position: absolute; pointer-events: none;
  will-change: transform; backface-visibility: hidden;
  /* ★ 阴影/旋转完全复用 DIY 同款 .bead-img + .bead-img-shadow，不再单独定义（保证 100% 一致） */
}
.scheme-plate {
  cursor: grab;
}
.scheme-head { display: flex; align-items: baseline; justify-content: space-between; padding: 24px 20px; border-bottom: 1px solid #e8e8e8; margin-bottom: 16px; }
.scheme-name { font-size: 1.4rem; font-weight: 600; color: #2a2a2a; border: 1px solid #e0e0e0; border-radius: 8px; padding: 6px 12px; }
.scheme-wrist { display: none; }
.scheme-price { font-size: 1.25rem; font-weight: 700; color: #2a2a2a; }
#page-scheme .scheme-name { border: none; padding: 0; background: none; font-size: 1.15rem; }
#page-scheme .scheme-price { font-size: 1.05rem; }
.scheme-desc-title { font-size: .9rem; font-weight: 600; color: #2a2a2a; padding: 20px 20px 0; }
.scheme-desc { font-size: .88rem; color: #7a7066; line-height: 1.6; padding: 8px 20px 0; }
.scheme-photo-head { display: flex; justify-content: space-between; align-items: center; padding: 28px 20px 6px; font-weight: 600; color: #2a2a2a; font-size: .92rem; }
.scheme-photo-count { font-weight: 400; color: #7a7066; font-size: .8rem; }
.scheme-photo-note { font-size: .75rem; color: #7a7066; padding: 0 20px 10px; }
.scheme-photos { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px; scrollbar-width: none; }
.scheme-photos::-webkit-scrollbar { display: none; }
.scheme-photo {
  flex: 0 0 72%; aspect-ratio: 1/1; border-radius: 14px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.scheme-table { margin: 20px 20px 110px; font-size: .72rem; }
.scheme-tbl-row { display: grid; grid-template-columns: minmax(0,1fr) 44px 46px 34px 48px; gap: 8px; align-items: center; background: #faf8f4; border-radius: 10px; margin: 0 0 8px; padding: 10px 10px 10px 4px; }
.scheme-tbl-row.head { color: #a89a8a; font-size: .66rem; font-weight: 600; background: none; border-radius: 0; margin: 0 0 8px; padding: 0 10px 0 4px; }
.scheme-tbl-row > span { padding: 0; text-align: right; white-space: nowrap; }
.scheme-tbl-row > span:first-child { text-align: left; }
.scheme-tbl-row > span:not(.scheme-tbl-bead) { font-weight: 700; font-size: .7rem; }
.scheme-tbl-bead { display: flex; align-items: center; gap: 6px; white-space: nowrap; background: #f6f1e8; border-radius: 8px; padding: 4px 10px; min-width: 0; overflow: hidden; }

.scheme-tbl-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.scheme-tbl-thumb { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.scheme-actions {
  position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px;
  display: flex; gap: 10px; padding: 12px 20px 8px;
  background: none; backdrop-filter: none;
  z-index: 99;
}
.scheme-btn { flex: 1; min-height: 46px; border-radius: 28px; font-weight: 700; font-size: .9rem; }
.scheme-btn.share { background: #fff; border: 1px solid #e0e0e0; color: #2a2a2a; }
.scheme-btn.use { background: #1c2624; border: 1px solid #1c2624; color: #fff; }

/* #custom 移动端筛选头：灵感大标题 + 星座/五行 两个独立按钮 + 左对齐小按钮 */
#page-custom .custom-filter { position:sticky; top:0; z-index:30; background:var(--bg); padding:12px 14px 6px; }
#page-custom .cf-title { font-family: var(--font-serif); font-size:1.7rem; font-weight:800; letter-spacing:.08em; color:var(--ink); text-align:center; position:sticky; top:0; z-index:30; background:var(--bg); padding:12px 0 8px; }
#page-custom .cf-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
#page-custom .cf-tab { padding: 10px 26px; font-size: .95rem; font-weight: 700; background: #fff; color: #1c1c1c; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: background .15s, color .15s, border-color .15s; }
#page-custom .cf-tab.active { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }
#page-custom .cf-tab:active { transform: scale(.95); }
#page-custom .cf-panel { display: none; margin-top: 12px; }
#page-custom .custom-filter.open .cf-panel { display: block; }
#page-custom .cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#page-custom .cf-chips .chip { padding: 5px 14px; background: #f7f3ea; color: #1c1c1c; border: 1px solid #e6dccb; border-radius: 8px; font-size: .78rem; font-weight: 600; transition: background .15s, color .15s, border-color .15s, transform .12s; }
#page-custom .cf-chips .chip.active { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }
#page-custom .cf-chips .chip:active { transform: scale(.94); }
#page-custom .cf-divider { height: 1px; background: var(--line); margin-top: 14px; }

.waterfall { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px 16px; }
.design-card {
  background: var(--card);
  border-radius: 14px;
  border: none;
  overflow: hidden;
}
.design-card .disc {
  background: #f0eae0;
  border-radius: 50%;
  width: 88%;
  aspect-ratio: 1;
  margin: 12px auto;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background-image: radial-gradient(circle at 50% 30%, #fff8ec, #e8dfd0);
}
.design-card .disc .water-mark { position: absolute; font-size: .6rem; color: rgba(42,42,42,.18); letter-spacing: .2em; }
/* 作品成品图缩略图（canvas 渲染陶瓷盘+串珠，与详情页大图同源内容） */
.design-card .disc .work-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.design-card .bracelet-emoji { font-size: 2.6rem; transform: rotate(-12deg); }
.design-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 12px 12px; padding: 9px 12px;
  background: #fff; border: 1px solid #e8e8e8; border-radius: 10px;
}
.design-card .name { flex: 1; min-width: 0; margin-right: 8px; font-weight: 700; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-card .price { flex-shrink: 0; font-weight: 800; font-size: .84rem; }
.design-card .author { font-size: .72rem; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.design-card .author .mini-avatar { width: 18px; height: 18px; border-radius: 50%; background: #b98a5e; color: #fff; font-size: .55rem; display: flex; align-items: center; justify-content: center; }
.design-card .applied { font-size: .7rem; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 8px; margin-left: auto; }

/* ============================================================
   「购物车」「我的」「我的设计」 简单列表
   ============================================================ */
.empty-state { text-align: center; padding: 60px 30px; color: var(--muted); }
.empty-state .big { font-size: 2.5rem; }
.empty-state p { font-size: .86rem; margin-top: 8px; line-height: 1.8; }

.user-card { display: flex; align-items: center; gap: 14px; justify-content: center; cursor: pointer; }
.avatar-lg { width: 58px; height: 58px; border-radius: 50%; background: #d8cfc2; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.user-card .name { font-weight: 800; }
.user-card .tier { font-size: .72rem; color: var(--accent-soft); background: #f0ece4; border-radius: 999px; padding: 2px 8px; display: inline-block; }
.user-card .id { font-size: .66rem; color: var(--muted); }
.user-card .meta-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
/* 未登录/已登录同高（头像58 + padding 16*2 ≈ 90px） */
#page-mine .mine-user { min-height: 90px; }
/* 登录/注册卡片（未注册态） */
.user-card { cursor: pointer; }
.user-card .user-meta { flex: 1; }
.user-card .login-hint { font-weight: 800; font-size: .95rem; }
.user-card .login-sub { font-size: .7rem; color: var(--muted); margin-top: 3px; }
.user-card .arrow { color: var(--muted); font-size: 1.1rem; }
/* 未注册：通知卡雾面禁用 */
.guest-locked { position: relative; pointer-events: none; }
.guest-locked::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); border-radius:inherit; }
.guest-locked .list-row { opacity: .5; }

/* #mine 顶部「我的」大标题（移动端） */
.mine-title { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 800; letter-spacing: .08em; color: var(--ink); text-align: center; padding: 16px 0 6px; }
/* 卡片内部分割线（我的订单/设计 上方，居中留白） */
.mine-divider { height: 1px; background: var(--line); margin: 16px 0 0; }
/* #mine 图卡（原驻场设计师卡片位置） */
.mine-banner { padding: 0; overflow: hidden; }
.mine-banner img { width: 100%; height: auto; display: block; }
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.menu-grid .item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .68rem; color: var(--accent-soft); }
.menu-grid .item .ico { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }

.list-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: none; }
.list-row .ico { font-size: 1.2rem; }
.list-row .txt { flex: 1; }
.list-row .txt .t { font-size: .86rem; font-weight: 600; }
.list-row .txt .s { font-size: .7rem; color: var(--muted); }
.list-row .arrow { color: var(--muted); }

.designs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px 16px; }
.saved-card { background: var(--card); border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.saved-card .thumb { background: #f0eae0; height: 110px; display: flex; align-items: center; justify-content: center; position: relative; }
.saved-card .thumb .act {
  position: absolute; top: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}
.saved-card .thumb .share { left: 8px; background: var(--accent); color: #fff; }
.saved-card .thumb .del { right: 8px; background: #e8e3da; color: var(--muted); }
.saved-card .info { padding: 10px 12px; }
.saved-card .info .n { font-size: .82rem; font-weight: 700; }
.saved-card .info .d { font-size: .66rem; color: var(--muted); margin-top: 2px; }

/* ============================================================
   DIY 定制页（核心）
   ============================================================ */
/* DIY 页面整体固定一屏，禁止整页滚动；只有下方素材栏内部滚动 */
#page-diy {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.diy-top {
  position: relative;
  z-index: 40;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top) + 5px) 14px 5px;
  border-bottom: none;
  flex-shrink: 0;
}
.diy-top .row1 { display: flex; align-items: center; justify-content: space-between; }
.diy-back { font-size: 1.2rem; width: 40px; height: 40px; border-radius: 50%; background: #fff; border:1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; }
.diy-title { font-weight: 800; font-size: 1rem; }
.diy-top .row2 { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.diy-stats { flex: 1; display: flex; align-items: baseline; gap: 8px; font-size: .95rem; font-weight: 700; }
.diy-stats .v { color: var(--red); }
/* 价格 | 颗数 分隔符（文档 v2.0 H-01） */
.diy-stats .diy-stat-sep { color: var(--line); font-weight: 400; }
.diy-wrist-hint { font-size: .82rem; color: var(--muted); }
#page-diy .diy-top .row2 { position: relative; }
#page-diy .diy-wrist-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
/* 指南按钮（v2-fix 4.3）：顶栏右上角独立，文字 + 圆圈ⓘ */
.diy-guide {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: none;
  font-size: .8rem;
  color: var(--ink);
  flex-shrink: 0;
}
.diy-guide .ic { font-size: .9rem; color: var(--muted); }

/* 大盘：完美 1:1 正圆（缩小 10% 给下方腾空间） */
.diy-stage {
  margin: 4px auto;
  position: relative;
  width: min(76%, 350px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
/* 撤销按钮：独立定位在圆盘右下角空白处（盘外方形角落，不占工具行布局） */
.diy-undo-corner {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 6;
}
/* 3D 容器样式已移除（3D 模式暂下架，代码备份在 js/view3d.js） */
.plate-wrap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  margin: 0 auto;
  /* 陶瓷盘：真实陶瓷浅盘图（米白金边）；后台可用 plate_ceramic 覆盖 */
  background: var(--plate-ceramic, url('../img/plate-ceramic.webp')) center / cover no-repeat;
  /* 斜角内外阴影：左上内高光、右下内阴影，再叠加外投影 → 盘体斜光源立体感 */
  box-shadow:
    inset 8px 10px 28px rgba(255,255,255,.55),
    inset -14px -18px 38px rgba(42,42,42,.10);
  border: none;   /* 盘缘由真实盘面图自带，隐藏 CSS 边框 */
  overflow: hidden;
  touch-action: none;
}
.plate-wrap.wood {
  /* 木纹盘：真实木质浅盘图；后台可用 plate_wood 覆盖 */
  background: var(--plate-wood, url('../img/plate-wood.webp')) center / cover no-repeat;
  box-shadow:
    inset 6px 10px 24px rgba(255,255,255,.30),
    inset -12px -16px 36px rgba(90,62,30,.20);
  border-color: #c9b494;
}
.plate-wrap.glass {
  /* 玻璃盘：真实磨砂玻璃图；后台可用 plate_glass 覆盖 */
  background: var(--plate-glass, url('../img/plate-glass.webp')) center / cover no-repeat;
  box-shadow:
    inset 4px 8px 20px rgba(255,255,255,.85),
    inset -12px -16px 30px rgba(120,150,170,.12);
  border-color: rgba(205,218,226,.85);
}
.plate-wrap .empty-hint {
  position: absolute; inset: 0;
  display: flex;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  color: var(--muted); font-size: .78rem;
  pointer-events: none;
  text-align: center;
  line-height: 1.5;
  z-index: 2;
}
.plate-wrap .empty-hint .e { font-size: 1.8rem; line-height: 1; }

/* 盘内珠子 */
.plate-inner { position: absolute; inset: 0; }
.bead-el {
  position: absolute;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.75), rgba(0,0,0,.12));
  /* 物理色块圆阴影：斜左上光源 → 阴影向右下投影；box-shadow 只在色块珠（无图）时生效 */
  box-shadow: inset -3px -5px 8px rgba(0,0,0,.22), 4px 7px 12px rgba(42,42,42,.20);
  font-size: .5rem;
  color: rgba(0,0,0,.5);
  user-select: none;
  touch-action: none;
  overflow: visible;
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
}
/* 贴图层：阴影由 .bead-img-shadow（Canvas 预渲染剪影）承担，此处不叠加 drop-shadow 滤镜（性能：运行时零 filter） */
.bead-img {
  position: absolute;
  max-width: none;
  pointer-events: auto;
  will-change: transform;
  backface-visibility: hidden;
}
/* 贴图阴影层（不规则异形投影 · 独立 <img> 元素，src = Canvas 预渲染黑色剪影 PNG）
   —— 关键澄清（物理正确）：
   1. ❌ 旧认知错误："阴影绝对不能有任何 rotate" → 这是错的。物体转了 45°，投在盘上的剪影形状也必须是 45° 朝向（否则异形吊坠斜着立，阴影还是垂直条=极假）。
      ✅ 物理正确：阴影**形状朝向同步 rotate(θ)**（θ = 此刻 img 的 rotate 角度），但**全局投影偏移（斜右下）绝对不跟着 rotate 变方向**（光源固定）。
      正确复合顺序（transform 从右向左执行）：`translate(1px,3px) rotate(θ) scale(1.02)`
         → 先 scale（贴地微扩）→ rotate(θ)（形状朝θ对）→ translate(1,3)（全局固定右下，光源固定真）。
   2. width/height/left/top 由 JS 直接写入 window.beadImgCSS(...) 与 b.img 完全一致 → 异形吊坠 1:1 精确形状。
   3. 阴影参数再缩小（用户反馈"太大"）：opacity/translate/scale/drag/BLUR 全部再压一轮 */
.bead-img-shadow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
  display: block;
  /* 注意：transform 不再在 class 里写死 rotate（由 JS 与 img 同步写），这里只写默认零态（无rotate），真实状态由 JS 每帧同步 */
  transform: translate(1px, 3px) scale(1.02);
  /* 阴影极淡（只需要一点点） */
  opacity: 0.13;
  will-change: transform, opacity;
  transform-origin: 50% 50%;  /* 形状旋转只绕中心（阴影是投影，不跟随吊坠挂点的非中心 transformOrigin） */
}
/* 拖拽放大时：阴影同步略放大 + 略偏移（离地感），仍保持最小量 */
.bead-el.drag-glow .bead-img-shadow {
  /* 注意：真实有 rotate 时由 JS 写完整 transform 覆盖 class，这个只在 drag 生效且无 rotate 零态兜底 */
  transform: translate(2px, 4px) scale(1.06);
  opacity: 0.11;
}
/* 拖拽放大时：贴图不再叠加 filter（阴影层独立处理，性能） —— 无需样式规则，仅记录设计意图 */
/* 拖拽时关闭过渡（跟随手指要即时，无延迟） */
.bead-el.dragging { transition: none; }
/* 实拍图/渲染图珠子：不叠加自转白高光（那是色块珠的装饰，会罩在真实图片上）
   色块珠子：完整球体渐变质感已由 beadStyle 提供，也无需此高光 */
.bead-el::after { display: none; }
/* 最终版 B-00：不再用代码叠加任何穿孔/暗环/黑点图层，真实水晶质感由 beadStyle 纹理呈现 */
/* beadSpin 动画暂时留用（暂无类调用）—— 若启用需注意与 JS inline rotate 不共存 */
@keyframes beadSpin {
  from { }  /* 不动 transform，避免冲突 */
  to   { }
}
/* 碰撞敲击反馈已移除（beadHitPulse 红圈闪烁删除，避免每次碰撞闪红圈） */
/* 拖拽：保持原尺寸，仅提升层级 */
.bead-el.dragging { z-index: 5; }
/* 拖拽调序/旋转期间：即时跟手（整珠位置用 transform translate，不用过渡） */
.plate-wrap.reordering .bead-el {
  transition: none;
}
/* 收拢成串：平滑收缩到正圆轨道（GPU 合成层 transform，不触发布局 reflow → 完全不卡） */
.bead-el.stringed {
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.bead-el.bouncing { transition: all .45s cubic-bezier(.2,.9,.4,1.2); }
/* 4.7 成串态减珠：缩小淡出 + 向盘外弹出一小段 */
.bead-el.bead-remove {
  transform: scale(0.15) !important;
  opacity: 0 !important;
  transition: transform .25s ease-in, opacity .25s ease-in !important;
}
/* 拖拽浮起高亮：放大/阴影由 JS 拼接在 inline transform 里写，避免与 JS rotate 冲突（CSS 类里不写 transform） */
.bead-el.drag-glow {
  z-index: 6;
  box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 0 0 1px rgba(166, 89, 70, 0.25);
}

/* 成串后右上角放大镜预览按钮（最终版 C-04）：绿色细边圆圈 + 放大镜图形 */
.ring-preview-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #2e9e5b;
  color: #2e9e5b;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(46,158,91,.28);
  z-index: 8;
  cursor: pointer;
}
.ring-preview-btn svg { display: block; }
.ring-preview-btn:active { transform: scale(.94); }

/* 底部工具行 */
.diy-tools { display: grid; grid-template-columns: auto auto; gap: 10px; justify-content: start; padding: 0 14px; margin-bottom: 10px; }
.tool-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
}
.tool-btn svg { display: block; }
.tool-btn.active { background: var(--accent); color: #fff; }
.tool-btn:disabled { opacity: .4; }
.tool-btn.dark:disabled { opacity: 1; background:#1c2624; color:#fff; }
.tool-btn.wide {
  width: auto;
  padding: 0 14px;
  border-radius: 22px;
  font-size: .84rem;
  font-weight: 700;
  gap: 6px;
}
.tool-btn.dark { background: #1c2624; color: #fff; border-color: #1c2624; width: 100%; }
/* 收拢成串按钮：未达 8 颗时半透明提示态（仍可点击，点击会弹提示） */
.tool-btn.dark.insufficient {
  opacity: 1;
  background: #1c2624;
  border-color: #1c2624;
  color: #fff;
}

.tools-row2 {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  gap: 6px;
  align-items: center;
  padding: 0 14px;
  margin-bottom: 6px;
}

/* 搜索 + 加入购物车 */
.diy-action-row { display: flex; gap: 8px; padding: 0 14px; margin-bottom: 0; }
.search-box {
  flex: 1;
  min-height: 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  color: var(--muted);
  font-size: .8rem;
}
.search-box input { border: none; outline: none; background: none; flex: 1; font-size: .82rem; }
.add-cart-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #1c2624;
  color: #fff;
  font-weight: 700;
  font-size: .86rem;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;              /* i18n：允许在 flex 行内收缩，配合 text-overflow 省略 */
}
.add-cart-btn .ic { flex: 0 0 auto; }   /* 图标不参与压缩 */
.add-cart-btn:disabled { opacity: 1; }

/* 素材库 */
.mat-cats { display: flex; gap: 6px; padding: 0 14px 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.mat-cats::-webkit-scrollbar { display: none; }
/* i18n：越南语分类名约为中文 2 倍宽，Tab 行总宽会超出屏宽（如 390px 下 581px）需横滑。
   右侧加宽渐隐遮罩，明确提示「还有更多可滑动」，避免最后一个 Tab 被硬切而看不出可滑动 */
@media (max-width: 1023.98px) {
  #page-diy .mat-cats {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
    scroll-padding-inline-end: 44px;
  }
}
.mat-cat {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px 8px 0 0;
  font-size: .84rem;
  font-weight: 600;
  position: relative;
  white-space: nowrap;
}
.mat-cat.active { font-weight: 800; }
.mat-cat.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -2px;
  height: 3px; border-radius: 3px; background: var(--red);
}
.mat-lib {
  flex: 1;
  min-height: 0;
  display: flex;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.mat-side {
  background: #fff;
  /* i18n：越南语分类名（如 Thạch anh phantom）比中文长 2 倍，74px 会内部横向溢出，
     故按视口缩放加宽：390px→82px、≥496px→104px 封顶；中文下仅从 74px 微增至 82px，观感基本不变 */
  width: clamp(74px, 21vw, 104px);
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding-right: 8px;
  overflow-y: auto;
  overflow-x: hidden;   /* 长文案由 ellipsis 收敛，禁止侧栏内部横向滚动 */
  padding-bottom: 10px;
}
.mat-side-btn {
  width: 100%;
  text-align: left;
  /* 左右内边距对齐到 8px（原 8px 导致文字贴屏幕左边缘、与右侧网格留白不一致 → “偏左”观感） */
  padding: 9px 8px;
  font-size: .76rem;
  color: var(--accent-soft);
  border-radius: 6px 0 0 6px;
  border-left: 3px solid transparent;
  /* i18n：超长分类名截断为省略号，而非被 overflow 硬切 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mat-side-btn.active { background: var(--bg); color: var(--ink); font-weight: 700; border-left-color: var(--red); }
/* 文档 v2.0 S-01：正在使用 标签（灰色标题 + 已使用材质按钮） */
.mat-side-used-title {
  font-size: .62rem;
  color: var(--muted);
  padding: 4px 8px 2px;
  letter-spacing: .05em;
}
.mat-side-btn.used { color: var(--green); font-weight: 600; }
.mat-side-btn.used.active { background: var(--green); color: #fff; border-left-color: var(--green); }
/* 素材图片网格：flex:1 独立内部滚动（侧栏分类固定，滚动只影响图片区） */
.mat-grid {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 10px;
  padding: 4px 8px calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
}
/* 顶部区域固定（不随素材栏滚动） */
.diy-top, .diy-stage, .diy-tools, .tools-row2, .diy-action-row, #diyCats { flex-shrink: 0; }
.mat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 4px 8px;
  text-align: center;
}
/* 素材库卡片：去边框/背景/阴影（透明卡片）——非矩形配饰（吊坠/跑环）不被矩形框住，直接显示；
   圆珠有 beadStyle 的浅米圆形衬底，照常显示 */
.mat-grid .mat-card {
  background: #fff;
  border: 1px solid rgba(42,42,42,.08);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(42,42,42,.05);
}
.mat-card .bead-thumb {
  width: 46px; height: 46px; border-radius: 50%;
  margin: 0 auto 4px;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.8), rgba(0,0,0,.16));
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,1.6,.4,1);
  position: relative;
}
/* 珠子图标角标：显示已添加数量 */
.mat-card .bead-thumb .bead-qty-mini {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.mat-card .bead-thumb:active { transform: scale(.92); }
.mat-card .bead-thumb.thumb-popping {
  animation: thumbPop .3s cubic-bezier(.2,1.6,.4,1);
}
@keyframes thumbPop {
  0% { transform: scale(1) translateY(0); }
  40% { transform: scale(1.25) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}
.mat-card .n { font-size: .7rem; font-weight: 700; }
.mat-card .meta { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:3px; }
.mat-card .sz { font-size: .6rem; color: var(--muted); }
.mat-card .spec { font-size: .6rem; color: var(--muted); }
.mat-card .ops { display:flex; align-items:stretch; background:#f7f7f7; margin:6px -4px -8px; border-top:1px solid #ececec; border-radius:0 0 12px 12px; height:30px; }
.mat-card .ops .q-btn { flex:1; background:none; border:none; height:100%; font-size:1rem; color:#1c2624; display:flex; align-items:center; justify-content:center; }
.mat-card .ops .q-btn:active { background:#ececec; }
.mat-card .ops-div { width:1px; background:#e4e4e4; align-self:stretch; }


/* ============================================================
   结算预览页
   ============================================================ */
.checkout-ring {
  width: 200px; height: 200px;
  border-radius: 50%;
  margin: 20px auto 10px;
  background: radial-gradient(circle at 50% 32%, #fffdf8, #e3d9c8);
  box-shadow: inset 0 6px 20px rgba(42,42,42,.12);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.checkout-ring .lab { position: absolute; font-size: .9rem; letter-spacing: .3em; color: rgba(42,42,42,.18); font-weight: 800; }
.option-group { margin-bottom: 4px; }
.option-group .opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.option-group .opt:last-child { border-bottom: none; }
.radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--muted);
  flex: 0 0 auto;
}
.option-group .opt.selected .radio { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 44%, transparent 46%); }
.opt-txt { flex: 1; }
.opt-txt .t { font-size: .84rem; font-weight: 600; }
.opt-txt .s { font-size: .72rem; color: var(--muted); }
.opt-fee { font-size: .84rem; font-weight: 700; }
.option-group .opt.selected { background: rgba(79,124,94,.06); border-radius: 10px; }

.red-title { color: var(--red); font-size: .9rem; font-weight: 800; margin: 14px 0 8px; }
.info-list { padding: 4px 0; }
.info-list .row { font-size: .78rem; color: var(--accent-soft); padding: 5px 0; display: flex; align-items: center; gap: 6px; }

.report-table { width: 100%; font-size: .74rem; border-collapse: collapse; margin-top: 6px; }
.report-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.report-table td { padding: 7px 4px; border-bottom: 1px dashed var(--line); }
.report-table .num { text-align: right; }

.checkout-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fffdfa;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
}
.checkout-bar .total { flex: 1; }
.checkout-bar .total .l { font-size: .66rem; color: var(--muted); }
.checkout-bar .total .v { font-size: 1.15rem; font-weight: 800; }
.checkout-bar .btn { min-height: 48px; border-radius: 12px; padding: 0 20px; font-weight: 700; font-size: .86rem; display: flex; align-items: center; justify-content: center; }
.checkout-bar .btn.ghost { background: #f0ece4; }
.checkout-bar .btn.primary { background: var(--accent); color: #fff; }

/* 手围滑块 */
.wrist-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0 6px; }
.wrist-ctrl .num { font-size: 1.6rem; font-weight: 800; width: 90px; text-align: center; }
.wrist-ctrl .num small { font-size: .7rem; color: var(--muted); font-weight: 400; }
.wrist-ctrl .step { width: 34px; height: 34px; border-radius: 50%; background: #f0ece4; font-size: 1.1rem; }
.wrist-slider { width: 100%; accent-color: var(--accent); margin: 6px 0 10px; }
.wrist-scale { display: flex; justify-content: space-between; font-size: .6rem; color: var(--muted); padding: 0 2px; }

/* 进入 DIY 加载动画 */
.loading-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: opacity .4s;
  /* ★ 后备机制：即使脚本未加载/网络异常，也自动淡出，避免首屏一直转圈。
     时长从 .9s 放宽到 6s —— 圆盘图（plate-wood.png 816KB）跨境首访需 1.0~1.5s，
     .9s 会在图还没到就掀开遮罩 → 用户看到"圆盘慢慢显出来"的观感。
     正常情况下由 JS 在「圆盘图 + 首屏素材真正就绪」时调用 closeLoading()
     提前关闭（实测 0.3~1.5s），这个 6s 只是网络异常时的安全兜底。 */
  animation: diyOverlayAutoHide .5s ease 6s forwards;
}
.loading-overlay.done {
  opacity: 0;
  pointer-events: none;
  animation: none;
}
@keyframes diyOverlayAutoHide {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}
/* ★ 加载进度文案：让等待有反馈，避免"卡住了"的错觉 */
.loading-overlay .loading-tip {
  font-size: .74rem; color: var(--muted);
  min-height: 1em;
  transition: opacity .25s;
}
.loading-overlay .logo { font-size: 1.3rem; font-weight: 800; letter-spacing: .1em; }
.loading-overlay .spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 桌面适配 */
@media (min-width: 860px) {
  .page { max-width: 780px; }
  .mat-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ===== 生辰拨轮卡片 ===== */
.bazi-mask { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.bazi-sheet { width: 100%; max-width: 640px; background: var(--bg); border-radius: 20px 20px 0 0; padding: 10px 16px 22px; animation: baziUp .28s ease; box-shadow: 0 -6px 24px rgba(0,0,0,.15); }
/* 居中弹窗：功能指引分页引导 */
/* 底部抽屉：使用指南（移动端） */
.guide-mask { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.guide-modal { width: 100%; max-width: 640px; height: 80vh; max-height: 80vh; background: var(--bg); border-radius: 20px 20px 0 0; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 34px rgba(0,0,0,.24); position: relative; display: flex; flex-direction: column; animation: guideUp .3s cubic-bezier(.2,.8,.3,1); }
@keyframes guideUp { from { transform: translateY(100%); } to { transform: none; } }
.gm-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; flex-shrink: 0; }
.gm-title { font-weight: 800; font-size: 1.15rem; text-align: center; color: var(--ink); }
.guide-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: #eceff3; color: #5a6472; font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.guide-close:hover { background: #e2e5ea; }
.gm-tabs { display: flex; gap: 8px; margin: 10px 2px 12px; flex-shrink: 0; }
.gm-tabs button { flex: 1; padding: 9px 0; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gm-tabs button.active { background: #1c2624; color: #fff; border-color: #1c2624; }
.gm-divider { height: 1px; background: var(--line); margin: 2px 4px 0; flex-shrink: 0; }
.gm-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-top: 20px; }
.gm-card { background: #f5f6f8; border: 1px solid #eef0f2; border-radius: 24px; flex: 1; margin: 0 2px; padding: 18px 18px 22px; text-align: center; display: flex; flex-direction: column; }
.gm-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gm-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #e7e9ed; color: #5a6472; font-size: .72rem; font-weight: 600; }
.gm-page { font-size: .68rem; color: var(--muted); }
.gm-icon { width: 100px; height: 100px; margin: 18px auto 16px; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gm-icon img { width: 72%; height: 72%; object-fit: contain; }
.gm-icon-empty { font-size: .7rem; color: var(--muted); }
.gm-title { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.gm-desc { font-size: .8rem; color: var(--muted); margin: 8px auto 16px; line-height: 1.6; max-width: 260px; }
.gm-dots { display: flex; gap: 5px; justify-content: center; margin-top: auto; }
.gm-dots span { width: 6px; height: 6px; border-radius: 999px; background: #d3d6dd; transition: width .2s, background .2s; }
.gm-dots span.active { width: 20px; background: #1c2624; }
.gm-footer { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; margin-top: 20px; margin-bottom: 64px; flex-shrink: 0; }
.gm-footer .gm-nav-btn { flex: 1; min-height: 46px; padding: 0 16px; border-radius: 999px; background: #1c2624; color: #fff; font-size: .9rem; font-weight: 700; border: none; cursor: pointer; }
.gm-pagefoot { font-size: .86rem; font-weight: 600; color: var(--ink); min-width: 56px; text-align: center; }
@keyframes baziUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.bazi-sex { display: flex; gap: 10px; margin: 4px 0 8px; }
.bazi-sex button { flex: 1; min-height: 42px; border-radius: 999px; background: #f0ece4; font-size: .85rem; font-weight: 600; }
.bazi-sex button.active { background: var(--accent); color: #fff; }
.bazi-wheels { display: flex; justify-content: space-around; gap: 6px; }
.bazi-wheel-col { flex: 1; text-align: center; }
.bazi-wheel-label { font-size: .7rem; color: var(--muted); margin-bottom: 4px; }
.bazi-wheel { height: 144px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; mask-image: linear-gradient(#0000, #000 30%, #000 70%, #0000); -webkit-mask-image: linear-gradient(#0000, #000 30%, #000 70%, #0000); }
.bazi-wheel::-webkit-scrollbar { display: none; }
.bazi-wheel-item { height: 36px; line-height: 36px; scroll-snap-align: center; font-size: .95rem; color: #a8a095; transition: color .15s, transform .15s; }
.bazi-wheel-item.active { color: var(--ink); font-weight: 800; font-size: 1.05rem; }
.bazi-wheel-hint { text-align: center; font-size: .68rem; color: var(--muted); margin: 6px 0 10px; }
.bazi-confirm { width: 100%; min-height: 46px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .95rem; font-weight: 700; }
.bazi-confirm:active { transform: scale(.97); }
/* ===== 能量档案：免责 / 十神 / 圆环图 ===== */
.arch-disclaimer { font-size: .68rem; color: #b0a894; text-align: center; margin-bottom: 8px; }
.arch-shishen { display: flex; gap: 3px; justify-content: center; font-size: .62rem; color: var(--muted); }
.arch-shishen b { font-weight: 700; color: #8a7f6f; }
.arch-donut-wrap { position: relative; margin: 4px auto 6px; width: 150px; height: 150px; }
.arch-donut { width: 100%; height: 100%; }
.arch-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.3; }
.arch-donut-center small { font-size: .62rem; font-weight: 400; color: var(--muted); }
.arch-foot { text-align: center; font-size: .7rem; color: var(--muted); margin: 4px 0 8px; }

/* ===== 桌面独立站形态（≥1024px，移动端零影响） ===== */
/* ⚠ 共享层规则（无媒体查询）：桌面与移动端共用，切勿直接改动——否则会同时影响两端！
   桌面端对 .diy-center 的 flex/relative 覆盖必须在下方 @media(min-width:1024px) 块内、且带 #page-diy 前缀。 */
.desk-only { display: none; }
/* 移动端专属元素：桌面端隐藏（与 .desk-only 对称；桌面端当前冻结，仅移动端上线） */
@media (min-width: 1024px) {
  .mob-only { display: none; }
}
.tool-group { display: contents; }
.diy-main, .diy-center { display: contents; }
/* 移动端行容器：默认 display:contents 隐身 → 子块仍上浮给 .diy-center 绝对定位（桌面零影响）；仅移动块内切成 flex 行 */
.diy-row-fn, .diy-row-act, .diy-row-mg { display: contents; }


/* ===== 移动端（<1024px）DIY 布局：素材库限高约1.5行 + 圆盘区吸收纵向剩余空间（消除底部留白） ===== */
@media (max-width: 1023.98px) {
  /* 素材库限高到约一行多卡片：压缩下方占用，把纵向空间让给上方圆盘（比上一版 26dvh/250px 更矮） */
  /* ===== 移动端两行操作条（功能区+收拢成串 / 搜索框+加购）：由四个竖排块收拢为两行 ===== */
  #page-diy .diy-row-mob { display: contents; }
  /* 行1：功能区（tools-row2 含四个工具钮）+ 收拢成串，水平并排 */
  #page-diy .diy-row-fn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px 0;
  }
  /* 功能区：吃掉行内剩余宽度；工具钮不再换行，压缩到最小 */
  #page-diy .diy-row-fn .tools-row2 {
    /* 按钮间距随屏宽连续缩放：320px→4px（防窄屏溢出）、414px→16px 封顶（大屏更饱满） */
    /* 线性式 34.3vw-120px：375px→8.6px / 390px→13.8px / >=414px→16px */
    display: flex; flex-wrap: nowrap;
    gap: clamp(4px, 34.3vw - 120px, 16px);
    flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
  }
  /* 工具钮尺寸同步连续缩放：320px→43px、414px→54px 封顶（>=1024 锁定 54px，桌面数值不变） */
  /* 线性式 12.8vw+2px：375px→50px / 390px→51.9px / >=407px→54px */
  #page-diy .diy-row-fn .tools-row2 .tool-btn {
    width: clamp(43px, 12.8vw + 2px, 54px);
    height: clamp(43px, 12.8vw + 2px, 54px);
    flex: 0 0 auto;
  }
  #page-diy .diy-row-fn .tool-group { display: contents; }
  /* ===== 测命格长条：独立一行（移动端专属；桌面端用 .desk-only 的 🎁 圆钮，此处未定义保持 display:contents 不占位） ===== */
  #page-diy .diy-row-mg { display: flex; align-items: center; padding: 8px 14px 0; }
  #page-diy .diy-row-mg #diyGift {
    flex: 1 1 auto; width: 100%; height: 42px;
    border-radius: 21px; justify-content: center; gap: 6px;
    font-size: .82rem; font-weight: 700;
    background: #fff; color: var(--ink);
    border: 1px solid #c8c8c8;
    box-shadow: none;
  }
  #page-diy .diy-row-mg #diyGift:active { background: #f4f4f4; }
  #page-diy .diy-row-mg #diyGift .ic { font-size: .95rem; }
  /* 收拢成串：固定宽度（约包裹5字），不伸缩，防与功能区重叠 */
  #page-diy .diy-center #diyGather {
    /* 防御性显式声明定位类（同 search-box）：移动端应 static，杜绝桌面 absolute 定位污染 */
    position: static; top: auto; left: auto; right: auto; bottom: auto;
    transform: none; z-index: auto;
    flex: 0 0 auto; width: auto; white-space: nowrap;
    font-size: .82rem; margin: 0; min-width: 0;
    height: auto;
    padding: 0.9em 1.5em;
    gap: 6px;
    background: #1c2624;
    border-color: #1c2624;
    color: #fff;
  }
  #diyGather .gather-ic { width: 1em; height: 1em; flex-shrink: 0; }
  /* 行2：搜索框（伸缩、缩短）+ 加入购物车（固定宽、比收拢成串多约2字） */
  #page-diy .diy-row-act {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px 8px;
  }
  #page-diy .diy-center .search-box {
    /* 防御性显式声明定位类：移动端本应 static，显式写死不再依赖“桌面 absolute 规则保持在 1024 块内”的隐式前提 */
    position: static; top: auto; left: auto; right: auto; bottom: auto;
    transform: none; z-index: auto;
    flex: 1 1 auto; min-width: 0; margin: 0;
  }
  #page-diy .search-box input { min-width: 0; }
  #page-diy .diy-center .add-cart-btn {
    /* 防御性显式声明定位类 + display：防桌面 #page-diy .add-cart-btn{display:none} 与位置类规则误入移动端 */
    position: static; top: auto; left: auto; right: auto; bottom: auto;
    transform: none; z-index: auto; display: flex;
    flex: 0 0 auto; white-space: nowrap;
    padding: 0 14px; margin: 0; min-width: 0;
  }
  /* ===== i18n 防溢出：越南语按钮文案宽度约为中文 2 倍，需允许收缩+省略而非撑破 ===== */
  /* ① 工具钮：图标禁止被压扁（原先 flex 布局下 SVG 会被三字母标题压变形） */
  #page-diy .diy-row-fn .tools-row2 .tool-btn > * { flex: 0 0 auto; }
  /* ② 收拢成串 / 立即下单：由 flex:0 0 auto（禁止伸缩）改为可收缩 + 文本省略。
     中文 4 字时宽度与原先基本一致，越南语变长时取上限，超长省略而非静默裁切 */
  #page-diy .diy-center #diyGather,
  #page-diy .diy-center .add-cart-btn {
    flex: 0 1 auto;          /* 允许收缩，但不主动抢占（保持原有视觉占比） */
    min-width: 0;            /* 关键：解除 flex 项默认最小内容宽度限制 */
    max-width: 62%;
  }
  #page-diy .diy-center #diyGather > span:not(.gather-ic):not(.ic),
  #page-diy .diy-center .add-cart-btn > span:not(.ic) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* ③ 顶栏第二行：手围提示可收缩省略，优先保住「指南」按钮完整 */
  #page-diy .diy-top .row2 .diy-wrist-hint {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #page-diy .diy-top .row2 .diy-guide { flex: 0 0 auto; }

  #page-diy .mat-lib { flex: 0 1 auto; min-height: 110px; height: clamp(150px, 20dvh, 210px); }
  /* 圆盘区：弹性吸收纵向剩余空间（= 把之前素材库 flex:1 吃掉的空隙归给圆盘区，底部不再留白）。
     舞台盒因此变高，圆盘按宽度保持正圆并在舞台内垂直居中，四周留呼吸空间 */
  #page-diy .diy-stage {
    flex: 0 1 auto;
    /* ★ 原为 min-height: min(86vw,420px) 死撑 420px → 叠加各块后总高溢出
       （实测 954px > 可用 805px），配合 #page-diy 的 overflow:hidden
       会把底部素材库裁掉，观感像"排不出第二行"。
       改为按「屏宽 44vw」与「可用高度」双重约束取小值，圆盘始终正圆可看。 */
    min-height: clamp(150px, 44vw, min(86vw, 420px));
    width: min(86vw, 420px);
    margin: 0 auto 8px;
    aspect-ratio: auto;        /* 舞台盒不受 1:1 限制，由 flex 纵向伸缩 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  /* 圆盘不以舞台高度铺满（否则舞台变高会被拉成椭圆）：独立尺寸、在舞台内垂直居中 */
  #page-diy .diy-stage .plate-wrap {
    position: relative;
    inset: auto;
    margin: 0 auto;
    width: min(86vw, 420px);
    aspect-ratio: 1 / 1;
  }
  /* 撤销按钮：改贴圆盘右下角（按“舞台内居中圆盘”的对称偏移计算），不再受舞台变高下拉偏 */
  #page-diy .diy-stage .diy-undo-corner {
    right: calc((100% - min(86vw, 420px)) / 2 + 2px);
    bottom: 2px;
  }
}
/* 我的订单历史页（#page-myorders） */
#page-myorders { padding-bottom: 20px; }
.order-row { padding: 14px 16px; margin-bottom: 10px; }
.order-row .or-top { display: flex; justify-content: space-between; align-items: center; }
.order-row .or-no { font-weight: 800; font-size: .9rem; letter-spacing: .02em; }
.order-row .or-mid { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.order-row .or-bot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .75rem; color: var(--muted); margin-top: 8px; }
.order-row .tag { padding: 2px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.order-row .tag.status-pending { background: #fdf3e3; color: #c9821a; }
.order-row .tag.status-confirmed { background: #e7f4ff; color: #2f7fd0; }
.order-row .tag.status-producing { background: #eef0ff; color: #5a6bd8; }
.order-row .tag.status-shipped { background: #e9f7ee; color: #2f9a55; }
.order-row .tag.status-done { background: #f0ece4; color: #7a7066; }
.order-row .tag.status-canceled { background: #f4e9e9; color: #c9705e; }

/* 移动端 #inspire：聊天区撑满、输入框贴底（修复输入框跑高） */
@media (max-width: 1023.98px) {
  #page-inspire { display: flex; flex-direction: column; overflow: hidden; }
  #page-inspire .inspire-head { position: static; flex-shrink: 0; }
  #page-inspire .desk-inspire-body { flex: 1; min-height: 0; }
  #page-inspire .ai-chat { height: 100%; min-height: 0; }
}

/* ===== 购物车页(#page-orders)移动端重设计 ===== */
.cart-row { display:flex; align-items:center; gap:12px; padding:14px 14px; margin:0 16px 12px; background:#fff; border:1px solid #e4e4e4; border-radius:14px; }
.cart-check { appearance:none; -webkit-appearance:none; width:22px; height:22px; border-radius:50%; border:1.5px solid #cfc4b6; background:#fff; flex-shrink:0; cursor:pointer; display:inline-block; position:relative; margin:0; }
.cart-check:checked { background:#4e8a58; border-color:#4e8a58; }
.cart-check:checked::after { content:''; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.cart-thumb { width:86px; height:86px; border-radius:12px; background:#f3ede3; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-thumb .ph { font-size:1.6rem; }
.cart-thumb .dot { width:36px; height:36px; border-radius:50%; box-shadow:inset -2px -3px 5px rgba(0,0,0,.18); }
.cart-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.cart-name-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cart-name { font-weight:800; font-size:1rem; color:#1c2624; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-meta { font-size:.68rem; color:var(--muted); margin-top:5px; line-height:1.5; }
.cart-tag { display:inline-block; align-self:flex-start; font-size:.7rem; padding:3px 10px; border-radius:8px; background:#f6f1e8; color:#6b6357; margin-top:6px; }
.cart-price { font-size:1rem; font-weight:800; color:#1c2624; margin-top:6px; }
.cart-del { align-self:flex-start; border:none; background:none; color:#cfc4b6; font-size:1rem; cursor:pointer; padding:2px; }
.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100dvh - var(--tabbar-h) - 200px); text-align:center; color:#9b9b9b; }
.cart-empty .big { font-size:2.5rem; margin-bottom:6px; color:#1c2624; }
.cart-empty p { font-size:.86rem; line-height:1.8; }
.order-bar { display:flex; align-items:center; gap:12px; background:none; border:none; box-shadow:none; }
.ob-card { display:grid; grid-template-columns:1fr auto 1fr; flex:1; align-items:center; column-gap:12px; background:#fff; border:1px solid #e6e6e6; border-radius:16px; padding:12px 14px; }
.ob-card .ob-left { justify-self:start; }
.ob-card .ob-div { justify-self:center; }
.ob-card .ob-sum { justify-self:end; }
.ob-div { width:1px; height:18px; background:#e6e6e6; flex-shrink:0; }
.ob-left { display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:#1c2624; cursor:pointer; white-space:nowrap; }
.ob-left input { width:20px; height:20px; margin:0; }
.ob-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.ob-sum { display:flex; flex-direction:column; color:#1c2624; font-size:.8rem; line-height:1.15; text-align:right; }
.ob-sum .ob-label { font-size:.66rem; color:var(--muted); }
.ob-sum b { color:#1c2624; font-size:1.15rem; font-weight:800; }
.ob-pay { padding:11px 24px; border-radius:999px; background:#1c2624; color:#fff; font-weight:700; font-size:.9rem; border:none; cursor:pointer; }
.ob-pay:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:1023.98px) {
  #page-orders .cart-m-head { padding:30px 16px 0; }
  #page-orders .cart-m-title { text-align:center; font-size:1.6rem; font-weight:800; color:#1c2624; }
  #page-orders .cart-subtitle { text-align:center; font-size:.82rem; color:#9b9b9b; margin:6px 0 0; }
  #page-orders #orderBar { position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-h) + 14px); z-index:60; }
  #page-orders .order-bar { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  #page-orders #ordersList { padding-bottom:calc(var(--tabbar-h) + 88px) !important; }
}

#page-diy .native-menu { display: none; }
/* ===== DIY 移动端功能区：尺子/缩短/放大 ===== */
#page-diy .diy-row-fn #diyWristBtn { flex:1 1 auto; max-width:60%; font-size:.74rem; padding:0 10px; min-width:0; }
#page-diy .diy-row-fn #diyWristBtn .wrist-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-diy .diy-row-fn #diyPlateSwitch,
#page-diy .diy-row-fn #diyClear,
#page-diy .diy-row-fn #diySave { width:76px; height:76px; font-size:2rem; }
#page-diy .diy-stage { flex: 0 1 auto; }
#page-diy .diy-row-fn { padding-top: 2px; }
#page-diy .mat-lib { flex: 1 1 auto; min-height: 170px; height: auto; }
/* ===== DIY 移动端功能区微调 ===== */
/* 工具钮改为随屏宽连续缩放（320px→43px、>=407px→54px）；上限 54px 保证桌面数值与改造前完全一致 */
#page-diy .diy-row-fn #diyPlateSwitch,
#page-diy .diy-row-fn #diyClear,
#page-diy .diy-row-fn #diySave { width:clamp(43px, 12.8vw + 2px, 54px); height:clamp(43px, 12.8vw + 2px, 54px); border-radius:50%; font-size:1.5rem; }
#page-diy .diy-row-fn #diyWristBtn { width:clamp(43px, 12.8vw + 2px, 54px); height:clamp(43px, 12.8vw + 2px, 54px); border-radius:50%; flex:0 0 auto; padding:0; font-size:1.5rem; }
#page-diy .diy-row-fn #diyWristBtn .wrist-text { display:none; }   /* 只留尺子图标；数值在顶部「建议净手围」显示 */
/* ===== 分类 Tab：375px 窄屏下 6 个 tab 总宽 > 屏宽，居中会把「五行推荐」挤出右侧
   → 改为左对齐从 14px 起，允许横向滑动（.mat-cats 已是 overflow-x:auto） ===== */
#page-diy .mat-cats { justify-content: flex-start; padding-left: 14px; }
#page-diy .mat-cat { padding: 0 12px; font-size: .8rem; }
/* ===== 左侧筛选栏：随屏宽缩放以容纳越南语（比中文长 2 倍）=====
   原为固定 74px + 左右内边距 3px/4px：中文 2~3 字够用，但越南语如
   「Th.anh phantom」(97px)、「Tất cả Thạch anh」(102px) 会在侧栏内部横向溢出 → 文字被硬切。
   改为 clamp(74px, 21vw, 104px)：390px→82px、≥496px→104px；中文下仅微增，观感基本不变。
   内边距 3px→8px：与右侧素材网格的 8px 留白对齐，消除「文字贴屏幕左边缘」的偏左观感。 */
#page-diy .mat-side {
  flex: 0 0 auto; width: clamp(74px, 21vw, 104px); min-width: 0; padding-right: 8px;
}
#page-diy .mat-side-btn {
  white-space: nowrap; padding: 9px 6px; font-size: .72rem;
  overflow: hidden; text-overflow: ellipsis;   /* 超长分类名省略号收敛，不再被硬切 */
}
#page-diy .mat-side-used-title { padding: 4px 6px 2px; }
/* ===== 素材库高度：更大但不过长 ===== */
#page-diy .mat-lib {
  flex: 0 1 auto;
  min-height: 150px;
  height: clamp(180px, 27dvh, 300px);
}
/* ===== 素材卡等宽：防内容撑宽列 ===== */
.mat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mat-card { min-width: 0; }
.mat-card .n { word-break: break-all; }
.mat-card .meta { min-width: 0; flex-wrap: wrap; }
/* ===== 素材卡统一高度：单行 + 固定高 ===== */
.mat-card .n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat-card .meta { white-space:nowrap; }
.mat-grid .mat-card { height: 118px; }
/* ===== DIY 页素材网格：去掉 TabBar 预留底部留白 ===== */
#page-diy .mat-grid { padding-bottom: 8px; }
/* ===== 素材库：贴合内容 + 浅灰圆角底(去底部白条) ===== */
#page-diy .mat-lib {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
}
/* ===== 素材库：滚动静止修复(占剩余高度+内部滚动) ===== */
#page-diy .mat-lib {
  flex: 1 1 auto;
  min-height: 120px;
  height: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}
#page-diy .mat-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* ===== 搜索/分类空态：问号 + 居中提示 ===== */
#page-diy .mat-grid:empty { min-height: 170px; align-content: center; }
#page-diy .mat-grid:empty::before {
  content: '?';
  grid-column: 1 / -1;
  justify-self: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid #d9d4ca;
  display: flex; align-items: center; justify-content: center;
  color: #c9c2b8; font-size: 1.5rem; font-weight: 700;
  background: transparent;
}
#page-diy .mat-grid:empty::after {
  content: '此系列暂无珠子';
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 10px;
  color: #b3aca1; font-size: .82rem;
}
/* ===== 加减按钮禁用态变灰 ===== */
.mat-card .ops .q-btn:disabled { color:#c9c9c9; background:#f0f0f0; cursor:not-allowed; }
/* ===== 登录 / 注册抽屉 ===== */
#loginSheet .lg-tabs { display:flex; gap:8px; margin-top:4px; }
#loginSheet .lg-tabs button { flex:1; min-height:40px; border-radius:999px; background:#f0ece4; border:1px solid var(--line); color:var(--ink); font-size:.85rem; font-weight:700; cursor:pointer; }
#loginSheet .lg-tabs button.active { background:#1c2624; color:#fff; border-color:#1c2624; }
#loginSheet .lg-input { width:100%; box-sizing:border-box; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:#fff; font-size:.85rem; margin-bottom:10px; outline:none; }
#loginSheet .lg-input:focus { border-color:#1c2624; }
#loginSheet .lg-submit { width:100%; min-height:46px; border-radius:999px; background:#1c2624; color:#fff; font-weight:700; font-size:.9rem; border:none; cursor:pointer; margin-top:4px; }
#loginSheet .lg-submit:disabled { opacity:.5; }
#loginSheet .lg-tip { font-size:.72rem; color:var(--muted); text-align:center; margin-top:12px; line-height:1.6; }
/* ===== #mine 登录用户卡：顶部信息 + 下方4个快速入口 ===== */
#page-mine #mineUserCard { flex-direction:column; align-items:stretch; gap:10px; }
#page-mine #mineUserCard .mine-quick { display:flex; justify-content:space-between; padding-top:12px; border-top:1px solid #ececec; }
#page-mine #mineUserCard .mq-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; color:#1c2624; font-size:.72rem; }
#page-mine #mineUserCard .mq-ico { width:44px; height:44px; border-radius:50%; background:#f4f3ef; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
/* ===== #mine 账号设置 / 退出登录 ===== */
#page-mine #mineUserCard { flex-direction:column; align-items:stretch; gap:10px; }
#page-mine #mineUserCard .uc-top { display:flex; align-items:center; gap:12px; }
#page-mine #mineUserCard .mine-quick { display:flex; justify-content:space-between; padding-top:12px; border-top:1px solid #ececec; }
#page-mine #mineUserCard .mq-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; color:#1c2624; font-size:.72rem; }
#page-mine #mineUserCard .mq-ico { width:44px; height:44px; border-radius:50%; background:#f4f3ef; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.logout-btn { width:100%; min-height:44px; border-radius:999px; background:#fff; border:1px solid #e0e0e0; color:#c0392b; font-weight:700; font-size:.88rem; cursor:pointer; }
.logout-btn:active { transform:scale(.98); }
#accountSheet .acct-head { margin-bottom:16px; }
#accountSheet .acct-head .uc-top { display:flex; align-items:center; gap:12px; }
/* ===== 个人资料页 #page-profile ===== */
#page-profile .brand.center { flex:1; text-align:center; }
#page-profile .prof-body { padding: 14px 16px 120px; }
#page-profile .card { padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; border:1px solid #ececec; }
#page-profile .prof-head { font-weight:800; font-size:.95rem; margin-bottom:10px; }
#page-profile .card-title { font-weight:800; font-size:.95rem; margin-bottom:10px; text-align:left; }
#page-profile .prof-line { display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:.88rem; }
#page-profile .prof-line b { font-weight:700; }
#page-profile .avatar-btn { width:56px; height:56px; border-radius:50%; background:#f4f3ef; border:none; display:flex; align-items:center; justify-content:center; font-size:1.4rem; cursor:pointer; }
#page-profile .prof-tip { font-size:.72rem; color:var(--muted); margin-top:8px; line-height:1.6; }
#page-profile .prof-actions { display:flex; gap:10px; margin-top:20px; }
#page-profile .prof-btn { flex:1; min-height:46px; border-radius:999px; font-weight:700; font-size:.9rem; cursor:pointer; }
#page-profile .prof-btn.ghost { background:#fff; color:#1c2624; border:1px solid #e0e0e0; }
#page-profile .prof-btn.solid { background:#1c2624; color:#fff; border:1px solid #1c2624; }
/* ===== #profile 按钮沉底 + 隐藏黑猫 ===== */
#page-profile .prof-actions {
  position: fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid #ececec;
}
#page-profile .prof-body { padding-bottom: 120px; }
/* ===== #profile 编辑态 ===== */
#page-profile .prof-input {
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px;
  font-size:.88rem; text-align:right; width:58%; box-sizing:border-box; color:#1c2624;
}
#page-profile .prof-line select.prof-input { text-align:left; }
#page-profile .prof-line .prof-input:focus { outline:2px solid #d8c89a; }
#page-profile .prof-avatar-img { width:56px; height:56px; border-radius:50%; object-fit:cover; }
/* ===== 我的 头像图 ===== */
.avatar-lg-img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
/* ===== #profile 去按压高亮/阴影/弹跳 ===== */
#page-profile button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
#page-profile .prof-btn, #page-profile .avatar-btn, #page-profile .prof-pick { box-shadow: none; }
#page-profile .card:active, #page-profile .prof-btn:active, #page-profile .avatar-btn:active, #page-profile .diy-back:active, #page-profile .prof-pick:active { transform: none; }
#page-profile .prof-pick {
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px;
  font-size:.88rem; text-align:right; width:58%; box-sizing:border-box; color:#1c2624;
}
/* ===== 性别抽屉选项 ===== */
.picker-options { display:flex; flex-direction:column; gap:10px; padding:6px 0 14px; }
.picker-opt {
  width:100%; min-height:46px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:#1c2624;
  font-size:.92rem; font-weight:600; cursor:pointer;
}
.picker-opt:active { background:#f4f3ef; }
/* ===== 生日滚轮 ===== */
.birth-picker { display:flex; gap:10px; }
.birth-col {
  flex:1; height:180px; overflow-y:auto;
  scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  background:#f7f7f5; border-radius:12px; padding:70px 0; box-sizing:border-box;
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
}
.birth-item { height:40px; line-height:40px; text-align:center; font-size:.92rem; color:#8a8a8a; scroll-snap-align:center; cursor:pointer; }
.birth-item.cur { color:#1c2624; font-weight:700; font-size:1.05rem; }
/* ============================================================
   #designs 改版：去分割线 / 两卡片上下排列 / DIY 按钮
   ============================================================ */
#page-designs .topbar { border-bottom: none; }
#page-designs #designsList { padding: 4px 14px 8px; display:flex; flex-direction:column; gap:12px; }
#page-designs #designsList .card { margin:0; }
.dsn-summary { text-align:center; }
.dsn-summary .dsn-ic { color:var(--accent); }
.dsn-summary .dsn-title { font-size:1.02rem; font-weight:800; margin-top:6px; color:var(--ink); }
.dsn-summary .dsn-desc { font-size:.76rem; color:var(--muted); margin-top:6px; line-height:1.6; }
.dsn-summary .dsn-count { font-size:.74rem; color:var(--ink); margin-top:8px; }
.dsn-list { padding:0; overflow:hidden; }
.dsn-list .dsn-list-head { padding:12px 14px 4px; font-size:.9rem; font-weight:800; color:var(--ink); }
.dsn-list .designs-grid { padding:6px 14px 16px; }
.dsn-list .empty-state { padding:36px 20px 40px; }
.dsn-godiy {
  display:block; width:calc(100% - 28px); margin:8px auto 24px; max-width:420px;
  min-height:50px; border:none; border-radius:12px; background:var(--accent); color:#fff;
  font-size:.94rem; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.dsn-godiy:active { opacity:.9; }
/* ============================================================
   #myorders 改版：去导航/去分割线/去三点/标题居中 + 筛选 tabs + 空态
   ============================================================ */
#page-myorders .topbar { border-bottom:none; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; }
#page-myorders .topbar .diy-back { justify-self:start; }
#page-myorders .topbar .brand { font-size:1rem; font-weight:700; justify-self:center; }
#page-myorders .native-menu { display:none; }
#page-myorders .order-tabs { display:flex; gap:6px; padding:10px 14px 0; }
#page-myorders .order-tabs .ot {
  flex:1; height:34px; min-width:0; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:#1c2624; font-size:.82rem; font-weight:600; cursor:pointer;
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
#page-myorders .order-tabs .ot.active { background:#1c2624; color:#fff; border-color:#1c2624; }
#page-myorders #myordersList { padding:12px 14px 24px; }
#page-myorders .empty-state.card { background:#fff; border:1px solid #eceae4; text-align:center; }
#page-myorders .empty-state p { color:#b5aca1; }
/* ===== 桌面：工具列长胶囊 + 独立返回圆钮 ===== */
  #page-diy .desk-back-fab {
    position: fixed;
    left: calc(50% + 205.5px + 140px);
    top: calc(50% + 118px);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 20px rgba(42,42,42,.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--ink);
    cursor: pointer; z-index: 20;
    -webkit-tap-highlight-color: transparent;
  }
  #page-diy .desk-back-fab:hover { background: rgba(42,42,42,.06); }
/* ===== 桌面：#custom 筛选与移动对齐（居中显示） ===== */

/* ===== 桌面：首页轮播 Banner 全屏宽 + 加大 ===== */

/* ===== DIY 珠子影子优化：去掉独立影子子层(治拖影)，改用 drop-shadow 随珠子同帧同步 ===== */
.bead-el .bead-img-shadow { display: none; }
#diyPlateInner .bead-el { filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
#diyPlateInner .bead-el .bead-img { filter: none; }

/* ===== 飞入动画「隐形」兜底（2026-09-18 fix8） =====
   背景：珠子的物理圆默认 background:transparent（因为真实外观由独立 <img> 层显示），
        而 <img> 的贴图在慢网/首次加载时要 200~800ms 才到达。
        fix7 之前 crossOrigin 写在 src 之后会强制作废缓存重载，把这段空窗拉到最长，
        导致飞入动画前半程珠子完全透明 → 用户以为"动画被吞了"。
        JS 侧已删除 crossOrigin（根因）；本规则是纯兜底：贴图未就绪期间，
        给物理圆一层同色系底色，保证任何网络条件下"有东西在飞"。
      图 load 后 JS 立即移除 .bead-img-pending → 颜色消失，恢复纯贴图，视觉零变化。
   注意：只作用于盘内珠子（#diyPlateInner），不影响素材卡/方案预览。
   必须用 !important：物理圆的基础外观由 beadPhysicsStyle() 写成 inline style
   （有图时 background:transparent），inline 优先级高于本文件里的任何选择器，
   只有 !important 能覆盖。class 移除后 inline 值自动重新生效，无残留。 */
#diyPlateInner .bead-el.bead-img-pending {
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(0,0,0,.10)), #cfc6bb !important;
  box-shadow: inset -3px -5px 8px rgba(0,0,0,.20) !important;
}
/* ===== 移动端：素材库固定显示两行卡片（对小屏友好） ===== */
@media (max-width: 1023.98px) {
  #page-diy .mat-lib { min-height: 236px; height: clamp(248px, 34dvh, 320px); flex: 1 1 auto; }
  #page-diy .mat-grid { align-content: start; }
  #page-diy .mat-grid .mat-card { height: 118px; }
}
/* ===== 灵感页筛选：双tab + 横向丝滑卡片 ===== */
#page-custom .cf-tabs { display:flex; gap:10px; padding:6px 0 4px; }
#page-custom .cf-mode { flex:1; height:40px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#3a3530; font-size:.88rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s,color .2s,border-color .2s; }
#page-custom .cf-mode.active { background:#1c2624; color:#fff; border-color:#1c2624; }
#page-custom .cf-slider { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 2px 12px; scrollbar-width:none; opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease; }
#page-custom .cf-slider::-webkit-scrollbar { display:none; }
#page-custom .cf-slider.slider-in { opacity:1; transform:none; }
#page-custom .cf-bubble { flex:1 1 0; min-width:54px; height:66px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.05); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; scroll-snap-align:center; transition:border-color .2s, background .2s; }
#page-custom .cf-bubble .el-name { font-size:.9rem; font-weight:800; color:#3a3530; }
#page-custom .cf-bubble .el-dot { width:10px; height:10px; border-radius:50%; }
#page-custom .cf-bubble.active { border-color:#1c2624; background:#f7f5f0; }
#page-custom .cf-zcard { flex:0 0 84px; height:66px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.05); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; scroll-snap-align:center; transition:border-color .2s, background .2s; }
#page-custom .cf-zcard .z-en { font-size:.72rem; font-weight:800; letter-spacing:.04em; color:#3a3530; text-transform:uppercase; }
#page-custom .cf-zcard .z-zh { font-size:.66rem; color:#a89a8a; }
#page-custom .cf-zcard.active { border-color:#1c2624; background:#f7f5f0; }
/* ===== 灵感页作品卡：实拍封面图 + 名字居中（原 2D 圆盘/价格已移除） ===== */
.design-card { position: relative; margin-bottom: 12px; break-inside: avoid; border-radius: 12px; overflow: hidden; cursor: pointer; background: none; border: none; box-shadow: none; }
.design-card:active { transform: scale(.98); }
.design-card .cover { width:100%; height:auto; background:#f2f0ea; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.design-card .work-cover { width:100%; height:auto; display:block; }
.design-card .cover-ph { aspect-ratio:3/4; width:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; color:#b5aca1; font-size:1rem; font-weight:700; letter-spacing:.05em; }
.design-card .meta { position:static; display:block; text-align:left; margin:0; border:none; background:none; padding:6px 4px 2px; }
.design-card .meta .name { color:var(--ink); font-size:.8rem; font-weight:700; }
/* ===== 首页热门推荐：封面图横滑 + 商品详情 ===== */
.home-hot .home-hot-thumb { width:150px; height:150px; border-radius:12px; overflow:hidden; background:#f2f0ea; display:flex; align-items:center; justify-content:center; }
.home-hot .home-hot-img { width:100%; height:100%; object-fit:cover; display:block; }
.home-hot .home-hot-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:#b5aca1; font-size:.8rem; font-weight:700; padding:8px; }
/* ===== 首页热门推荐：3:4 竖版长图（去文字） ===== */
#homeHot .home-hot { flex: 0 0 132px; padding:0; border:none; box-shadow:none; text-align:left; }
#homeHot .home-hot-thumb { width:132px; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:#f2f0ea; display:flex; align-items:center; justify-content:center; position:relative; }
#homeHot .home-hot-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#homeHot .home-hot-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:#b5aca1; font-size:.8rem; font-weight:700; padding:8px; }
/* ===== DIY 圆盘右上角：礼物盒按钮（与撤回对称） ===== */
#page-diy .diy-stage .diy-gift-corner { position: absolute; left: calc((100% - min(86vw, 420px)) / 2 + 2px); bottom: 2px; z-index: 6; font-size: 1.2rem; }
/* ===== 命格弹窗（阶段②） ===== */
#minggeSheet { background: var(--bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mg-body { padding: 4px 18px 24px; max-height: 70vh; overflow:auto; }
/* 命格弹窗：居中 modal + 背景打码虚化 */
#minggeSheet { background: rgba(30,30,30,.22); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
.mg-modal { width: min(92vw, 420px); border-radius: 18px; padding: 18px 18px 14px; max-height: 84vh; overflow:auto; box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.mg-modal .mg-body { padding: 4px 0 12px; max-height: none; }

.mg-t { font-size: .95rem; font-weight: 800; text-align:center; margin: 4px 0 12px; }
.mg-birth { display:flex; gap:10px; margin-bottom:16px; }
.mg-birth select { flex:1; height:44px; border:1px solid var(--line); border-radius:10px; padding:0 10px; font-size:.9rem; background:#fff; }
.mg-btn { width:100%; height:48px; border:none; border-radius:12px; font-size:.94rem; font-weight:700; cursor:pointer; margin-top:4px; }
.mg-ok { background:#1c2624; color:#fff; }
.mg-diy { background:#1c2624; color:#fff; }
.mg-cards { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:8px 0 14px; scrollbar-width:none; }
.mg-cards::-webkit-scrollbar { display:none; }
.mg-card { flex:0 0 100%; scroll-snap-align:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 16px; box-shadow:0 8px 24px rgba(0,0,0,.08); min-height:210px; }
.mg-card .mgc-title { font-size:1.05rem; font-weight:800; margin-bottom:8px; }
.mg-card .mgc-sub { font-size:.8rem; color:var(--muted); margin-bottom:10px; }
.mg-card .mgc-big { font-size:1.6rem; font-weight:800; text-align:center; margin:8px 0; }
.mg-card .mgc-line { font-size:.82rem; line-height:1.7; color:var(--ink); }
.mg-card .mgc-tag { display:inline-block; background:#f7f3ea; border:1px solid #e6dccb; border-radius:8px; padding:4px 8px; font-size:.72rem; margin:2px 4px 2px 0; color:#7a7066; }
.mg-tri { position:relative; width:200px; height:180px; margin:14px auto; }
.mg-tri .tr { position:absolute; width:16px; height:16px; border-radius:50%; background:#c9a26a; box-shadow:0 0 12px rgba(201,162,106,.9); animation:mgBlink 1.6s ease-in-out infinite; }
.mg-tri .tr1{left:92px;top:2px;} .mg-tri .tr2{left:8px;top:140px;} .mg-tri .tr3{left:176px;top:140px;}
.mg-tri .tl { position:absolute; font-size:.68rem; font-weight:700; transform:translate(-50%,0); }
.mg-tri .tl1{left:100px;top:22px;} .mg-tri .tl2{left:16px;top:162px;} .mg-tri .tl3{left:184px;top:162px;}
@keyframes mgBlink { 0%,100%{box-shadow:0 0 10px rgba(201,162,106,.8);} 50%{box-shadow:0 0 20px rgba(201,162,106,1);} }
/* 命格卡：单卡 + 左右箭头 */
.mg-cards { display:flex; align-items:center; gap:8px; margin:8px 0 14px; }
.mg-nav { flex:0 0 34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; color:#3a3530; font-size:1.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.mg-slot { flex:1; min-width:0; }
.mg-slot .mg-card { min-height:0; box-shadow:none; border:1px solid var(--line); border-radius:14px; padding:14px 12px; }
/* ===== #custom 不等高瀑布流（小红书）+ 名字左下角 ===== */
#customGrid .waterfall { display:block; columns:2; column-gap:12px; }


/* 卡片角标已移除（核心/左辅/右辅、用神/相生） */
/* .bead-role 角标已移除（卡片右上角不再显示 核心/左辅/右辅、用神/相生） */

/* ---------- 立即下单弹窗（隐私 / 售后 + Zalo 客服） ---------- */
.order-modal { max-height: 82vh; overflow-y: auto; }
.order-modal .ord-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.order-modal .ord-title { font-size: .86rem; font-weight: 800; margin-bottom: 6px; }
.order-modal .ord-body { font-size: .78rem; line-height: 1.75; color: var(--accent-soft); }
.order-modal .btn.primary { width: 100%; }
.order-modal .ord-zalo { background: var(--bg); border-radius: 12px; padding: 16px; text-align: center; margin-top: 14px; }
.order-modal .ord-zalo-title { font-size: .9rem; font-weight: 800; }
.order-modal .ord-zalo-note { font-size: .72rem; color: var(--muted); margin: 4px 0 12px; }
.order-modal .qr-code { width: 140px; height: 140px; margin: 0 auto; background: #fff; border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.order-modal .qr-code img { width: 100%; height: 100%; object-fit: contain; display: block; }
.order-modal .qr-note { font-size: .7rem; color: var(--muted); margin-top: 8px; }

/* ---------- 命格筛选提示条（素材库） ---------- */
.mg-tip { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 7px 12px; background: var(--bg); border: 1px solid #9a9a9a; border-radius: 10px; font-size: .72rem; color: var(--ink); }
.mg-tip[hidden] { display: none; }
.mg-tip b { color: #b8874a; }
.mg-tip-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-tip button { margin-left: auto; flex-shrink: 0; background: #ffffff; border: 1px solid #9a9a9a; border-radius: 8px; padding: 3px 10px; font-size: .7rem; color: #1a1a1a; cursor: pointer; }
/* .bead-role.sheng 已随角标移除 */

/* ---------- 命格推荐：独立素材库副本 ---------- */
.mat-cats[hidden], .mat-lib[hidden], .mg-lib[hidden], .mat-side[hidden], .mat-grid[hidden] { display: none !important; }
.mg-legend { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.mg-legend span { font-size: .68rem; padding: 4px 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); text-align: center; }
.mg-legend .mg-lg-0 { border-color: rgba(192,57,43,.35); color: #c0392b; font-weight: 700; }
.mg-legend .mg-lg-1 { border-color: rgba(192,57,43,.22); color: var(--ink); }

/* ---------- 命格视图：未测命格居中引导 ---------- */
/* 注意：.mat-grid 是 3 列 grid，空态必须跨列（grid-column: 1 / -1）才能真正居中 */
.mg-empty {
  grid-column: 1 / -1;          /* 跨满所有列，否则被塞进第 1 格 → 看起来挤在左边 */
  display: flex;
  flex-direction: column;
  align-items: center;          /* 横向居中 */
  justify-content: center;      /* 纵向居中 */
  text-align: center;
  gap: 12px;
  width: 100%;
  min-height: 32vh;
  padding: 12px 16px 40px;
  margin-top: -8px;
  box-sizing: border-box;
}
.mg-empty-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .02em;
}
.mg-empty-sub {
  font-size: .78rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 260px;             /* 限宽 → 左右对称留白，不贴边 */
  margin: 0 auto;
}
.mg-empty .btn {
  margin-top: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: .82rem;
}

/* 未测命格：黑底白字按钮 + 前置占位方格 */
.mg-empty-btn { background:#1c2624 !important; color:#fff !important; border-color:#1c2624 !important; display:inline-flex; align-items:center; gap:8px; }
.mg-empty-btn:active { opacity:.85; }
.mg-empty-btn .ic-slot { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.4); border-radius:5px; font-size:.66rem; line-height:1; }

/* ---------- 使用帮助（图片）弹窗 ---------- */
.help-img-modal { position: relative; padding: 0; overflow: hidden; max-width: 92vw; }
/* 关闭按钮浮在图片右上角：半透明黑圆底 + 白 ✕ */
.help-img-modal h3 { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 2; justify-content: flex-end; }
.help-img-modal h3 .x { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; padding: 0; }
.help-img-box { max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 0; background: var(--bg); }
.help-img-box img { width: 100%; display: block; border-radius: 0; }

/* ==========================================================================
   ★★★ DIY 页纵向溢出修复（素材库看不见完整卡片的最终收敛块） ★★★
   --------------------------------------------------------------------------
   问题现象：手机上素材库只露出半截卡片，观感像「只排得下一列/一行」。
   实测根因（Chrome CDP，500px 视口）：
     vh=805  →  #page-diy 高度 805（height:100dvh + overflow:hidden）
     内容实测总高 pageScrollH=954  →  溢出 149px 被硬裁
     素材库 libTop=718、libH=235 → libBottom=954，底部 149px 完全在视口外
   成因：.diy-stage 用 min-height: min(86vw,420px) 在移动端强制占满 420px，
        小块高度之和 > 可用高度时，overflow:hidden 直接裁掉最后的素材库。
   修复策略（放在文件末尾，确保覆盖前面所有 #page-diy 规则）：
     1) 舞台高度改为「随视口高度收缩」：dvh + clamp，并允许 flex 压缩；
     2) 素材库固定占据至少一行卡片的高度，且始终可内部滚动；
     3) TabBar 为悬浮式（position:fixed），不再额外预留底部空间。
   ========================================================================== */
@media (max-width: 1023.98px) {
  /* 舞台：高度 = 圆盘直径（保证正圆）。直径受屏宽与视口高度双重约束：
       - 屏宽：86vw（手机 390px → 335px）
       - 视口高度：36dvh（给工具行/分类/素材库留足空间，避免总高溢出被裁）
     取较小值 → 圆盘永远正圆；各块高度之和 ≤ 100dvh，素材库底部不再被裁。 */
  #page-diy .diy-stage {
    flex: 0 1 auto;
    min-height: min(86vw, 420px, 34dvh);
    height: min(86vw, 420px, 34dvh);
    margin-bottom: 4px;
    align-items: center;
  }
  #page-diy .diy-stage .plate-wrap {
    /* ★ 正圆保证：尺寸 = min(屏宽 86vw, 420px, 舞台高度)。
       关键是用 min-height/width 同时约束，避免 flex 拉伸把圆盘变成椭圆。
       舞台高度已按 36dvh 封顶 → 圆盘在矮屏上等比缩小而非被压扁。 */
    position: relative;
    inset: auto;
    margin: 0 auto;
    width: min(86vw, 420px, 34dvh);
    height: min(86vw, 420px, 34dvh);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }
  /* 素材库：吃掉剩余高度，但下限保证完整一行卡片可见 */
  #page-diy .mat-lib {
    flex: 1 1 auto;
    min-height: 158px;
    height: auto;
  }
  #page-diy .mat-grid {
    flex: 1 1 auto;
    min-height: 136px;   /* 118px 卡片 + 上下 8px 内边距 → 完整一行 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* 极短屏（横屏手机 / 小窗 / Safari 地址栏占位）：进一步压缩圆盘，优先保证素材库可用。
   实测（500px 视口）：可视高 545px 时各块实测
     diy-top 84 + 中部(圆盘/工具行) 308 + 分类行 44 + 素材库 142 = 578 > 545（溢出 33px）
   → 圆盘再收一档，把 33px 让给素材库，保证卡片完整可见。 */
@media (max-width: 1023.98px) and (max-height: 700px) {
  #page-diy .diy-stage {
    min-height: min(56vw, 310px, 24dvh);
    height: min(56vw, 310px, 24dvh);
  }
  #page-diy .diy-stage .plate-wrap {
    width: min(56vw, 310px, 24dvh);
    height: min(56vw, 310px, 24dvh);
  }
  #page-diy .mat-lib { min-height: 136px; }
  #page-diy .mat-grid { min-height: 116px; }
  /* 工具行/搜索行在矮屏上收紧纵向间距 */
  #page-diy .diy-row-fn { padding-top: 2px; }
  #page-diy .diy-row-act { margin-top: 2px; }
}
/* 超短屏（横屏）：圆盘进一步缩小，素材库保持可用 */
@media (max-width: 1023.98px) and (max-height: 560px) {
  #page-diy .diy-stage {
    min-height: min(48vw, 260px, 22dvh);
    height: min(48vw, 260px, 22dvh);
  }
  #page-diy .diy-stage .plate-wrap {
    width: min(48vw, 260px, 22dvh);
    height: min(48vw, 260px, 22dvh);
  }
  #page-diy .mat-lib { min-height: 130px; }
  #page-diy .mat-grid { min-height: 110px; }
  #page-diy .diy-row-fn { padding-top: 1px; }
  #page-diy .diy-row-act { margin-top: 1px; }
}