/* ============================================================
   pages.css —— 首页 / 游戏库 / 详情 / 我的 / 法律页
   ============================================================ */

/* ================= 首页 Hero ================= */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #0a7d5a 0%, #075d44 60%, #05402f 100%);
  color: #fff;
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    padding: var(--sp-8);
  }
}
.hero::after {
  content: '';
  position: absolute;
  inset: auto -20% -40% auto;
  width: 60%;
  padding-bottom: 60%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.hero__title {
  font-size: var(--fs-2xl);
  line-height: 1.15;
  margin-bottom: var(--sp-2);
  word-break: break-word;
}
@media (min-width: 768px) {
  .hero__title {
    font-size: var(--fs-3xl);
  }
}
.hero__intro {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  max-width: 46ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__meta {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.08);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= 签到卡 ================= */
.reward-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-1);
}
@media (min-width: 600px) {
  .reward-card {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
.reward-card__title {
  font-size: var(--fs-md);
  font-weight: 800;
  margin: 0 0 var(--sp-1);
}
.reward-card__sub {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin: 0;
}
.reward-card__amount {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: #8a5a00;
}
.reward-card__tz {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ================= 分类入口 ================= */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
@media (min-width: 600px) {
  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .cat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .cat-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 88px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  text-align: center;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.cat-tile:hover {
  border-color: var(--c-brand);
  transform: translateY(-1px);
  text-decoration: none;
}
.cat-tile__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-brand-light);
  color: var(--c-brand-dark);
  font-weight: 800;
  font-size: var(--fs-sm);
  text-transform: uppercase;
}
.cat-tile__name {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.cat-tile__count {
  font-size: 11px;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

/* ================= 游戏库 ================= */
.library-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
@media (min-width: 768px) {
  .library-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.search-box {
  position: relative;
  flex: 1 1 auto;
  max-width: 520px;
}
.search-box__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-10) 0 var(--sp-10);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  background: var(--c-surface);
}
.search-box__input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(10, 125, 90, 0.12);
}
.search-box__icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-3);
  pointer-events: none;
  display: inline-flex;
}
.search-box__icon svg {
  width: 18px;
  height: 18px;
}
.search-box__clear {
  position: absolute;
  right: var(--sp-1);
  top: 50%;
  transform: translateY(-50%);
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  color: var(--c-text-3);
  font-size: 18px;
  line-height: 1;
}
.search-box__clear:hover {
  background: var(--c-surface-2);
}

.library-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.library-count {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.filters-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* ================= 详情页 ================= */
.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .detail {
    grid-template-columns: 340px 1fr;
    align-items: start;
  }
}
.detail__cover {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  aspect-ratio: 3 / 4;
}
.detail__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
  word-break: break-word;
}
.detail__chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.detail__meta {
  display: flex;
  gap: var(--sp-5);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  flex-wrap: wrap;
}
.detail__meta strong {
  color: var(--c-text);
  font-size: var(--fs-md);
}
.detail__intro {
  color: var(--c-text-2);
  margin-bottom: var(--sp-5);
  white-space: pre-line;
}
.detail__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.detail__orient {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

/* 游戏启动遮罩（8s 兜底） */
.game-loading {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 16, 0.9);
  color: #fff;
  padding: var(--sp-5);
  text-align: center;
}
.game-loading__box {
  width: min(92vw, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.game-loading__name {
  font-size: var(--fs-md);
  font-weight: 700;
}
.game-loading__hint {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
}
.game-loading__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: egp-spin 0.9s linear infinite;
}
.game-loading__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ================= 我的 ================= */
.me-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 900px) {
  .me-grid {
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
}
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.panel__title {
  font-size: var(--fs-md);
  font-weight: 800;
  margin: 0 0 var(--sp-4);
}
.balance-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #fff7e6, #ffeec9);
  border: 1px solid #f3ddb0;
  margin-bottom: var(--sp-4);
}
.balance-box__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a5a00;
}
.balance-box__value {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: #6b4300;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ledger-list {
  display: flex;
  flex-direction: column;
}
.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}
.ledger-row:last-child {
  border-bottom: none;
}
.ledger-row__main {
  min-width: 0;
}
.ledger-row__reason {
  font-weight: 700;
  font-size: var(--fs-sm);
}
.ledger-row__time {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.ledger-row__amount {
  font-weight: 800;
  color: #0d6b4f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-row__balance {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 389px) {
  .hero__title {
    font-size: var(--fs-xl);
  }
  .detail__title {
    font-size: var(--fs-xl);
  }
}

/* ================= 法律页 ================= */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.legal-page h1 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}
.legal-page h2 {
  font-size: var(--fs-md);
  margin-top: var(--sp-6);
}
.legal-page p,
.legal-page li {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.legal-page ul {
  list-style: disc;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.legal-page__notice {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: #fff7e6;
  border: 1px solid #f3ddb0;
  color: #6b4300;
  font-weight: 600;
  margin-bottom: var(--sp-5);
}

/* ============================================================
   P1 增量：新页面样式（不新增 CSS 文件，§8.7）
   ============================================================ */

/* ---------------- 通用页头 / 提示 / 分页容器 ---------------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.page-head .section__title {
  margin: 0;
}
.section__title--sm {
  font-size: var(--fs-md);
  margin: var(--sp-6) 0 var(--sp-3);
}
.notice {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: var(--sp-3) 0;
}
.notice--warn {
  background: #fff7e6;
  color: #6b4300;
  border: 1px solid #f3ddb0;
}
.notice--ok {
  background: var(--c-brand-light);
  color: var(--c-brand-dark);
  border: 1px solid #bfe0d3;
}
.pager-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-6) 0;
  flex-wrap: wrap;
}
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-brand);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}

/* ---------------- 资讯 ---------------- */
.news-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.news-grid--compact {
  gap: var(--sp-3);
}
.news-card {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
}
.news-card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-surface-2);
}
.news-card__cover--empty {
  background: linear-gradient(120deg, var(--c-surface-2), #e4eaef);
}
.news-card__body {
  padding: var(--sp-4);
}
.news-card__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.35;
}
.news-card__summary {
  margin: 0 0 var(--sp-3);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__meta {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.article {
  max-width: 760px;
}
.article__title {
  font-size: var(--fs-2xl);
  line-height: 1.28;
  margin: 0 0 var(--sp-2);
}
.article__meta {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-4);
}
.article__cover {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: var(--sp-4);
}
.article__summary {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  line-height: 1.6;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--c-brand);
  margin: 0 0 var(--sp-5);
}
.article__body {
  line-height: 1.75;
  color: var(--c-text);
  word-break: break-word;
}
.article__body h2,
.article__body h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  line-height: 1.35;
}
.article__body p {
  margin: 0 0 var(--sp-4);
}
.article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.article__body a {
  color: var(--c-brand);
  text-decoration: underline;
}
.article__body ul,
.article__body ol {
  padding-left: var(--sp-6);
  margin: 0 0 var(--sp-4);
}
.article__body blockquote {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-border-strong);
  color: var(--c-text-2);
}

/* ---------------- 任务中心 ---------------- */
.task-today {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.task-today__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
}
.task-list {
  display: grid;
  gap: var(--sp-3);
}
.task-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.task-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.task-card__name {
  font-weight: 800;
  line-height: 1.4;
}
.task-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.task-card__reward {
  font-weight: 800;
  color: var(--c-accent-dark);
}
.task-card__bonus {
  display: inline-block;
  margin-left: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-brand);
}
.task-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-brand-light);
  border: 1px solid #bfe0d3;
  color: var(--c-brand-dark);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.guest-card {
  background: var(--c-surface);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
}
.guest-card__title {
  font-weight: 800;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}

/* ---------------- 礼包 ---------------- */
.redeem-form {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.redeem-form .input {
  flex: 1 1 200px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.gift-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
@media (min-width: 768px) {
  .gift-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gift-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.gift-card.is-disabled {
  opacity: 0.72;
}
.gift-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.gift-card__name {
  font-weight: 800;
}
.gift-card__coins {
  margin-top: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-accent-dark);
}
.gift-card__meta {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ---------------- 试玩 ---------------- */
.trial-panel {
  max-width: 560px;
}
.trial-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.trial-card__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
}
.trial-card__rows {
  margin-top: var(--sp-3);
}
.trial-card__rows .row-between {
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-border);
}
.trial-card__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* ---------------- 消息中心 ---------------- */
.msg-list {
  display: grid;
  gap: var(--sp-3);
}
.msg-item {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  color: inherit;
}
.msg-item.is-unread {
  border-color: var(--c-brand);
  box-shadow: inset 3px 0 0 var(--c-brand);
}
.msg-item.is-revoked {
  opacity: 0.62;
}
.msg-item__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.msg-item__title {
  font-weight: 800;
  flex: 1;
}
.msg-item__body {
  margin-top: var(--sp-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.msg-item__meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ---------------- VIP ---------------- */
.vip-card {
  background: linear-gradient(140deg, #0a7d5a 0%, #063f2e 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.vip-card--current {
  margin-bottom: var(--sp-4);
}
.vip-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.vip-card__level {
  font-size: var(--fs-xl);
  font-weight: 900;
}
.vip-card__name {
  font-weight: 700;
  opacity: 0.92;
}
.vip-card__growth {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  opacity: 0.92;
}
.vip-card .progress__track {
  background: rgba(255, 255, 255, 0.24);
}
.vip-card .progress__fill {
  background: var(--c-accent);
}
.vip-card .progress__label {
  color: rgba(255, 255, 255, 0.85);
}
.vip-card__next {
  font-size: var(--fs-xs);
  opacity: 0.8;
}
.vip-card__benefits {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.vip-card__extra {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  opacity: 0.9;
}
.vip-card .notice {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  margin-bottom: 0;
}
.vip-list {
  display: grid;
  gap: var(--sp-3);
}
.vip-row {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.vip-row.is-current {
  border-color: var(--c-brand);
}
.vip-row.is-locked {
  opacity: 0.78;
}
.vip-row__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.vip-row__level {
  font-weight: 900;
}
.vip-row__name {
  font-weight: 700;
  flex: 1;
}
.vip-row__threshold {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.vip-row__benefits {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.chip--sm {
  min-height: 28px;
  font-size: var(--fs-xs);
  padding: 2px 10px;
}

/* ---------------- 邀请 ---------------- */
.invite-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.invite-card__label {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.invite-card__code {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-2xl);
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--c-brand);
  user-select: all;
  word-break: break-all;
}
.invite-card__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.invite-card__stat {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.ladder-list {
  display: grid;
  gap: var(--sp-3);
}
.ladder-row {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.ladder-row.is-reached {
  border-color: var(--c-brand);
  background: var(--c-brand-light);
}
.ladder-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* ---------------- Marketplace ---------------- */
.market-list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .market-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .market-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.product-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-surface-2);
  display: block;
}
.product-card__img--empty {
  display: grid;
  place-items: center;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}
.product-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.product-card__name {
  font-weight: 800;
  line-height: 1.35;
}
.product-card__brand {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.product-card__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
}
.product-card__price {
  font-weight: 800;
  color: var(--c-accent-dark);
}
.product-card__discount {
  margin-left: var(--sp-2);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--c-danger-light);
  color: var(--c-danger);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.product-card__stock {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ---------------- 我的（入口组） ---------------- */
.me-entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
@media (min-width: 768px) {
  .me-entries {
    grid-template-columns: repeat(5, 1fr);
  }
}
.me-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}
.me-entry__icon {
  font-size: 18px;
  line-height: 1;
}
.me-entry__dot {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--c-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ============================================================
 * Wave 1-B2（M07 钱包）：四币种余额卡
 * 360px 起两列、宽屏四列；只用既有 token，不引入新依赖
 * ============================================================ */
.wallet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

@media (min-width: 720px) {
  .wallet-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.wallet-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--r-md, 10px);
  background: var(--c-surface, #fff);
  text-align: left;
  cursor: pointer;
}

.wallet-card.is-active {
  border-color: var(--c-primary, #0a7d5a);
  box-shadow: 0 0 0 1px var(--c-primary, #0a7d5a) inset;
}

.wallet-card__label {
  font-size: var(--fs-xs, 12px);
  color: var(--c-muted, #667);
}

.wallet-card__value {
  font-size: var(--fs-xl, 20px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wallet-card__hint,
.wallet-card__scopes {
  font-size: var(--fs-xs, 12px);
  color: var(--c-muted, #667);
}

.wallet-scope {
  display: inline-block;
  margin-right: var(--sp-2);
  white-space: nowrap;
}