/* ==========================================================================
   前台页面样式：非遗展示 / 商城 / 购物车 / 结算 / 用户中心 / 商家中心 / 认证
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 公告信息模块
   -------------------------------------------------------------------------- */
.notice-bar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-ink-800);
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-xs);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.notice-bar__label {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent);
  padding-right: var(--sp-4);
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.notice-bar__viewport { flex: 1; overflow: hidden; height: 20px; }
.notice-bar__track { display: flex; flex-direction: column; animation: noticeRoll 12s var(--ease-in-out) infinite; }
.notice-bar__track:hover { animation-play-state: paused; }
.notice-bar__item { height: 20px; line-height: 20px; display: flex; gap: var(--sp-3); align-items: center; white-space: nowrap; }
.notice-bar__item:hover { color: #fff; }
.notice-bar__date { font-family: var(--font-mono); font-size: var(--fs-micro); color: rgba(255, 255, 255, .4); }
@keyframes noticeRoll { 0%, 26% { transform: translateY(0); } 33%, 59% { transform: translateY(-20px); } 66%, 92% { transform: translateY(-40px); } 100% { transform: translateY(0); } }

/* 公告列表 */
.notice-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border-color);
  transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.notice-item:hover { background: var(--c-paper-050); padding-left: var(--sp-6); }
.notice-item__date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.notice-item__date strong { display: block; font-size: 1.35rem; font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.notice-item__title { font-size: var(--fs-h4); font-weight: 600; transition: color var(--dur-fast) var(--ease-out); }
.notice-item:hover .notice-item__title { color: var(--c-accent); }
.notice-item__desc { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.notice-item__tags { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* 公告详情正文 */
.article { max-width: 78ch; }
.article__meta { display: flex; align-items: center; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border-color); margin-bottom: var(--sp-8); font-size: var(--fs-xs); color: var(--text-muted); flex-wrap: wrap; }
.article__body { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 2; color: var(--c-ink-600); }
.article__body p { margin-bottom: var(--sp-6); }
.article__body h3 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; color: var(--text-primary); margin: var(--sp-10) 0 var(--sp-4); }
.article__body blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 2px solid var(--c-accent);
  background: var(--c-paper-050);
  font-size: var(--fs-body);
  color: var(--text-secondary);
}
.article__body img { border-radius: var(--r-lg); margin: var(--sp-8) 0; }
.article__body ul { list-style: none; margin-bottom: var(--sp-6); }
.article__body ul li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-3); }
.article__body ul li::before { content: "—"; position: absolute; left: 0; color: var(--c-accent); }

/* --------------------------------------------------------------------------
   2. 非遗文化展示模块
   -------------------------------------------------------------------------- */
.heritage-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--c-ink-800); }
.heritage-card__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.heritage-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease-out); }
.heritage-card:hover .heritage-card__frame img { transform: scale(1.07); }
.heritage-card__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 15, 18, .9) 4%, rgba(15, 15, 18, .32) 48%, rgba(15, 15, 18, .08) 100%);
}
.heritage-card__content { position: absolute; inset: auto 0 0 0; padding: var(--sp-6); color: #fff; z-index: 2; }
.heritage-card__cat { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.heritage-card__title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; margin-top: var(--sp-3); }
.heritage-card__desc { margin-top: var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-normal); color: rgba(255, 255, 255, .7); max-height: 0; overflow: hidden; opacity: 0; transition: all var(--dur) var(--ease-out); }
.heritage-card:hover .heritage-card__desc { max-height: 80px; opacity: 1; }
.heritage-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-micro); color: rgba(255, 255, 255, .58); }
.heritage-card__level { display: inline-flex; align-items: center; gap: 5px; }

/* 筛选栏 */
.filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-5) 0;
  border-block: 1px solid var(--border-color);
}
.filter-bar__groups { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; min-width: 0; }
.filter-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.filter-row__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); flex: none; width: 56px; }
.filter-bar__tools { display: flex; align-items: center; gap: var(--sp-3); }

/* 项目详情 */
.heritage-detail__gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-4); }
.heritage-detail__main { aspect-ratio: 16 / 11; border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-200); }
.heritage-detail__main img { width: 100%; height: 100%; object-fit: cover; }
.heritage-detail__thumbs { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.heritage-detail__thumb { border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-200); cursor: pointer; position: relative; }
.heritage-detail__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.heritage-detail__thumb:hover img { transform: scale(1.05); }

.info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-8); }
.info-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-color); }
.info-item__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.info-item__value { font-size: var(--fs-sm); color: var(--text-primary); }

/* 传承人名片 */
.master-card { display: flex; gap: var(--sp-5); padding: var(--sp-6); border: 1px solid var(--border-color); border-radius: var(--r-lg); background: #fff; }
.master-card__avatar { width: 72px; height: 72px; border-radius: var(--r-lg); object-fit: cover; flex: none; background: var(--c-paper-200); }
.master-card__name { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 700; }
.master-card__role { font-size: var(--fs-xs); color: var(--c-accent); margin-top: 3px; }
.master-card__bio { font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-normal); margin-top: var(--sp-3); }

/* 评论区 */
.comment-list { display: flex; flex-direction: column; }
.comment { display: flex; gap: var(--sp-4); padding: var(--sp-6) 0; border-bottom: 1px solid var(--border-color); }
.comment__body { flex: 1; min-width: 0; }
.comment__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.comment__name { font-size: var(--fs-sm); font-weight: 600; }
.comment__date { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }
.comment__text { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.comment__foot { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-2xs); color: var(--text-muted); }
.comment__reply { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--c-paper-050); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-secondary); }
.comment__reply strong { color: var(--c-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. 非遗商城模块
   -------------------------------------------------------------------------- */
.goods-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-color); border-radius: var(--r-lg); overflow: hidden; transition: all var(--dur) var(--ease-out); }
.goods-card:hover { border-color: var(--c-ink-200); box-shadow: var(--sh-md); transform: translateY(-4px); }
.goods-card__frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-paper-100); }
.goods-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.goods-card:hover .goods-card__frame img { transform: scale(1.06); }
.goods-card__labels { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2; }
.goods-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.goods-card__cat { font-size: var(--fs-micro); color: var(--c-jade); letter-spacing: .04em; }
.goods-card__title { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); }
.goods-card:hover .goods-card__title { color: var(--c-accent); }
.goods-card__origin { font-size: var(--fs-2xs); color: var(--text-muted); }
.goods-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border-color); }
.goods-card__sales { font-size: var(--fs-2xs); color: var(--text-muted); }

/* 商品详情 */
.goods-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.goods-gallery__main { aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-100); }
.goods-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.goods-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.goods-gallery__thumb { aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-100); cursor: pointer; border: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out); }
.goods-gallery__thumb.is-active { border-color: var(--c-ink-700); }
.goods-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.goods-info__title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; }
.goods-info__sub { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.price-box { padding: var(--sp-6); background: var(--c-paper-050); border: 1px solid var(--border-color); border-radius: var(--r-lg); margin-top: var(--sp-6); }
.price-box__row { display: flex; align-items: baseline; gap: var(--sp-4); }
.option-row { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.option-row__label { font-size: var(--fs-xs); color: var(--text-muted); width: 68px; flex: none; }
.option-row__values { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* 关联非遗项目（创新点：商品↔项目关联） */
.related-heritage {
  display: flex; gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--c-accent-line);
  background: var(--c-accent-soft);
  border-radius: var(--r-lg);
  margin-top: var(--sp-6);
}
.related-heritage__thumb { width: 96px; height: 72px; border-radius: var(--r-md); object-fit: cover; flex: none; }
.related-heritage__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.related-heritage__title { font-size: var(--fs-sm); font-weight: 600; margin-top: var(--sp-2); }

/* 购物车 */
.cart-table thead th { background: transparent; border-bottom: 1px solid var(--c-ink-100); }
.cart-row { display: grid; grid-template-columns: 40px minmax(0, 2.4fr) 1fr 1fr 1fr 60px; gap: var(--sp-5); align-items: center; padding: var(--sp-5) 0; border-bottom: 1px solid var(--border-color); }
.cart-row__goods { display: flex; gap: var(--sp-5); align-items: center; min-width: 0; }
.cart-row__thumb { width: 88px; height: 88px; border-radius: var(--r-md); object-fit: cover; flex: none; background: var(--c-paper-100); }
.cart-summary { position: sticky; top: calc(var(--header-h) + var(--sp-6)); padding: var(--sp-6); background: var(--c-paper-050); border: 1px solid var(--border-color); border-radius: var(--r-lg); }
.cart-summary__row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.cart-summary__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--c-ink-100); }

/* 结算流程条 */
.steps { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.step__num {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-paper-200);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  flex: none;
}
.step.is-active { color: var(--text-primary); font-weight: 600; }
.step.is-active .step__num { background: var(--c-ink-700); color: #fff; }
.step.is-done .step__num { background: var(--c-accent); color: #fff; }
.step__line { width: 40px; height: 1px; background: var(--c-line-strong); }

/* 支付方式 */
.pay-methods { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pay-method {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.pay-method:hover { border-color: var(--c-ink-300); }
.pay-method:has(input:checked) { border-color: var(--c-ink-700); box-shadow: 0 0 0 1px var(--c-ink-700); background: var(--c-paper-050); }
.pay-method__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-paper-100); flex: none; }
.pay-method__ico svg { width: 20px; height: 20px; }
.pay-method input { position: absolute; opacity: 0; }

/* 二维码支付占位 */
.qr-box { width: 180px; height: 180px; padding: var(--sp-4); background: #fff; border: 1px solid var(--border-color); border-radius: var(--r-lg); display: grid; place-items: center; margin-inline: auto; }
.qr-box img, .qr-box canvas { width: 100%; height: 100%; }

/* 订单状态时间线 */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-4); }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink-200); margin-top: 6px; flex: none; }
.timeline__item.is-done .timeline__dot { background: var(--c-accent); }
.timeline__item.is-current .timeline__dot { background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); }
.timeline__line { flex: 1; width: 1px; background: var(--c-line-strong); margin: 4px 0; }
.timeline__content { padding-bottom: var(--sp-6); }
.timeline__title { font-size: var(--fs-sm); font-weight: 600; }
.timeline__time { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }

/* 物流轨迹 */
.logistics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-5); padding: var(--sp-5); background: var(--c-paper-050); border-radius: var(--r-lg); }
.logistics__value { font-size: var(--fs-sm); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. 用户中心 / 商家中心
   -------------------------------------------------------------------------- */
.profile-hero { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-8); background: var(--c-ink-800); color: #fff; border-radius: var(--r-xl); position: relative; overflow: hidden; }
.profile-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(193, 68, 58, .32), transparent 68%); }
.profile-hero__name { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; }
.profile-hero__meta { font-size: var(--fs-xs); color: rgba(255, 255, 255, .6); margin-top: 6px; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.menu-tile {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease-out);
}
.menu-tile:hover { border-color: var(--c-ink-200); box-shadow: var(--sh-sm); transform: translateY(-3px); }
.menu-tile__ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-paper-100); color: var(--c-ink-600); }
.menu-tile__ico svg { width: 19px; height: 19px; }
.menu-tile__name { font-size: var(--fs-sm); font-weight: 600; }
.menu-tile__desc { font-size: var(--fs-2xs); color: var(--text-muted); line-height: var(--lh-normal); }

/* 地址卡 */
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-5); }
.address-card { position: relative; padding: var(--sp-5); border: 1px solid var(--border-color); border-radius: var(--r-lg); background: #fff; transition: all var(--dur) var(--ease-out); }
.address-card:hover { border-color: var(--c-ink-200); box-shadow: var(--sh-sm); }
.address-card.is-default { border-color: var(--c-accent-line); background: var(--c-accent-soft); }
.address-card__name { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.address-card__line { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-normal); }
.address-card__ops { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-color); }
.address-card--add { display: grid; place-items: center; min-height: 168px; border-style: dashed; color: var(--text-muted); cursor: pointer; }
.address-card--add:hover { border-color: var(--c-ink-300); color: var(--text-primary); background: var(--c-paper-050); }

/* 认证页（登录 / 注册 / 入驻） */
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100svh; }
.auth-visual { position: relative; overflow: hidden; background: var(--c-ink-900); display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-16) var(--sp-12); color: #fff; }
.auth-visual__bg { position: absolute; inset: 0; z-index: 0; }
.auth-visual__bg img, .auth-visual__bg video { width: 100%; height: 100%; object-fit: cover; }
.auth-visual__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(15, 15, 18, .78), rgba(15, 15, 18, .92)); }
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual__quote { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; max-width: 22ch; }
.auth-visual__cite { margin-top: var(--sp-6); font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-12) var(--sp-10); background: #fff; }
.auth-form { width: 100%; max-width: 400px; margin-inline: auto; }
.auth-form__title { font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.02em; }
.auth-form__sub { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.auth-divider { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-8) 0; font-size: var(--fs-2xs); color: var(--text-muted); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.role-tips { padding: var(--sp-4) var(--sp-5); background: var(--c-paper-050); border-radius: var(--r-lg); font-size: var(--fs-2xs); color: var(--text-secondary); line-height: var(--lh-normal); }
.role-tips__row { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; }
.role-tips__key { font-family: var(--font-mono); color: var(--c-accent); flex: none; width: 84px; }

/* 入驻流程 */
.join-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.join-step { padding: var(--sp-6) 0; border-top: 2px solid var(--c-ink-700); }
.join-step__num { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--c-accent); letter-spacing: .12em; }
.join-step__title { margin-top: var(--sp-3); font-size: var(--fs-h4); font-weight: 600; }
.join-step__desc { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-normal); }

/* 资质上传项 */
.doc-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.doc-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border-color); border-radius: var(--r-lg); }
.doc-item__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-paper-100); color: var(--c-ink-500); flex: none; }
.doc-item__name { font-size: var(--fs-sm); font-weight: 500; }
.doc-item__state { font-size: var(--fs-2xs); color: var(--text-muted); }

/* 数据概览条（商家中心） */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); }
.mini-stat { padding: var(--sp-5); border: 1px solid var(--border-color); border-radius: var(--r-lg); background: #fff; }
.mini-stat__label { font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: .04em; }
.mini-stat__value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; margin-top: var(--sp-2); line-height: 1; }

/* 简易柱状图（后台统计，纯 CSS） */
.bars { display: flex; align-items: flex-end; gap: var(--sp-3); height: 160px; padding-top: var(--sp-4); }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); height: 100%; justify-content: flex-end; }
.bars__bar { width: 100%; max-width: 40px; background: var(--c-ink-200); border-radius: var(--r-sm) var(--r-sm) 0 0; transition: background var(--dur) var(--ease-out), height var(--dur-slower) var(--ease-out); }
.bars__col:hover .bars__bar { background: var(--c-accent); }
.bars__label { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }

/* 时间线列表（操作日志） */
.log-list { display: flex; flex-direction: column; }
.log-item { display: grid; grid-template-columns: 150px 120px minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-color); font-size: var(--fs-sm); }
.log-item__time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.log-item__op { display: flex; align-items: center; gap: var(--sp-2); }