/* ===== 全局 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  background: #f6f3ef;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  box-shadow: 0 0 30px rgba(139, 90, 43, 0.08);
  color: #3d3229;
}

/* ===== 顶部 ===== */
.header {
  background: linear-gradient(135deg, #4a3728 0%, #6b4f3c 50%, #8b6945 100%);
  padding: 14px 16px;
  color: #f5ede0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.back {
  font-size: 22px;
  cursor: pointer;
  color: #e8d5b0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
}
.header h1 { font-size: 18px; font-weight: 600; letter-spacing: 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.2); flex: 1; }

/* ===== 容器 ===== */
.container { max-width: 100%; padding: 12px; padding-bottom: 16px; display: flex; flex-direction: column; flex: 1; }

/* ===== 步骤条 ===== */
.steps {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  background: #ede8e0;
  border-radius: 10px;
}
.step {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  color: #a09387;
  border-radius: 8px;
  transition: all .25s;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
}
.step.active {
  background: linear-gradient(135deg, #c9a96e, #d4b88a);
  color: #3d3229;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.3);
  font-weight: 600;
}
.step.done { color: #8b6945; }

/* ===== 步骤面板 ===== */
.step-panel { display: none; }
.step-panel.active { display: block; display: flex; flex-direction: column; flex: 1; }

/* ===== 卡片 ===== */
.card {
  background: #fcf9f5;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #ede5d8;
  box-shadow: 0 2px 12px rgba(139, 90, 43, 0.04);
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #4a3728;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ede5d8;
}

/* ===== 表单 ===== */
.form-group { margin-bottom: 10px; }
.form-group label {
  display: block;
  font-size: 13px;
  color: #5d4a3a;
  margin-bottom: 4px;
  font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e8dcc8;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
  background: #fffbf8;
  font-family: inherit;
  color: #3d3229;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #c9a96e; box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.12); }
.form-group textarea { resize: vertical; min-height: 44px; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }

input::placeholder, textarea::placeholder { color: #c4b8a8; }

/* ===== 按钮 ===== */
.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #c9a96e, #d4b88a);
  color: #3d3229;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all .2s;
}
.btn-primary:active { opacity: .85; transform: scale(0.98); }
.btn-primary:disabled { opacity: .35; }

.btn-outline {
  width: 100%;
  padding: 10px;
  background: #fcf9f5;
  color: #8b6945;
  border: 1.5px solid #d4b88a;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: all .2s;
}
.btn-outline:active { background: #f5ede0; }

.btn-danger {
  padding: 6px 12px;
  background: none;
  border: none;
  color: #b87333;
  font-size: 12px;
  cursor: pointer;
}

/* ===== 商品购物车 ===== */
.product-cart-item {
  border: 1px solid #ede5d8;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
  background: #fcf9f5;
}
.product-cart-item .p-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.product-cart-item .p-name { font-size: 15px; font-weight: 600; color: #4a3728; }
.product-cart-item .p-summary { font-size: 12px; color: #8a7a6a; line-height: 1.6; }
.product-cart-item .p-remove {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: #f5e8d8; color: #8b6945; font-size: 16px; cursor: pointer; line-height: 1;
}
.product-cart-item .p-photos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.product-cart-item .p-photos .thumb {
  width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
  border: 1px solid #ede5d8; background: #f8f5f0;
}

/* ===== 弹窗 ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(62, 50, 40, 0.5); z-index: 100;
}
.modal-overlay.show { display: block; }
.modal {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fcf9f5; border-radius: 20px 20px 0 0;
  max-height: 92%; overflow-y: auto; z-index: 101;
  padding: 6px 16px 24px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
  max-width: 420px; margin: 0 auto;
  border-top: 1px solid #ede5d8;
}
.modal.show { transform: translateY(0); }
.modal .handle { width: 36px; height: 4px; background: #d4c8b8; border-radius: 2px; margin: 0 auto 16px; }
.modal-title { font-size: 17px; font-weight: 600; color: #4a3728; margin-bottom: 16px; text-align: center; letter-spacing: 1px; }

/* ===== 图片 ===== */
.photo-area { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-item { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; position: relative; border: 1.5px solid #ede5d8; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item .del {
  position: absolute; top: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #b87333; color: #fff; border: 2px solid #fcf9f5;
  font-size: 12px; cursor: pointer; line-height: 17px; text-align: center;
}
.photo-add {
  width: 76px; height: 76px; border-radius: 10px;
  border: 1.5px dashed #d4c8b8;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #d4c8b8; cursor: pointer; background: #f8f5f0;
}
.photo-add:active { background: #f0e8dc; }
input[type="file"] { position: absolute; left: -9999px; opacity: 0; }

/* ===== 成功页 ===== */
.success-page { text-align: center; padding: 60px 24px; }
.success-page .icon { font-size: 72px; margin-bottom: 16px; }
.success-page h2 { font-size: 22px; color: #4a3728; margin-bottom: 10px; letter-spacing: 2px; }
.success-page p { color: #8a7a6a; font-size: 14px; margin-bottom: 32px; line-height: 1.6; }

/* ===== Toast ===== */
.toast {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(62, 50, 40, 0.9);
  color: #f5ede0; padding: 24px 32px; border-radius: 14px;
  font-size: 14px; z-index: 200; text-align: center;
  backdrop-filter: blur(4px);
}
.toast.show { display: block; }

/* ===== 手绘板 ===== */
.sketch-overlay { display: none; position: fixed; inset: 0; background: rgba(62, 50, 40, 0.7); z-index: 200; }
.sketch-overlay.show { display: block; }
.sketch-dialog {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%); width: 94%; max-width: 420px;
  background: #fcf9f5; border-radius: 18px; z-index: 201; overflow: hidden;
  box-shadow: 0 12px 40px rgba(62, 50, 40, 0.4); border: 1px solid #ede5d8;
}
.sketch-dialog.show { display: block; }
.sketch-header { padding: 14px 16px; font-size: 15px; font-weight: 600; color: #4a3728; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ede5d8; }
.sketch-tools button { padding: 6px 14px; border-radius: 8px; border: 1.5px solid #d4c8b8; background: #fff; font-size: 13px; cursor: pointer; }
.sketch-tools .active { background: #d4b88a; color: #3d3229; border-color: #d4b88a; }

/* ===== 校验 ===== */
.fv-hint { color: #b87333; font-size: 12px; margin-top: 2px; display: none; }
input.fv-err, select.fv-err { border-color: #b87333 !important; box-shadow: 0 0 0 1px #b87333; }

/* ===== 门型 ===== */
.ds-item { display: flex; flex-direction: column; align-items: center; width: 100px; padding: 10px 6px; border: 2px solid #ede5d8; border-radius: 10px; cursor: pointer; background: #fcf9f5; }
.ds-item.sel { border-color: #c9a96e; background: #f5ede0; }

/* ===== 主材触发 ===== */
.material-card-trigger { cursor: pointer; background: #f8f5f0; border: 1px solid #ede5d8; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.material-card-trigger span.label-text { font-size: 13px; font-weight: 600; color: #4a3728; white-space: nowrap; }
.material-card-trigger span.status-text { font-size: 11px; color: #a09387; }
.material-card-trigger .summary-text { font-size: 11px; color: #8a7a6a; display: none; margin-left: auto; flex: 1; text-align: right; }

/* ===== 商品网格 ===== */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.product-grid-plus { margin-top: 12px; border: 1.5px dashed #d4c8b8; border-radius: 10px; padding: 12px; text-align: center; color: #d4c8b8; font-size: 22px; cursor: pointer; background: #f8f5f0; }

/* ===== 尺寸盒子 ===== */
.dims-box, .site-box { flex: 1; background: #f8f5f0; border-radius: 10px; padding: 12px; border: 1px solid #ede5d8; }
.function-section { display: none; margin-bottom: 10px; background: #f8f5f0; border-radius: 10px; padding: 10px 12px; border: 1px solid #ede5d8; }

/* ===== 照片按钮 ===== */
.photo-add-btn { flex: 1; text-align: center; padding: 12px 0; border: 1px solid #d4b88a; border-radius: 10px; color: #8b6945; font-size: 13px; cursor: pointer; background: #f8f5f0; }
.photo-add-btn:active { background: #f0e8dc; }

/* ===== Picker弹窗 ===== */
.picker-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(62, 50, 40, 0.4); }
.picker-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 201; background: #fcf9f5; border-radius: 18px; padding: 24px; width: 92vw; max-width: 420px; max-height: 80vh; overflow-y: auto; border: 1px solid #ede5d8; box-shadow: 0 8px 30px rgba(62, 50, 40, 0.2); }

/* ===== 其他 ===== */
.legend-chip { font-size: 11px; margin-bottom: 2px; color: #8a7a6a; }
.photo-counter { font-size: 11px; color: #a09387; }
.text-input-overlay { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(62, 50, 40, 0.4); }
.text-input-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 301; background: #fcf9f5; border-radius: 16px; padding: 20px; width: 280px; border: 1px solid #ede5d8; box-shadow: 0 8px 30px rgba(62, 50, 40, 0.2); }
.preview-area { margin-top: 10px; }
.preview-thumb { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 12px; border: 1.5px dashed #c9a96e; border-radius: 10px; cursor: pointer; color: #8b6945; font-size: 13px; background: #f8f5f0; }
.preview-dialog { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 92%; max-width: 380px; background: #fcf9f5; border-radius: 18px; z-index: 1002; box-shadow: 0 12px 40px rgba(62, 50, 40, 0.3); overflow: hidden; border: 1px solid #ede5d8; }
.preview-header { padding: 14px 16px; font-size: 14px; font-weight: 600; color: #4a3728; border-bottom: 1px solid #ede5d8; }
.sketch-thumb { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; border: 1px solid #ede5d8; }