/* ---------- Upload 上传设计请求页 ---------- */

.page-body { padding-top: 56px; }

.up-hero { text-align: center; padding: 36px 24px 4px; max-width: 640px; margin: 0 auto; }
.up-hero h1 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 700; }
.up-sub { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.up-timeline { margin-top: 8px; font-size: 12px; color: var(--muted); }

.up-wrap { max-width: 1100px; margin: 16px auto 60px; padding: 0 24px; }

.up-form { display: flex; flex-direction: column; gap: 16px; }
/* ①挑瓷砖 + ②传照片：左右两栏 */
.up-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.up-step--col { flex-direction: column; }
@media (max-width: 860px) { .up-form-grid { grid-template-columns: 1fr; } }

/* 步骤卡 */
.up-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 24px 26px;
}
.up-step-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--text); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.up-step-body { flex: 1; min-width: 0; }
.up-step-title { font-size: 18px; font-weight: 700; }
.up-optional { font-size: 13px; font-weight: 400; color: var(--muted); }
.up-hint { margin-top: 6px; color: var(--muted); font-size: 13px; }

.up-label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 5px; }
.up-fieldrow { display: flex; gap: 14px; }
.up-field { flex: 1; min-width: 0; }

.up-input {
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-top: 4px;
}
.up-input:focus { outline: none; border-color: var(--text); }
.up-textarea { resize: vertical; border: 1px solid var(--line); }
.up-textarea:focus { border-color: var(--text); }

/* 拖拽上传区 */
.up-drop {
  display: block; margin-top: 14px; border: 1.5px dashed var(--line); border-radius: 16px;
  background: #fafafa; cursor: pointer; overflow: hidden; transition: border-color .2s;
}
.up-drop:hover, .up-drop.dragover { border-color: var(--text); }
.up-drop-inner { padding: 34px 20px; text-align: center; }
.up-drop-plus { font-size: 34px; color: var(--muted); font-weight: 300; }
.up-drop-text { margin-top: 6px; font-size: 15px; font-weight: 600; }
.up-drop-sub { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* 照片预览嵌在上传框内：横排多张 */
.up-previews { padding: 0 14px 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.up-preview { width: 120px; position: relative; }
.up-preview-img {
  position: relative; width: 120px; height: 100px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #f5f5f7;
}
.up-preview-img img { width: 100%; height: 100%; object-fit: cover; }
.up-preview-remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}
/* 每张照片的区域标签：
   图上角标(已选) + 图下方的标签选择下拉 */
.up-preview-tag {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; font-weight: 600;
  color: #fff; background: rgba(0,0,0,.6); padding: 4px 6px; text-align: center;
}
.up-preview-tagsel {
  width: 100%; margin-top: 6px; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted);
  cursor: pointer;
}
.up-preview-tagsel:focus { outline: none; border-color: var(--text); }
.up-preview-tagsel:has(option[value=""]:checked) { color: var(--muted); }

.up-submit {
  border: none; background: var(--text); color: #fff; font-size: 16px; font-weight: 600;
  padding: 16px 24px; border-radius: 14px; cursor: pointer; transition: background .2s;
  margin-top: 4px;
}
.up-submit:hover { background: #333; }
.up-submit:disabled { background: #d2d2d7; cursor: not-allowed; }

.up-status { margin-top: 12px; font-size: 14px; color: var(--muted); min-height: 20px; }
.up-status.err { color: #c0392b; }
.up-status.ok { color: #0a7d3c; }

/* 联系方式浮层（点「发送」后弹出） */
.up-modal {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
.up-modal[hidden] { display: none; }
.up-modal-card {
  width: min(1040px, 96vw); max-height: 94vh; overflow: auto;
  background: #fff; border-radius: 22px; padding: 26px 32px 26px;
  position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.up-modal-close {
  position: absolute; top: 14px; right: 18px; font-size: 26px;
  color: var(--muted); background: none; border: none; cursor: pointer; line-height: 1;
}
.up-modal-close:hover { color: var(--text); }

/* 联系弹窗两栏布局：左(姓名/电话/备注) + 右(加急/风格/参考图)，减少滚动 */
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; align-items: start; }
.modal-col { min-width: 0; display: flex; flex-direction: column; }
.modal-col .up-field { display: flex; flex-direction: column; }
.modal-col .up-textarea { flex: 1; }
.modal-col .up-field:first-child .up-label { margin-top: 0; }
@media (max-width: 860px) { .modal-grid { grid-template-columns: 1fr; gap: 0; } }
.up-modal-title { font-size: 22px; font-weight: 700; }
.up-modal-sub { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* 24 小时倒计时 */
.up-countdown { margin: 14px 0 6px; padding: 20px 24px; border-radius: 18px; background: #f5f5f7; text-align: center; }
.up-countdown-time { font-size: 56px; font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1;}
.up-countdown-slogan { margin-top: 10px; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.up-countdown-note { margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 760px; margin-left: auto; margin-right: auto; }
.up-countdown-note b { color: var(--text); }
.up-modal-actions { margin-top: 22px; width: 100%; }
.up-modal-actions .up-submit { width: 100%; margin-top: 0; border-radius: 16px; padding: 18px 24px; font-size: 17px; }
.up-modal .up-field:first-of-type .up-label { margin-top: 20px; }

/* 风格偏好区 */
.up-urgent { margin-top: 12px; padding: 10px 12px; background: #fff7f0; border-radius: 10px; font-size: 13px; color: var(--text); }
.up-urgent-check { margin-right: 8px; accent-color: var(--text); }
.up-styles { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.up-style {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 6px 11px; border-radius: 999px; font-size: 12px; cursor: pointer; user-select: none;
  transition: background .2s, color .2s, border-color .2s;
}
.up-style:hover { border-color: var(--text); color: var(--text); }
.up-style.active { background: var(--text); border-color: var(--text); color: #fff; }
.up-drop--tiny { border-radius: 12px; }
.up-drop-inner--tiny { padding: 10px 16px; font-size: 13px; margin-bottom: 22px; }
/* 弹窗内的 hint 更紧凑 */
.up-modal .up-hint { margin-top: 4px; font-size: 12px; line-height: 1.4; }
/* 参考图/照片预览区：固定高度、超出内部滚动，避免把弹窗撑出滑杆 */
.up-modal .up-previews { max-height: 118px; overflow-y: auto; }
.up-modal .up-preview-img { height: 92px; }

/* 挑砖：区域卡片 —— 第一排【客厅/卧室】各占半行(更宽)、第二排【厨房/卫浴/阳台】各占1/3 */
.up-zones { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.up-zone {
  position: relative; flex: 0 0 calc(33.33% - 7px); min-width: 0;
  background: #fafafa; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; transition: border-color .2s, background .2s;
}
/* 前两个（客厅/卧室）：每行 50%，更宽更长 */
.up-zone:nth-child(1), .up-zone:nth-child(2) { flex: 0 0 calc(50% - 5px); }
.up-zone:hover { border-color: var(--text); background: #fff; }
.up-zone-name { font-weight: 700; font-size: 15px; }
.up-zone-count { margin-top: 4px; font-size: 12px; color: var(--muted); }
/* 上传照片计数：n / 5（与①挑砖的 "x/3 selected" 一致） */
.up-count-badge { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 8px; }
.up-zone-thumbs { margin-top: 8px; display: flex; gap: 5px; min-height: 32px; }
.up-zone-thumb {
  width: 32px; height: 32px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line);
  background: #eee;
}
.up-zone-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-zone-thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; }
.up-zone.selected { border-color: var(--text); background: #fff; }

/* 挑砖弹窗：宽弹窗 + 网格 */
.up-modal-card--wide { width: min(720px, 94vw); }
.tile-picker-grid {
  margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; max-height: 46vh; overflow-y: auto; padding: 4px;
}
.tile-picker-cell { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
.tile-picker-cell img { width: 100%; aspect-ratio: 110/155; object-fit: cover; display: block; }
.tile-picker-cell:hover { border-color: var(--muted); }
.tile-picker-cell.selected { border-color: var(--text); }
.tile-picker-cell .tp-check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text); color: #fff; font-size: 13px; display: none;
  align-items: center; justify-content: center;
}
.tile-picker-cell.selected .tp-check { display: flex; }
.tile-picker-cell .tp-label {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: 14px 6px 5px;
}
.tile-picker-selected { margin-bottom: 12px; min-height: 20px; font-size: 13px; color: var(--muted); }
.tile-picker-selected b { color: var(--text); }

/* 挑砖弹窗：tab + 红心收藏 + 空态 */
.tile-modal-tabs { margin-top: 12px; display: flex; gap: 8px; }
.tile-tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.tile-tab:hover { border-color: var(--text); color: var(--text); }
.tile-tab.active { background: var(--text); border-color: var(--text); color: #fff; }
/* 红心（灰↔红，SVG，与 products 统一） */
.tp-heart {
  position: absolute; top: 6px; left: 6px; width: 26px; height: 26px;
  border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; box-shadow: 0 1px 6px rgba(0,0,0,.14);
}
.tp-heart svg { width: 14px; height: 14px; fill: #c7c7cd; transition: fill .2s; }
.tp-heart.on svg { fill: #e0245e; }
.tp-heart:hover { transform: scale(1.12); }
.tile-picker-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.tile-picker-empty b { color: var(--text); }
.tile-picker-more { grid-column: 1 / -1; padding: 6px 0 2px; text-align: center; }
.tile-more-btn {
  border: 1px dashed var(--line); background: #fff; color: var(--muted);
  padding: 10px 22px; border-radius: 999px; font-size: 13px; cursor: pointer;
  letter-spacing: .04em;
}
.tile-more-btn:hover { border-color: var(--text); color: var(--text); }
.tile-more-btn:disabled { opacity: .6; cursor: default; }

/* 成功页 */
.up-success { text-align: center; padding: 56px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.up-success-icon {
  width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; background: #0a7d3c;
  color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center;
}
.up-success h2 { margin-top: 18px; font-size: 24px; font-weight: 700; }
.up-success p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.up-success-ref { font-size: 13px; }
.up-success .btn { margin-top: 24px; }

@media (max-width: 720px) {
  .up-step { padding: 20px 16px; gap: 12px; }
  .up-fieldrow { flex-direction: column; gap: 0; }
}