/* 邀请页（云白）：主视觉、佣金概览（一个大数 + 两个次要数）、分享链接、邀请明细 */
.invite > :not(.tt-portal-head) ~ * { margin-top: var(--section-gap); }

/* ---------- 主视觉：手机上标题平均分行（「邀请好友，/ 赚取返利」），副标题避免孤字 ---------- */
.invite-hero .tt-hero-card-title { text-wrap: balance; }
.invite-hero .tt-hero-card-sub { text-wrap: pretty; }

/* ---------- 佣金概览 ---------- */
.tt-metrics {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px 24px;
  padding: var(--card-pad);
}
.tt-metric-value {
  font: var(--t-stat);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.tt-metric.is-primary .tt-metric-value {
  font: var(--t-stat-large);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--primary-text);
}
.tt-metric-value small { font: var(--t-stat-unit); font-variant-numeric: tabular-nums; color: var(--text-2); letter-spacing: 0; }
.tt-metric-label { margin-top: 4px; font: var(--t-caption); color: var(--text-3); }
.tt-metrics-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 0;
  box-shadow: inset 0 var(--hairline) 0 var(--border);
  font: var(--t-caption);
  color: var(--text-3);
}
.tt-metrics-foot b { margin-inline-start: 4px; font-weight: inherit; color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ---------- 卡片通用 ---------- */
.section { padding: var(--card-pad); }
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.invite-filter {
  width: 260px;
}
.share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.share-limit {
  margin: 4px 0 16px;
  font: var(--t-caption);
  color: var(--text-3);
}
.share-error {
  display: flex;
  align-items: center;
  gap: 12px;
}
.share-error .tt-alert {
  flex: 1;
}

/* ---------- 分享链接：卡内浅底行 ---------- */
.share-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.share-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 14px 16px;
  background: var(--bg-sunken);
  border-radius: var(--radius-inner);
}
.share-remark { width: 230px; flex: 0 0 230px; }
/* 浅底行里的输入框改白底，否则和行底色重叠 */
.share-remark .tt-input { background: var(--bg-card); }
.remark-feedback { display: flex; justify-content: space-between; gap: 6px; min-height: 18px; margin-top: 4px; font: var(--t-caption); color: var(--text-3); }
.remark-feedback > :last-child { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.remark-error { color: var(--danger-text); }
.remark-retry { padding: 0 0 0 4px; border: 0; background: none; color: var(--primary-text); cursor: pointer; font: inherit; transition: transform var(--dur-fast) ease-out, color var(--dur-fast) var(--ease); }
.remark-retry:active { transform: scale(0.98); }
.share-remark .tt-input.is-error { box-shadow: inset 0 0 0 1px var(--danger); }
.share-item-main {
  flex: 1;
  min-width: 0;
}
.share-item-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.share-code {
  font: var(--t-title);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--primary-text);
}
.share-created {
  font: var(--t-caption);
  color: var(--text-3);
}
.share-url {
  font: var(--t-caption);
  font-family: var(--font-mono);
  color: var(--text-2);
  word-break: break-all;
}

/* ---------- 邀请明细：桌面表格 ---------- */
.cell-commission {
  font: var(--t-body-strong);
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.cell-tradeno {
  font-family: var(--font-mono);
  color: var(--text-2);
}
.cell-time {
  color: var(--text-2);
}
.cell-source {
  font: var(--t-body-strong);
  color: var(--primary-text);
}
.is-legacy {
  font: var(--t-body);
  color: var(--text-3);
}
.record-error {
  margin-top: 4px;
}
.record-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.record-pagination:empty {
  display: none;
}
.record-pagination .tt-pagination {
  margin: 0;
}
.record-table {
  min-width: 720px;
}
/* 佣金列右对齐，右边留出和订单号之间的间距 */
.record-table th.is-num,
.record-table td.is-num { padding-right: 32px; }
.invite .tt-table-wrap { overflow-x: auto; }

/* 分享链接骨架屏（标题 + 3 行段落） */
.share-skeleton .share-skeleton-title {
  width: 38%;
  margin-bottom: 8px;
}
.share-skeleton .tt-skeleton-line + .tt-skeleton-line {
  margin-top: 16px;
}
.share-skeleton .share-skeleton-last {
  width: 61%;
}

/* ---------- 邀请明细：移动端卡片 ---------- */
.inv-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inv-card {
  padding: 12px 16px;
  background: var(--bg-sunken);
  border-radius: var(--radius-inner);
}
.ic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.ic-label {
  font: var(--t-caption);
  color: var(--text-3);
  flex-shrink: 0;
}
.ic-value {
  font: var(--t-body);
  text-align: right;
  word-break: break-all;
  color: var(--text-2);
}
.ic-amount {
  font: var(--t-title);
  font-variant-numeric: tabular-nums;
  color: var(--primary-text);
}

@media screen and (max-width: 768px) {
  .tt-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .tt-metric.is-primary { grid-column: 1 / -1; }
  .tt-metric { min-width: 0; }
  .tt-metric-value { overflow-wrap: anywhere; }
  .tt-metrics-foot { gap: 4px 16px; }
  .share-head,
  .detail-head,
  .share-item,
  .share-error {
    align-items: stretch;
    flex-direction: column;
  }
  .share-head { gap: 12px; margin-bottom: 12px; }
  .share-head .tt-btn,
  .invite-filter,
  .share-item > .tt-btn,
  .share-error .tt-btn {
    width: 100%;
  }
  .share-remark { width: 100%; flex: none; }
  .share-item-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}