/** app.wxss —— v2 设计令牌与通用样式：零彩色灰阶 / 毛玻璃浮层 / 杂志大留白 **/
@import "styles/icons.wxss";

/* ============================================================================
   §1 设计令牌（唯一颜色与度量来源，页面禁止硬编码彩色）
   ========================================================================== */
page {
  /* 墨阶 */
  --ink: #0A0A0A;
  --ink-2: #6E6E73;
  --ink-3: #AEAEB2;
  --ink-4: #C9C9CE;
  --art: #B9B9BE;                /* 衣物线稿色 */
  /* 纸面 */
  --paper: #FFFFFF;
  --paper-2: #F7F7F5;
  --paper-3: #EFEFED;
  /* 发丝线与填充 */
  --hairline: rgba(0, 0, 0, .08);
  --hairline-2: rgba(0, 0, 0, .14);
  --fill: rgba(120, 120, 128, .07);
  --fill-2: rgba(120, 120, 128, .13);
  /* 深色块（全稿唯一视觉锚点：商城会员卡） */
  --block: #1C1C1E;
  --block-2: #2C2C2E;
  /* 玻璃 */
  --glass: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .86);
  --glass-dark: rgba(28, 28, 30, .82);
  /* 字族 */
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  /* 缓动 */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* 圆角：仅小控件与抽屉使用圆角，大块内容保持直角 */
  --r-img: 8rpx;
  --r-ctrl: 20rpx;
  --r-sheet: 40rpx;
  --r-pill: 999rpx;
  /* 度量 */
  --pad: 40rpx;
  --nav-h: 88rpx;
  --tab-h: 120rpx;
  --safe-b: 28rpx;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 30rpx;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

view,
text,
image,
input,
textarea,
scroll-view,
swiper,
swiper-item {
  box-sizing: border-box;
}

/* ============================================================================
   §2 排版 · 双字阶（衬线大标题 / 无衬线正文）
   ========================================================================== */
.eyebrow {
  font-size: 20rpx;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}
.display {
  font-family: var(--serif);
  font-size: 68rpx;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.14;
}
.t-xl { font-family: var(--serif); font-size: 52rpx; font-weight: 500; letter-spacing: -.01em; line-height: 1.22; }
.t-lg { font-family: var(--serif); font-size: 40rpx; font-weight: 500; letter-spacing: -.005em; line-height: 1.32; }
.t-md { font-size: 34rpx; font-weight: 600; line-height: 1.38; }
.t-bd { font-size: 30rpx; line-height: 1.62; }
.t-sm { font-size: 26rpx; line-height: 1.55; color: var(--ink-2); }
.t-xs { font-size: 22rpx; line-height: 1.5; color: var(--ink-3); }
.t-quote { font-family: var(--serif); font-size: 32rpx; line-height: 1.85; letter-spacing: .005em; color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }
.c-ink { color: var(--ink); }
.c-2 { color: var(--ink-2); }
.c-3 { color: var(--ink-3); }
.c-4 { color: var(--ink-4); }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   §3 布局 · 页面容器 / 页头 / 间距 / 发丝线
   ========================================================================== */
.page {
  min-height: 100vh;
  background: var(--paper);
}
/* 底部预留：悬浮标签栏 / 悬浮双按钮条 / 悬浮操作条遮挡避让 */
.pb-tab { padding-bottom: calc(var(--tab-h) + 60rpx + env(safe-area-inset-bottom)); }
.pb-float { padding-bottom: calc(var(--tab-h) + 220rpx + env(safe-area-inset-bottom)); }
.pb-dock { padding-bottom: calc(190rpx + env(safe-area-inset-bottom)); }
.pb-safe { padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); }

.head { padding: 24rpx var(--pad) 0; }
.head .eyebrow { margin-bottom: 20rpx; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28rpx; }
.head-meta {
  font-size: 22rpx;
  color: var(--ink-3);
  letter-spacing: .02em;
  padding-bottom: 12rpx;
  text-align: right;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.pad { padding-left: var(--pad); padding-right: var(--pad); }
.spacer { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; }
.sec { margin-top: 64rpx; }
.hair { border-bottom: 1rpx solid var(--hairline); }
.hair-t { border-top: 1rpx solid var(--hairline); }
.gap-8 { height: 8rpx; }
.gap-16 { height: 16rpx; }
.gap-24 { height: 24rpx; }
.gap-32 { height: 32rpx; }
.gap-48 { height: 48rpx; }
.gap-64 { height: 64rpx; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ============================================================================
   §4 按钮 · 实心黑 / 描边 / 浅填充 / 玻璃 / 下划线文字
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14rpx;
  height: 100rpx;
  padding: 0 44rpx;
  border-radius: var(--r-pill);
  font-size: 30rpx;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .18s var(--ease), opacity .18s var(--ease), background .2s var(--ease);
}
.btn:active { transform: scale(.972); opacity: .74; }
.btn--block { display: flex; width: 100%; }
.btn--sm { height: 72rpx; padding: 0 30rpx; font-size: 27rpx; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink.is-off { background: var(--fill-2); color: var(--ink-3); pointer-events: none; }
.btn--ghost { box-shadow: inset 0 0 0 1rpx var(--hairline-2); color: var(--ink); }
.btn--plain { background: var(--fill); color: var(--ink); }
.btn--glass {
  background: var(--glass-2);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1rpx solid rgba(255, 255, 255, .7);
  box-shadow: 0 16rpx 48rpx -20rpx rgba(0, 0, 0, .18);
  color: var(--ink);
}
.btn--text {
  height: auto;
  padding: 0;
  border-radius: 0;
  font-size: 28rpx;
  font-weight: 400;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 7rpx;
  text-decoration-thickness: 1rpx;
  text-decoration-color: var(--ink-4);
}
.btn--text:active { opacity: .5; transform: none; }
.btn .icon { width: 34rpx; height: 34rpx; }

/* ============================================================================
   §5 胶囊标签 · 零彩色状态语义
   进行中/强调 = pill--ink；中性 = pill；失效/只读 = pill--line + 降透明
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8rpx;
  height: 46rpx;
  padding: 0 18rpx;
  border-radius: var(--r-pill);
  font-size: 22rpx;
  font-weight: 500;
  letter-spacing: .015em;
  background: var(--fill);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill--ink { background: var(--ink); color: #fff; }
.pill--line { background: transparent; box-shadow: inset 0 0 0 1rpx var(--hairline-2); color: var(--ink-2); }
.pill--plain { background: transparent; color: var(--ink-3); padding: 0 4rpx; }
.pill--dim { opacity: .45; }
.pill--dot::before {
  content: '';
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.pill .icon { width: 24rpx; height: 24rpx; }

/* ============================================================================
   §6 列表 · 分组标题 / 行 / 规格表 / 数字条
   ========================================================================== */
.rows { background: var(--paper); }
.row {
  display: flex;
  align-items: center;
  gap: 24rpx;
  min-height: 104rpx;
  width: 100%;
  padding: 0 var(--pad);
  border-bottom: 1rpx solid var(--hairline);
  transition: background .16s var(--ease);
}
.row:active { background: var(--fill); }
.row-lb { flex: 1; font-size: 30rpx; line-height: 1.4; }
.row-vl { font-size: 27rpx; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row-ch { width: 26rpx; height: 26rpx; color: var(--ink-4); flex-shrink: 0; }
.row-ic { width: 38rpx; height: 38rpx; color: var(--ink-2); flex-shrink: 0; }
.row-badge {
  min-width: 34rpx;
  height: 34rpx;
  padding: 0 10rpx;
  border-radius: 18rpx;
  background: var(--ink);
  color: #fff;
  font-size: 20rpx;
  font-weight: 600;
  line-height: 34rpx;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.grp-hd { display: flex; align-items: baseline; gap: 18rpx; padding: 0 var(--pad) 22rpx; }
.grp-hd .gh-cn { font-size: 26rpx; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.grp-hd .gh-en { font-size: 19rpx; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.grp-line { height: 1rpx; background: var(--hairline); margin: 0 var(--pad) 8rpx; }

.spec {
  display: flex;
  align-items: flex-start;
  gap: 28rpx;
  padding: 22rpx var(--pad);
  border-bottom: 1rpx solid var(--hairline);
}
.spec-k { width: 160rpx; flex-shrink: 0; font-size: 26rpx; color: var(--ink-2); line-height: 1.5; }
.spec-v { flex: 1; font-size: 29rpx; line-height: 1.5; text-align: right; color: var(--ink); }
.spec-v .dot {
  display: inline-block;
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  vertical-align: -1rpx;
  box-shadow: inset 0 0 0 1rpx rgba(0, 0, 0, .14);
}

.stats { display: flex; border-top: 1rpx solid var(--hairline); border-bottom: 1rpx solid var(--hairline); }
.stat { flex: 1; padding: 28rpx 0 30rpx; text-align: center; position: relative; }
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28rpx;
  bottom: 30rpx;
  width: 1rpx;
  background: var(--hairline);
}
.stat-n {
  font-family: var(--serif);
  font-size: 48rpx;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat-n .unit { font-size: 24rpx; color: var(--ink-3); margin-left: 4rpx; }
.stat-l {
  margin-top: 12rpx;
  font-size: 19rpx;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================================
   §7 进度轨 / 评分点阵 / 刻度尺
   ========================================================================== */
.track { height: 3rpx; background: var(--hairline-2); position: relative; overflow: hidden; }
.track .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.track.is-warn .bar { background: var(--ink-2); }

.dots { display: inline-flex; gap: 10rpx; vertical-align: middle; }
.dots .d { width: 16rpx; height: 16rpx; border-radius: 50%; box-shadow: inset 0 0 0 2rpx var(--ink-4); }
.dots .d.on { background: var(--ink); box-shadow: none; }

.scale { position: relative; height: 52rpx; }
.scale-line { position: absolute; left: 0; right: 0; top: 24rpx; height: 2rpx; background: var(--hairline-2); }
.scale-fill { position: absolute; left: 0; top: 24rpx; height: 2rpx; background: var(--ink); }
.scale-pip {
  position: absolute;
  top: 17rpx;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
}
.scale-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 20rpx;
  height: 10rpx;
  display: flex;
  justify-content: space-between;
}
.scale-ticks .tk { width: 1rpx; height: 10rpx; background: var(--hairline-2); }

/* ============================================================================
   §8 图片瓦片 · 拼图封面 · 勾选
   ========================================================================== */
.tile-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border-radius: var(--r-img);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tile-img .ph { width: 56%; height: 56%; color: var(--art); }
.tile-img.is-empty .ph { width: 34%; height: 34%; color: var(--ink-4); }
.tile-img .pic { width: 100%; height: 100%; }
.tile-name {
  margin-top: 18rpx;
  font-family: var(--serif);
  font-size: 28rpx;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-sub {
  margin-top: 4rpx;
  font-size: 21rpx;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-flag {
  position: absolute;
  top: 14rpx;
  left: 14rpx;
  height: 38rpx;
  padding: 0 14rpx;
  border-radius: 20rpx;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 19rpx;
  font-weight: 500;
  line-height: 38rpx;
  color: var(--ink-2);
}
.tile-flag.is-ink { background: var(--ink); color: #fff; }
.tile-check {
  position: absolute;
  right: 14rpx;
  bottom: 14rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, .9), 0 0 0 1rpx rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tile-check .icon { width: 24rpx; height: 24rpx; opacity: 0; }
.is-picked .tile-check { background: var(--ink); }
.is-picked .tile-check .icon { opacity: 1; }
.is-picked .tile-img { box-shadow: inset 0 0 0 3rpx var(--ink); }

.collage {
  position: relative;
  display: grid;
  gap: 2rpx;
  background: var(--paper);
  border-radius: var(--r-img);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  grid-template-columns: 1fr 1fr;
}
.collage--1 { grid-template-columns: 1fr; aspect-ratio: 1 / 1; }
.collage--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 2 / 1; }
.collage--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.collage--3 .cg:first-child { grid-row: span 2; }
.collage .cg {
  position: relative;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.collage .cg .ph { width: 44%; height: 44%; color: var(--art); }
.collage .cg .pic { width: 100%; height: 100%; }
.cg-more {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 34rpx;
  color: var(--ink);
}
.cg-badge {
  position: absolute;
  right: 16rpx;
  bottom: 16rpx;
  height: 42rpx;
  padding: 0 16rpx;
  border-radius: 22rpx;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 21rpx;
  line-height: 42rpx;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   §9 骨架屏 · 空态 · 页脚提示
   ========================================================================== */
.sk {
  background: linear-gradient(90deg, #F2F2F0 25%, #E9E9E6 37%, #F2F2F0 63%);
  background-size: 400% 100%;
  animation: skLoad 1.5s ease infinite;
}
@keyframes skLoad {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.sk-img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-img); }
.sk-ln { height: 20rpx; border-radius: 10rpx; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 128rpx 88rpx 0;
}
.empty-ic { width: 104rpx; height: 104rpx; color: var(--ink-4); margin-bottom: 40rpx; }
.empty-t { font-family: var(--serif); font-size: 38rpx; font-weight: 500; letter-spacing: -.005em; }
.empty-d { margin-top: 16rpx; font-size: 26rpx; line-height: 1.7; color: var(--ink-2); max-width: 480rpx; }
.empty-b { margin-top: 48rpx; }
.foot-note { padding: 52rpx 0 16rpx; text-align: center; font-size: 22rpx; color: var(--ink-4); letter-spacing: .06em; }

/* ============================================================================
   §10 分段条 / 分类条 · 下划线式极简
   ========================================================================== */
.seg { display: flex; gap: 36rpx; padding: 0 var(--pad); white-space: nowrap; }
.seg-item {
  position: relative;
  flex-shrink: 0;
  padding: 22rpx 0 24rpx;
  font-size: 29rpx;
  color: var(--ink-3);
  letter-spacing: .005em;
  transition: color .2s var(--ease);
}
.seg-item.is-on { color: var(--ink); font-weight: 500; }
.seg-item.is-on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rpx;
  background: var(--ink);
  border-radius: 2rpx;
}
.seg-scroll { white-space: nowrap; }

/* ============================================================================
   §11 悬浮层 · 底部操作条 / 双按钮条 / FAB
   ========================================================================== */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 24rpx var(--pad) calc(28rpx + env(safe-area-inset-bottom));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-top: 1rpx solid var(--hairline);
}
.dock-row { display: flex; align-items: center; gap: 24rpx; }
.dock-ic {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 25rpx;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.dock-ic .icon { width: 42rpx; height: 42rpx; }
.dock-ic.is-on { color: var(--ink); }
.dock-ic:active { transform: scale(.92); }

.float-duo {
  position: fixed;
  left: 32rpx;
  right: 32rpx;
  bottom: calc(var(--tab-h) + 48rpx + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  gap: 18rpx;
}
.float-duo .btn { flex: 1; height: 92rpx; font-size: 28rpx; }

.fab {
  position: fixed;
  right: 40rpx;
  bottom: calc(var(--tab-h) + 56rpx + env(safe-area-inset-bottom));
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20rpx 44rpx -16rpx rgba(0, 0, 0, .45);
  z-index: 46;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.fab .icon { width: 44rpx; height: 44rpx; }
.fab:active { transform: scale(.94); opacity: .8; }

/* ============================================================================
   §12 表单 · 输入框 / 文本域 / 选择行
   ========================================================================== */
.input {
  height: 96rpx;
  background: var(--fill);
  border-radius: var(--r-ctrl);
  padding: 0 28rpx;
  font-size: 29rpx;
  width: 100%;
}
.textarea {
  background: var(--fill);
  border-radius: var(--r-ctrl);
  padding: 22rpx 28rpx;
  font-size: 29rpx;
  width: 100%;
  min-height: 200rpx;
}
.input-ph { color: var(--ink-3); }

/* ============================================================================
   §13 通用动效
   ========================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16rpx); }
  to { opacity: 1; transform: none; }
}
.fade-up { animation: fadeUp .42s var(--ease) both; }
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1); }
}
.pulse { animation: pulse 1.6s var(--ease) infinite; }

/* ============================================================================
   §14 导航右侧操作（供 navigation-bar 的 right 插槽内容使用）
   ========================================================================== */
.nav-action {
  font-size: 28rpx;
  color: var(--ink-2);
  letter-spacing: .01em;
  white-space: nowrap;
  padding: 12rpx 4rpx;
  transition: color .16s var(--ease), opacity .16s var(--ease);
}
.nav-action:active { opacity: .5; }
.nav-action--ink { color: var(--ink); font-weight: 500; }
.nav-more {
  width: 68rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.nav-more .icon { width: 40rpx; height: 40rpx; }

/* ============================================================================
   §15 底部抽屉（页面级 Sheet，含抓手 / 标题行 / 滚动体 / 底部操作区）
   ========================================================================== */
/* 遮罩只压暗、不做全屏模糊：全屏 backdrop-filter 会让整页发虚 */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, .28);
  animation: fadeIn .28s var(--ease) both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sheet-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sheet {
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  overflow: hidden;
  background: var(--glass-2);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border-top: 1rpx solid rgba(255, 255, 255, .7);
  box-shadow: 0 -36rpx 100rpx -40rpx rgba(0, 0, 0, .28);
  animation: sheetIn .46s var(--ease) both;
}
@keyframes sheetIn {
  from { transform: translateY(101%); }
  to { transform: none; }
}
.sheet-grab {
  width: 72rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background: var(--ink-4);
  margin: 16rpx auto 0;
  flex-shrink: 0;
}
.sheet-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
  padding: 28rpx var(--pad) 24rpx;
  flex-shrink: 0;
}
.sheet-hd .sheet-t { font-size: 32rpx; font-weight: 600; letter-spacing: -.005em; }
.sheet-hd .sheet-x { font-size: 28rpx; color: var(--ink-2); }
.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}
.sheet-foot {
  padding: 24rpx var(--pad) calc(32rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid var(--hairline);
  flex-shrink: 0;
}

/* ============================================================================
   §16 衣物处理过程（上传页处理中态 / 衣物详情处理中态共用）
   ========================================================================== */
.up-preview {
  margin: 52rpx var(--pad) 0;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border-radius: var(--r-img);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.up-preview .ph { width: 44%; height: 44%; color: var(--art); }
.up-preview .pic { width: 100%; height: 100%; }

.up-steps {
  padding: 64rpx var(--pad) 0;
  display: flex;
  flex-direction: column;
}
.up-step {
  display: flex;
  align-items: center;
  gap: 28rpx;
  position: relative;
  padding-bottom: 48rpx;
}
.up-step:last-child { padding-bottom: 0; }
/* 竖向发丝线连接 */
.up-step::before {
  content: '';
  position: absolute;
  left: 9rpx;
  top: 26rpx;
  bottom: 0;
  width: 1rpx;
  background: var(--hairline-2);
}
.up-step:last-child::before { display: none; }
.up-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--paper);
  box-shadow: inset 0 0 0 2rpx var(--ink-4);
  position: relative;
  z-index: 1;
}
.up-step.is-done .up-dot { background: var(--ink); box-shadow: none; }
.up-step.is-on .up-dot {
  box-shadow: inset 0 0 0 2rpx var(--ink);
  animation: dotPulse 1.8s var(--ease) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: inset 0 0 0 2rpx var(--ink), 0 0 0 0 rgba(10, 10, 10, .18); }
  55% { box-shadow: inset 0 0 0 2rpx var(--ink), 0 0 0 12rpx rgba(10, 10, 10, 0); }
}
.up-lb { font-size: 27rpx; color: var(--ink-3); letter-spacing: .01em; }
.up-step.is-done .up-lb,
.up-step.is-on .up-lb { color: var(--ink); }

/* 失败态「！」 */
.up-bang {
  width: 92rpx;
  height: 92rpx;
  border-radius: 50%;
  margin-bottom: 44rpx;
  box-shadow: inset 0 0 0 1rpx var(--hairline-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 46rpx;
  line-height: 1;
}
.up-duo { display: flex; gap: 20rpx; padding: 56rpx var(--pad) 0; }
.up-duo .btn { flex: 1; }

/* ============================================================================
   §17 居中玻璃弹窗卡（页面级自定义弹窗，如登录新手礼包）
   ========================================================================== */
.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 68rpx;
}
.modal {
  width: 100%;
  max-width: 576rpx;
  border-radius: var(--r-sheet);
  overflow: hidden;
  background: var(--glass-2);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border: 1rpx solid rgba(255, 255, 255, .7);
  box-shadow: 0 48rpx 120rpx -36rpx rgba(0, 0, 0, .32);
  animation: modalIn .42s var(--ease) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
.modal-body { padding: 44rpx 40rpx 36rpx; text-align: center; }
.modal-title {
  font-family: var(--serif);
  font-size: 36rpx;
  font-weight: 500;
  letter-spacing: -.005em;
}
.modal-text {
  margin-top: 16rpx;
  font-size: 26rpx;
  line-height: 1.6;
  color: var(--ink-2);
}
.modal-acts { display: flex; border-top: 1rpx solid var(--hairline); }
.modal-act {
  flex: 1;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: var(--ink-2);
  transition: background .16s var(--ease);
}
.modal-act:active { background: var(--fill); }
.modal-act + .modal-act { border-left: 1rpx solid var(--hairline); }
.modal-act--main { color: var(--ink); font-weight: 600; }