/* 我的资产页 /activity/assets —— PC 帧 39347:119851,H5 帧 39072:95644 */

.activity-assets {
  /* 本页局部色板(base.css 无对应 token) */
  --aa-prize-border: #FCE3AD;
  --aa-prize-border-h5: #FDF2D4;
  --aa-prize-gradient: linear-gradient(0deg, #FDF6DE 0%, #FFFFFF 100%);
  --aa-icon-bg: rgba(252, 212, 23, 0.10);
  --aa-danger: #FF272B;
  --aa-gain-gradient: linear-gradient(143deg, #35DEBC 0%, #22BB9C 100%);
  font-family: "PingFang SC", sans-serif;
}

.activity-assets__shell {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.activity-assets__top {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 公共资产横幅(activity-hero.css)的页面级覆盖:只有本页的横幅不带右下角「我的资产」入口
   (自己跳自己没意义,模板传了 hideLink),下沿没有占位元素,四格按设计稿垂直居中而非顶对齐 */
.activity-assets-page .activity-hero__stats {
  top: 50%;
  transform: translateY(-50%);
}

.activity-assets__detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- 面包屑 ---------- */

.activity-assets-breadcrumb {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-primary);
}

.activity-assets-breadcrumb a {
  color: var(--text-primary);
}

.activity-assets-breadcrumb a:hover {
  color: var(--color-primary-500);
}

.activity-assets-breadcrumb a.activity-assets-breadcrumb__current,
.activity-assets-breadcrumb__current {
  color: var(--text-secondary);
}

.activity-assets-breadcrumb--mobile {
  display: none;
}

/* ---------- 我的奖品入口 ---------- */

.activity-assets-prize {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--aa-prize-border);
  border-radius: 12px;
  background: var(--aa-prize-gradient);
}

.activity-assets-prize__left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.activity-assets-prize__icon {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
}

.activity-assets-prize__img {
  position: absolute;
  left: -10px;
  top: -15px;
  width: 84px;
  height: 84px;
  max-width: none;
}

/* 礼盒投影(设计稿 Ellipse 1145,模糊黑椭圆,CSS 重建) */
.activity-assets-prize__icon::after {
  content: "";
  position: absolute;
  left: 21%;
  bottom: -7px;
  width: 63%;
  height: 3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(2px);
}

.activity-assets-prize__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.activity-assets-prize__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #000;
}

.activity-assets-prize__desc {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutral-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-assets-prize__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 32px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  background: var(--color-primary-500);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-primary);
  transition: filter 0.2s;
}

.activity-assets-prize__view:hover {
  filter: brightness(0.96);
}

.activity-assets-chevron {
  display: block;
  flex: none;
}

/* ---------- 筛选 tab ---------- */

.activity-assets-filters {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

.activity-assets-filters__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 12px 0;
  white-space: nowrap;
  border: 1px solid var(--color-black-alpha-5);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-neutral-900);
  cursor: pointer;
  transition: background-color 0.2s, filter 0.2s;
}

.activity-assets-filters__tab:hover {
  background: var(--color-neutral-50);
}

.activity-assets-filters__tab--active {
  border-color: transparent;
  background: var(--color-primary-500);
  color: var(--text-primary);
}

.activity-assets-filters__tab--active:hover {
  background: var(--color-primary-500);
  filter: brightness(0.96);
}

/* ---------- 明细列表 ---------- */

.activity-assets-list {
  padding: 16px;
  border: 1px solid var(--color-black-alpha-10);
  border-radius: 12px;
  background: #fff;
}

.activity-assets-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-assets-list__empty {
  margin: 0;
  padding: 28px 12px;
  text-align: center;
  color: var(--text-secondary);
}

.activity-assets-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-black-alpha-10);
}

.activity-assets-list__row:last-child {
  border-bottom: none;
}

.activity-assets-list__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.activity-assets-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--aa-icon-bg);
}

.activity-assets-list__icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.activity-assets-list__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.activity-assets-list__name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--text-primary);
}

.activity-assets-list__date {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.activity-assets-list__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.activity-assets-list__amount {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.activity-assets-list__amount--in {
  background: var(--aa-gain-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.activity-assets-list__amount--out {
  color: var(--aa-danger);
}

.activity-assets-list__balance {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

/* ---------- 去做任务按钮 ---------- */

.activity-assets-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 58px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--color-primary-500);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--text-primary);
  transition: filter 0.2s;
  white-space: nowrap;
}

.activity-assets-cta:hover {
  filter: brightness(0.96);
}

/* 兑换 CTA(button 版,复用 .activity-assets-cta 视觉) */
button.activity-assets-cta {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

/* display:flex 会盖掉 hidden 属性,显式兜底 */
.activity-assets-cta[hidden] {
  display: none;
}

/* ---------- H5(≤768px) ---------- */

@media (max-width: 768px) {
  /* 组件 H5 把 stats 顶对齐(top:13px),本页无入口仍要居中,断点内再覆盖一次 */
  .activity-assets-page .activity-hero__stats {
    top: 50%;
    transform: translateY(-50%);
  }

  .activity-assets__shell {
    gap: 18px;
  }

  .activity-assets__top,
  .activity-assets__detail {
    gap: 12px;
  }

  .activity-assets-breadcrumb--desktop {
    display: none;
  }

  .activity-assets-breadcrumb--mobile {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  .activity-assets-prize {
    padding: 12px;
    gap: 10px;
    border-color: var(--aa-prize-border-h5);
  }

  .activity-assets-prize__left {
    gap: 10px;
  }

  .activity-assets-prize__icon {
    width: 44px;
    height: 44px;
  }

  .activity-assets-prize__img {
    left: -7px;
    top: -10px;
    width: 56px;
    height: 56px;
  }

  .activity-assets-prize__icon::after {
    height: 2px;
    bottom: -3px;
  }

  .activity-assets-prize__text {
    gap: 2px;
  }

  .activity-assets-prize__title {
    font-size: 14px;
    line-height: 20px;
  }

  .activity-assets-prize__desc {
    font-size: 12px;
    line-height: 18px;
  }

  .activity-assets-prize__view {
    height: 24px;
    padding: 0 4px 0 12px;
    font-size: 12px;
    line-height: 18px;
  }

  .activity-assets-filters {
    gap: 8px;
  }

  .activity-assets-filters__tab {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  white-space: nowrap;
}

  .activity-assets-list {
    padding: 12px;
  }

  .activity-assets-list__name {
    font-size: 14px;
    line-height: 20px;
  }

  .activity-assets-list__date {
    font-size: 12px;
    line-height: 18px;
  }

  .activity-assets-list__amount {
    font-size: 14px;
    line-height: 20px;
  }

  .activity-assets-list__balance {
    font-size: 12px;
    line-height: 18px;
  }

  .activity-assets-cta {
    height: 44px;
    margin-top: 6px; /* H5 稿按钮与列表间距 18px(组内 12 + 6) */
  }
}