@charset "utf-8";
/* 组件层：选项卡、价格区、分段、弹窗、表单、toast
 * 由 styles.css 拆分而来（W1 目录重构）；颜色一律使用 tokens.css / themes.generated.css 中的变量。
 */

.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:999px;padding:7px 15px;font-size:13px;transition:.2s;
}
.btn-ghost:hover{color:var(--primary-hi);border-color:var(--primary)}
.recap{display:flex;flex-wrap:wrap;gap:8px;min-height:32px;margin-bottom:14px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-soft);background:var(--panel-2);
  border-radius:999px;padding:5px 12px;font-size:12px;color:var(--text);
}
.chip b{color:var(--primary-hi);font-weight:600}
.chip-dot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid color-mix(in srgb, var(--text) 25%, transparent)}

.pricebox{border-top:1px dashed var(--line);padding-top:14px}
.pricebox-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.price-label{font-size:12px;color:var(--mut);letter-spacing:2px;margin:0}
.price-main{margin:2px 0 0;font-family:var(--serif)}
.price-main span{font-size:34px;color:var(--primary-hi);letter-spacing:1px}
.price-main span.pulse{display:inline-block;animation:pricePulse .5s ease}
@keyframes pricePulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.07);filter:brightness(1.18)}
  100%{transform:scale(1)}
}
.price-main small{color:var(--mut);font-size:13px;margin-left:8px;font-family:var(--sans)}
.price-foot{margin:8px 0 0;font-size:11px;color:var(--mut-2)}
.btn-primary{
  background:linear-gradient(135deg,var(--primary-hi),var(--primary) 55%,var(--primary-lo));
  color:var(--on-primary);border:1px solid var(--primary-hi);border-radius:999px;
  padding:11px 22px;font-size:14px;font-weight:700;letter-spacing:2px;
  box-shadow:0 8px 22px var(--fx-btn-glow);transition:.2s;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* ---------- 右侧配置 ---------- */
.controls{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;padding:26px;
  box-shadow:var(--shadow);
}
.step{padding:0 0 26px;margin-bottom:26px;border-bottom:1px dashed var(--line-soft)}
.step:last-of-type{border-bottom:0;margin-bottom:0}
.step-title{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.step-no{
  flex:none;width:40px;height:40px;border:1px solid var(--primary);color:var(--primary);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:14px;letter-spacing:1px;margin-top:2px;
  background:color-mix(in srgb, var(--primary) 6%, transparent);
}
.step-title h3{margin:0;font-family:var(--serif);font-size:19px;letter-spacing:2px}
.step-title p{margin:2px 0 0;font-size:12px;color:var(--mut)}

.opt-grid{display:grid;gap:10px}
.cat-grid{grid-template-columns:repeat(2,1fr)}
.model-grid{grid-template-columns:repeat(4,1fr)}
.craft-grid{grid-template-columns:repeat(2,1fr)}
.metal-grid{grid-template-columns:repeat(4,1fr)}
.stone-grid{grid-template-columns:repeat(4,1fr)}
.pattern-grid{grid-template-columns:repeat(4,1fr)}
/* DIY 档位（2026-09-28）：三档并排，一屏看完 */
.preset-grid{grid-template-columns:repeat(3,1fr)}
.preset-grid .opt{text-align:left;padding:14px 12px 12px}

.opt{
  position:relative;background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:14px;padding:10px 8px;color:var(--text);text-align:center;
  transition:.18s;overflow:hidden;
}
.opt:hover{border-color:var(--line);background:var(--panel-3);transform:translateY(-1px)}
.opt.selected{
  border-color:var(--primary);background:linear-gradient(180deg,color-mix(in srgb, var(--primary) 16%, transparent),color-mix(in srgb, var(--primary) 4%, transparent));
  box-shadow:0 0 0 1px var(--primary),0 8px 18px var(--fx-card-shadow);
}
.opt .ico{display:block;margin:0 auto 8px}
.opt .opt-name{font-size:13px;font-weight:600;display:block;letter-spacing:1px}
.opt .opt-sub{font-size:11px;color:var(--mut);display:block;margin-top:2px}
.opt .opt-price{font-size:11px;color:var(--primary);display:block;margin-top:4px}
.opt.selected::after{
  content:"✓";position:absolute;top:6px;right:9px;color:var(--primary-hi);font-size:12px;font-weight:700;
}

/* 分类与造型图标 */
.cat-grid .opt{padding:16px 8px 12px}
.cat-grid .opt-name{font-size:14px;margin-top:6px}
.ico-cat{width:42px;height:42px}
.ico-cat path,.ico-cat circle,.ico-cat line{fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ico-cat .fill{fill:color-mix(in srgb, var(--primary) 16%, transparent);stroke:none}

.thumb-wrap{height:82px;display:flex;align-items:center;justify-content:center}
.thumb-wrap svg{height:76px;width:auto;max-width:100%}
.thumb-wrap svg .ob{fill:color-mix(in srgb, var(--primary) 14%, transparent);stroke:var(--primary);stroke-width:2.2}
.thumb-wrap svg .ln{stroke:color-mix(in srgb, var(--primary) 75%, transparent);stroke-width:1;fill:none;opacity:.55}
.thumb-wrap svg .gl{display:none}
.thumb-wrap svg .bail{fill:none;stroke:var(--primary);stroke-width:2.2}

/* 金属 */
.metal-ico{display:block;width:34px;height:34px;border-radius:50%;margin:0 auto 8px;border:1px solid color-mix(in srgb, var(--text) 18%, transparent);box-shadow:inset 0 -3px 6px var(--fx-shadow-2),0 2px 5px var(--fx-shadow-3)}
.metal-grid .opt{padding:12px 6px}
.metal-grid .opt-name{font-size:13px}
.metal-grid .opt-sub{font-size:10px}

/* 宝石 */
.stone-ico{display:block;width:30px;height:30px;border-radius:50%;margin:0 auto 7px;border:1px solid color-mix(in srgb, var(--text) 28%, transparent);box-shadow:inset 0 -4px 8px var(--fx-shadow-2),0 2px 6px var(--fx-shadow-2)}
.stone-grid .opt{min-height:92px;padding:10px 6px}
.stone-grid .opt-name{font-size:12.5px}
.stone-grid .opt-note{font-size:10px;color:var(--mut);display:block;margin-top:2px;line-height:1.4}
.stone-grid .opt-price{font-size:11px}
.stone-none .stone-ico{border-style:dashed;background:repeating-linear-gradient(45deg,var(--panel-3),var(--panel-3) 4px,var(--panel-2) 4px,var(--panel-2) 8px)}
.stone-none .opt-sub{color:var(--mut)}

.sub-option{margin-top:12px;padding:12px 14px;border:1px dashed var(--line-soft);border-radius:12px;background:color-mix(in srgb, var(--text) 2%, transparent)}
.sub-label{font-size:12px;color:var(--mut);letter-spacing:1px;margin:0 0 8px}
.pattern-grid .opt{font-size:12px;padding:9px 6px}

/* 分段与数量 */
.presetcard .opt-name{font-size:14px;letter-spacing:1px}
.presetcard .opt-sub{font-size:11px;color:var(--mut)}
.preset-badge{
  display:inline-block;min-width:22px;padding:1px 6px;margin-bottom:6px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:1px;color:var(--on-primary);
  background:linear-gradient(135deg,var(--primary-hi),var(--primary));
}
.preset-lines{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-soft)}
.preset-line{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;line-height:1.9}
.preset-line em{color:var(--mut-2);font-style:normal;flex:none}
.preset-line b{font-weight:600;text-align:right}
.presetcard .opt-price{margin-top:8px;font-size:12px;font-weight:600}
.chip-tier{border-color:var(--primary)}

.seg-group{display:flex;flex-wrap:wrap;gap:8px}
.seg{
  background:var(--panel-2);border:1px solid var(--line-soft);color:var(--text);
  border-radius:999px;padding:8px 18px;font-size:13px;transition:.15s;
}
.seg:hover{border-color:var(--line)}
.seg.selected{background:linear-gradient(135deg,var(--primary-hi),var(--primary));color:var(--on-primary);border-color:var(--primary-hi);font-weight:700}
.qty-row{display:flex;align-items:center;gap:14px}
.qty-btn{
  width:38px;height:38px;border-radius:50%;background:var(--panel-2);
  border:1px solid var(--line);color:var(--primary-hi);font-size:20px;line-height:1;
}
.qty-btn:hover{background:var(--panel-3)}
.qty-num{min-width:34px;text-align:center;font-family:var(--serif);font-size:22px;color:var(--primary-hi)}
.qty-tip{font-size:12px;color:var(--mut)}
.btn-wide{width:100%;margin-top:18px;padding:14px;font-size:15px}

/* ---------- 弹窗 ---------- */
.overlay{
  position:fixed;inset:0;background:var(--fx-scrim);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:18px;z-index:50;
  animation:fadeIn .2s ease;
}
.modal{
  position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;
  background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:20px;padding:30px 30px 26px;box-shadow:0 30px 90px var(--fx-modal-shadow);
  animation:rise .25s ease;
}
@keyframes fadeIn{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.modal-close{
  position:absolute;top:14px;right:16px;background:none;border:none;color:var(--mut);
  font-size:26px;line-height:1;padding:4px 8px;
}
.modal-close:hover{color:var(--primary-hi)}
.modal h2{font-family:var(--serif);letter-spacing:4px;margin:0 0 18px}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 16px;border-top:1px solid var(--line-soft)}
.spec-list .spec-item{padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.spec-list dt{font-size:11px;color:var(--mut);letter-spacing:1px}
.spec-list dd{margin:2px 0 0;font-size:14px;color:var(--text)}
.spec-full{grid-column:1/-1}
.modal-total{font-size:14px;color:var(--mut);margin:0 0 14px}
.modal-total strong{font-size:26px;color:var(--primary-hi);font-family:var(--serif);margin-right:8px}
.quote-form{display:grid;gap:12px}
.form-row{display:grid;gap:5px}
.form-row label{font-size:12px;color:var(--mut);letter-spacing:1px}
.form-row input,.form-row textarea{
  background:var(--panel-2);border:1px solid var(--line-soft);color:var(--text);
  border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;resize:vertical;
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--primary)}
.quote-form .btn-primary{margin-top:6px}
.form-msg{margin:0;font-size:12.5px;color:var(--accent);line-height:1.7}
.form-msg.ok{color:var(--ok)}
.modal-actions{display:flex;justify-content:center;margin-top:14px}
.modal-actions .btn-ghost{font-size:12px}
.modal-success{text-align:center;padding:16px 0 6px}
.success-mark{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  border:1px solid var(--ok);color:var(--ok);font-size:30px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px color-mix(in srgb, var(--ok) 8%, transparent);
}
.modal-success h2{margin-bottom:8px}
.success-text{color:var(--mut);font-size:14px;margin:0 0 20px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--panel-3);border:1px solid var(--primary);color:var(--text);
  border-radius:999px;padding:11px 22px;font-size:13px;z-index:80;
  box-shadow:var(--shadow);animation:rise .2s ease;
}

.page-foot{
  max-width:1320px;margin:0 auto;padding:34px 28px 44px;text-align:center;
  color:var(--mut-2);font-size:12px;border-top:1px solid var(--line-soft);margin-top:30px;
}
.page-foot p{margin:4px 0}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-bottom:10px}
.foot-nav a{color:var(--mut);text-decoration:none;font-size:12.5px;letter-spacing:1px}
.foot-nav a:hover{color:var(--primary-hi)}

/* ---------- 页脚（数据生成版：品牌块 + 一级栏目一行） ----------
   2026-09-30 补样式并简化：此前生成器输出 .foot-cols/.foot-nav-cols 结构却没有任何
   对应 CSS（页脚内层裸奔），且把整个导航树（8 栏 × 子项共 24 条）重复铺了一遍。
   现在只放品牌块 + 一级栏目一行，完整导航交给顶栏。 */
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px 40px;flex-wrap:wrap;text-align:left;margin-bottom:20px;
}
.foot-brand b{display:block;font-family:var(--serif);font-size:17px;letter-spacing:3px;color:var(--text);margin-bottom:6px}
.foot-brand p{margin:2px 0;color:var(--mut);font-size:12.5px;line-height:1.9}
.foot-brand .mono{color:var(--primary-hi);font-size:12.5px;letter-spacing:1px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end;max-width:640px}
.foot-links a{color:var(--mut);text-decoration:none;font-size:12.5px;letter-spacing:1px;white-space:nowrap}
.foot-links a:hover{color:var(--primary-hi)}
.page-foot > p{
  padding-top:16px;border-top:1px solid var(--line-soft);color:var(--mut-2);
}

/* 卡片整体可点击（首页精选、大师代表作等只跳转不做弹层的场景） */
.card-link{display:block;color:inherit;text-decoration:none}

/* ---------- 按钮（通用尺寸 + 描边变体） ---------- */
.btn{
  padding:11px 22px;border-radius:var(--radius-sm);font-size:14px;border:none;cursor:pointer;
  font-weight:600;letter-spacing:1px;transition:all var(--dur-fast);text-decoration:none;display:inline-block;
}
.btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary-hi)}
.btn-outline:hover{background:color-mix(in srgb, var(--primary) 10%, transparent)}

/* 画工徽章（原为 JS 内联 style，W1 改为 CSS 类） */
.craft-badge{
  width:34px;height:34px;margin:0 auto 8px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:17px;font-weight:700;
}
.craft-badge--master{background:var(--seal);color:var(--seal-ink);border:none}
.craft-badge--supervised{border:1px solid color-mix(in srgb, var(--primary) 50%, transparent);color:var(--primary)}

/* 「设计中 · 即将推出」状态（造型/品类状态字段驱动） */
.opt.is-draft{opacity:.75;border-style:dashed;cursor:default}
.opt.is-draft:hover{transform:none;background:var(--panel-2)}
.opt.is-draft.selected{border-color:var(--line);background:var(--panel-2);box-shadow:none}
.opt.is-draft.selected::after{content:none}
.opt-badge-draft{
  display:inline-block;margin-top:5px;padding:2px 9px;border-radius:var(--radius-pill);
  font-size:10px;letter-spacing:1px;border:1px dashed var(--line);color:var(--mut);
}
.thumb-empty{
  display:flex;align-items:center;justify-content:center;width:100%;height:76px;
  border:1px dashed var(--line);border-radius:var(--radius-sm);
  font-size:11px;letter-spacing:1px;color:var(--mut-2);
}
/* 造型缩略图（实拍图路线） */
.thumb-photo{
  display:block;width:100%;height:82px;overflow:hidden;border-radius:var(--radius-sm);
  background:var(--media-bg);border:1px solid var(--line-soft);
}
.thumb-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.opt.selected .thumb-photo{border-color:color-mix(in srgb, var(--primary) 45%, transparent)}