/* ============================================================
 * pages.css — M-14~20 页面模块区块样式（page- 前缀）
 * 依赖 base.css / layout.css / components.css
 * 覆盖：首页 / 目录 / 商品详情 / 询价 / 认证 / 账户 / 管理后台
 * ============================================================ */

/* 页面根与加载态 */
.page {
  padding-block: var(--sp-5) var(--sp-7);
}

.page--flush {
  padding-block: 0;
}

/* ============================================================
 * M-14 首页（hero / 橱窗 / 分类入口 / 询价流程）
 * ============================================================ */

.page-hero {
  background: linear-gradient(165deg, var(--c-sand-2) 0%, var(--c-paper) 70%);
  border-bottom: 1px solid var(--c-line);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block: var(--sp-7);
}

.page-hero__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-accent-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-hero__title {
  margin: 0;
  font-size: var(--fs-3xl);
}

.page-hero__lead {
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: var(--c-taupe);
}

.page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* 陶土肌理装饰板：纯渐变拼贴，无外链图片 */
.page-hero__panel {
  display: none;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 28% 30%, var(--c-accent-soft) 0 26%, transparent 27%),
    radial-gradient(circle at 72% 68%, var(--c-sand) 0 18%, transparent 19%),
    linear-gradient(150deg, var(--c-sand-2), var(--c-surface));
  box-shadow: var(--shadow-1);
}

.page-hero__panel::before {
  content: "";
  display: block;
  padding-top: 75%;
}

@media (min-width: 64em) {
  .page-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
    padding-block: var(--sp-8);
  }

  .page-hero__content {
    flex: 1 1 60%;
    min-width: 0;
  }

  .page-hero__panel {
    display: block;
    flex: 0 0 32%;
  }
}

/* 橱窗与区块头 */
.page-home__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-4);
}

.page-home__section-title {
  margin: 0;
  font-size: var(--fs-xl);
}

.page-home__section-more {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* 分类入口：移动 2 列，md 起每行 4 项（M-14 配置） */
.page-categories__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.page-category-card {
  position: relative;
  flex: 1 1 calc(50% - var(--sp-4) / 2);
  min-width: 0;
  display: block;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-surface);
  color: var(--c-ink);
  transition: transform var(--tr-base) var(--ease-out),
    box-shadow var(--tr-base) var(--ease-out);
}

.page-category-card:hover {
  color: var(--c-ink);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.page-category-card__media {
  position: relative;
  background: var(--c-surface-2);
}

.page-category-card__media::before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1 */
}

@supports (aspect-ratio: 1 / 1) {
  .page-category-card__media::before {
    display: none;
  }

  .page-category-card__media {
    aspect-ratio: 1 / 1;
  }
}

.page-category-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-category-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-weight: 600;
}

@media (min-width: 48em) {
  .page-category-card {
    flex-basis: calc(25% - var(--sp-4) * 3 / 4);
  }
}

@supports (display: grid) {
  .page-categories__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 48em) {
    .page-categories__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

/* 询价流程引导（选品 → 询价 → 报价支付） */
.page-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.page-step {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.page-step__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
}

.page-step__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-md);
}

.page-step__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-taupe);
}

@media (min-width: 48em) {
  .page-steps {
    flex-direction: row;
  }

  .page-step {
    flex-direction: column;
    flex: 1 1 0;
  }
}

/* ============================================================
 * M-15 目录页（筛选侧栏 + 工具条 + 商品网格）
 * ============================================================ */

.page-catalog__filters {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
}

@media (min-width: 64em) {
  .page-catalog__filters {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-3));
  }
}

.page-catalog__filter-group {
  padding-block: var(--sp-3);
}

.page-catalog__filter-group + .page-catalog__filter-group {
  border-top: 1px dashed var(--c-line-strong);
}

.page-catalog__filter-legend {
  margin-block-end: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink-2);
}

.page-catalog__filter-list {
  display: grid;
  gap: var(--sp-1);
}

.page-catalog__filter-clear {
  margin-block-start: var(--sp-2);
  align-self: flex-start;
}

/* 工具条：搜索 / 排序 / 计数 */
.page-catalog__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-block-end: var(--sp-4);
}

.page-catalog__search {
  flex: 1 1 14rem;
}

.page-catalog__search .ui-form-field__control {
  padding-inline-start: 2.25rem;
  background-image: none; /* 图标由 DOM 注入 / 纯文字占位，禁外链 */
}

.page-catalog__sort {
  flex: 0 1 11rem;
}

.page-catalog__sort .ui-form-field,
.page-catalog__search .ui-form-field {
  margin-block-end: 0;
}

.page-catalog__count {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  color: var(--c-taupe);
}

/* 结果网格与失败重试态 */
.page-catalog__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.page-catalog__grid > * {
  flex: 1 1 calc(50% - var(--sp-4) / 2);
  min-width: 0;
}

@media (min-width: 48em) {
  .page-catalog__grid > * {
    flex-basis: calc(33.333% - var(--sp-4) * 2 / 3);
  }
}

@media (min-width: 80em) {
  .page-catalog__grid > * {
    flex-basis: calc(25% - var(--sp-4) * 3 / 4);
  }
}

@supports (display: grid) {
  .page-catalog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 48em) {
    .page-catalog__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 80em) {
    .page-catalog__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

.page-catalog__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--c-taupe);
}

/* ============================================================
 * M-16 商品详情页（画廊 + 信息区 + 相关推荐）
 * ============================================================ */

.page-product__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

@media (min-width: 48em) {
  .page-product__layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .page-product__media {
    flex: 0 0 55%;
    position: sticky;
    top: calc(3.5rem + var(--sp-3));
  }

  .page-product__info {
    flex: 1 1 auto;
  }
}

@supports (display: grid) {
  @media (min-width: 48em) {
    .page-product__layout {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
  }
}

.page-product__title {
  margin-block-end: var(--sp-2);
  font-size: var(--fs-2xl);
}

.page-product__category {
  font-size: var(--fs-sm);
  color: var(--c-taupe);
}

.page-product__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-block: var(--sp-3);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--c-line);
}

/* 双语字段（材质/尺寸/工艺，按 locale 呈现） */
.page-product__fields {
  display: grid;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}

.page-product__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
}

.page-product__field dt {
  flex: 0 0 5.5rem;
  color: var(--c-taupe);
}

.page-product__field dd {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--c-ink-2);
}

/* 工艺故事 */
.page-product__story {
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 3px solid var(--c-sand);
  background: var(--c-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}

.page-product__notes {
  margin-block: var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
}

.page-product__notes li {
  position: relative;
  padding-inline-start: 1.1rem;
  color: var(--c-ink-3);
}

.page-product__notes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--c-accent);
}

/* 下架/售罄态（CRT-001，禁用 CTA） */
.page-product__soldout {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-danger);
  border-radius: var(--radius-md);
  background: var(--c-danger-soft);
  color: var(--c-danger-strong);
  font-weight: 600;
}

.page-product__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}

/* 相关推荐（同分类 4 件） */
.page-product__related {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-top: 1px solid var(--c-line);
}

/* ============================================================
 * M-17 询价（表单 / 列表 / 详情报价面板）
 * ============================================================ */

.page-inquiry-form {
  max-width: 34rem;
  margin-inline: auto;
}

.page-inquiry-form__intro {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-taupe);
}

.page-inquiry-form__card {
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

/* 数量步进器 */
.page-inquiry__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-inquiry__qty-btn {
  width: 2.5rem;
  border: 0;
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-size: var(--fs-lg);
  line-height: 1;
}

.page-inquiry__qty-btn:hover {
  background: var(--c-accent-soft);
}

.page-inquiry__qty-input {
  width: 4rem;
  border: 0;
  border-inline: 1px solid var(--c-line);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.page-inquiry__qty-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

.page-inquiry-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}

/* 我的询价列表（每页 10 条） */
.page-inquiries__list {
  display: grid;
  gap: var(--sp-3);
}

.page-inquiry-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.page-inquiry-item__main {
  flex: 1 1 14rem;
  min-width: 0;
}

.page-inquiry-item__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-md);
  color: var(--c-ink);
}

.page-inquiry-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-taupe);
}

/* 报价面板（quoted 详情） */
.page-inquiry-detail__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

@media (min-width: 64em) {
  .page-inquiry-detail__grid {
    flex-direction: row;
  }

  .page-inquiry-detail__main {
    flex: 1 1 auto;
  }

  .page-inquiry-detail__quote {
    flex: 0 0 20rem;
  }
}

@supports (display: grid) {
  @media (min-width: 64em) {
    .page-inquiry-detail__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 20rem;
    }
  }
}

.page-quote-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-quote-panel__head {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  font-weight: 700;
}

.page-quote-panel__body {
  padding: var(--sp-4);
}

.page-quote-panel__amount {
  margin-block-end: var(--sp-3);
}

.page-quote-panel__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
}

.page-quote-panel__row + .page-quote-panel__row {
  border-top: 1px dashed var(--c-line);
}

.page-quote-panel__label {
  color: var(--c-taupe);
}

.page-quote-panel__value {
  color: var(--c-ink-2);
  text-align: end;
}

.page-quote-panel__countdown {
  color: var(--c-warn-strong);
  font-weight: 700;
}

.page-quote-panel__notes {
  margin-block: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-paper);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}

.page-quote-panel__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
}

/* ============================================================
 * M-18 认证页（login / register / reset / verify 薄壳）
 * ============================================================ */

.page-auth {
  display: flex;
  justify-content: center;
  padding-block: var(--sp-6) var(--sp-8);
}

.page-auth__card {
  width: min(100%, 24rem);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.page-auth__title {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-xl);
  text-align: center;
}

.page-auth__alt {
  margin-block-start: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-taupe);
  text-align: center;
}

/* 验证结果态（成功 / 已过期可重发） */
.page-auth__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  text-align: center;
}

.page-auth__result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  font-size: var(--fs-xl);
}

.page-auth__result--success .page-auth__result-icon {
  background: var(--c-success-soft);
  color: var(--c-success-strong);
}

.page-auth__result--expired .page-auth__result-icon {
  background: var(--c-warn-soft);
  color: var(--c-warn-strong);
}

/* ============================================================
 * M-19 账户页（心愿单 / 资料 / 订单中心）
 * ============================================================ */

.page-account__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-block-end: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}

.page-account__tab {
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--c-taupe);
  font-weight: 500;
}

.page-account__tab:hover {
  color: var(--c-ink);
}

.page-account__tab.is-active {
  border-bottom-color: var(--c-accent);
  color: var(--c-ink);
  font-weight: 700;
}

/* 心愿单：复用 .grid 卡网格；卡片操作脚注 */
.page-wishlist__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
}

.page-wishlist__remove {
  color: var(--c-danger-strong);
}

.page-wishlist__remove:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger-strong);
}

/* 资料表单（nickname 可改，email 只读 A-5） */
.page-profile {
  max-width: 30rem;
}

.page-profile__email-hint {
  font-size: var(--fs-xs);
  color: var(--c-taupe);
}

/* 订单列表（每页 10 条） */
.page-orders__list {
  display: grid;
  gap: var(--sp-3);
}

.page-order-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.page-order-item__no {
  font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

.page-order-item__date {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--c-taupe);
}

@media (min-width: 48em) {
  .page-order-item__date {
    flex-basis: auto;
    margin-inline-start: auto;
  }
}

/* 订单详情：明细快照 + 步骤 + 操作 */
.page-order-detail__section {
  margin-block-end: var(--sp-5);
}

.page-order-detail__section-title {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-md);
}

.page-order-detail__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
}

.page-order-detail__line + .page-order-detail__line {
  border-top: 1px dashed var(--c-line);
}

/* 订单进度（placed → paid → fulfilled） */
.page-order-steps {
  display: flex;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}

.page-order-steps__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-taupe);
}

.page-order-steps__dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--c-line-strong);
  background: var(--c-surface);
}

.page-order-steps__item--done {
  color: var(--c-success-strong);
}

.page-order-steps__item--done .page-order-steps__dot {
  border-color: var(--c-success);
  background: var(--c-success);
  box-shadow: inset 0 0 0 3px var(--c-surface);
}

.page-order-steps__item--current {
  color: var(--c-accent-strong);
  font-weight: 700;
}

.page-order-steps__item--current .page-order-steps__dot {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.page-order-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* 支付结果页（以订单接口状态为准） */
.page-pay-result {
  max-width: 30rem;
  margin-inline: auto;
}

.page-pay-result__panel {
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.page-pay-result__status--success {
  color: var(--c-success-strong);
}

.page-pay-result__status--cancel {
  color: var(--c-warn-strong);
}

/* ============================================================
 * M-20 管理后台（看板 / 表格 / 抽屉 / 双语编辑 / 图片管理）
 * ============================================================ */

.page-admin__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* 侧栏导航：移动横向滚动，lg 固定侧栏 */
.page-admin__nav {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  padding-block-end: var(--sp-1);
  -webkit-overflow-scrolling: touch;
}

.page-admin__link {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.page-admin__link:hover {
  background: var(--c-surface-2);
  color: var(--c-ink);
  text-decoration: none;
}

.page-admin__link.is-active {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-weight: 700;
}

@media (min-width: 64em) {
  .page-admin__nav {
    position: sticky;
    top: calc(3.5rem + var(--sp-3));
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    padding-block: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
  }
}

@supports (display: grid) {
  @media (min-width: 64em) {
    .page-admin__layout {
      display: grid;
      grid-template-columns: 13rem minmax(0, 1fr);
      align-items: start;
    }
  }
}

/* 看板统计卡 */
.page-admin__stats {
  margin-block-end: var(--sp-5);
}

.page-admin-stat {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.page-admin-stat__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-taupe);
}

.page-admin-stat__value {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.page-admin-stat__hint {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-taupe);
}

.page-admin-stat__hint--warn {
  color: var(--c-warn-strong);
}

/* 表格工具条（状态筛选 + 分页） */
.page-admin__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-block-end: var(--sp-3);
}

.page-admin__toolbar .ui-form-field {
  margin-block-end: 0;
}

.page-admin__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* 行内操作列 */
.page-admin__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* 商品编辑：双语字段分栏（en / zh_CN） */
.page-admin-edit__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 64em) {
  .page-admin-edit__grid {
    flex-direction: row;
  }

  .page-admin-edit__col {
    flex: 1 1 0;
    min-width: 0;
  }
}

@supports (display: grid) {
  @media (min-width: 64em) {
    .page-admin-edit__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

.page-admin-edit__col {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.page-admin-edit__lang {
  display: inline-flex;
  margin-block-end: var(--sp-3);
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-admin-edit__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 上下架开关行 */
.page-admin__switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

/* 图片管理：上传 + 缩略格（预览/排序/删除） */
.page-image-manager {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.page-image-manager__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-block-end: var(--sp-3);
}

.page-image-manager__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.page-image-item {
  position: relative;
  flex: 1 1 calc(33.333% - var(--sp-2) * 2 / 3);
  min-width: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-surface-2);
}

@media (min-width: 40em) {
  .page-image-item {
    flex-basis: calc(25% - var(--sp-2) * 3 / 4);
  }
}

@supports (display: grid) {
  .page-image-manager__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (min-width: 40em) {
    .page-image-manager__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

.page-image-item::before {
  content: "";
  display: block;
  padding-top: 100%;
}

@supports (aspect-ratio: 1 / 1) {
  .page-image-item::before {
    display: none;
  }

  .page-image-item {
    aspect-ratio: 1 / 1;
  }
}

.page-image-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-image-item.is-cover {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent-soft);
}

.page-image-item__actions {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-1);
  background: linear-gradient(to top, rgba(28, 26, 23, 0.78), transparent);
}

.page-image-item__btn {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(253, 250, 243, 0.92);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  line-height: 1;
}

.page-image-item__btn:hover {
  background: var(--c-surface);
}

.page-image-item__btn--danger:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger-strong);
}

/* 报价表单（抽屉内：金额 / 双语说明 / 有效期 / 拒绝原因） */
.page-admin-quote__expiry-hint {
  font-size: var(--fs-xs);
  color: var(--c-taupe);
}

.page-admin-quote__bilingual {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 40em) {
  .page-admin-quote__bilingual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
 * 全站毛玻璃面板（渐进增强，对齐 shop.outdoor 首页透出背景图的做法）
 * 支持 backdrop-filter 的浏览器：核心面板/卡片半透明 + 模糊，
 * 透出全站背景与鼠标焦点光斑；不支持时保持原不透明底色。
 * ============================================================ */

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {

  .page-hero__panel,
  .page-category-card,
  .page-step,
  .page-quote-panel,
  .page-inquiry-form,
  .page-inquiry-item,
  .page-auth,
  .page-profile,
  .page-order-item,
  .page-order-detail__section,
  .page-pay-result__panel,
  .page-admin-stat,
  .page-image-manager,
  .page-image-item {
    background: var(--glass-tint);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }

  /* hero 整区渐变加透：背景图隐约透出，深色文字仍可读 */
  .page-hero {
    background: linear-gradient(165deg,
        rgba(233, 223, 201, 0.55) 0%,
        rgba(247, 242, 231, 0.55) 70%);
  }
}