/* 邀请好友：沿用门户公共视觉系统（common.css 的 Token 与组件），只做本页排版。 */
.rf-page { width: min(100%, 960px); margin: 0 auto; padding: 32px 24px 60px; }

/* ── 页头 ─────────────────────────────── */
.rf-head { margin-bottom: 18px; }
.rf-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--brand-border); border-radius: var(--r-pill); background: var(--tint); color: var(--brand-deep); font-size: var(--font-xs); font-weight: 500; }
.rf-head h1 { margin: 10px 0 2px; font-size: var(--font-title); letter-spacing: 0.01em; }
.rf-head p { margin: 0; color: var(--sub); font-size: var(--font-base); }

/* ── 奖励头图 ─────────────────────────── */
.rf-hero { position: relative; display: flex; align-items: center; gap: 18px; overflow: hidden; padding: 24px 28px; border: 1px solid var(--brand-border); border-radius: 20px; background: linear-gradient(135deg, var(--tint) 0%, var(--surface-soft) 62%, var(--card) 100%); box-shadow: 0 10px 30px rgba(30, 122, 74, 0.08); }
.rf-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.85; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); }
.rf-hero > :not(.rf-field) { position: relative; z-index: 1; }
.rf-hero-badge { display: flex; align-items: center; justify-content: center; flex: none; width: 60px; height: 60px; border-radius: 18px; background: var(--card); box-shadow: 0 6px 16px rgba(30, 122, 74, 0.14); }
.rf-hero-main { flex: 1; min-width: 0; }
.rf-hero-title { margin: 0; font-size: var(--font-lg); font-weight: 700; letter-spacing: 0.01em; }
.rf-hero-sub { margin: 6px 0 0; color: var(--control-ink); font-size: var(--font-sm); line-height: 1.75; }
.rf-hero-amt { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 20px; border-left: 1px solid var(--brand-border); }
.rf-hero-amt b { font-size: 38px; font-weight: 800; color: var(--brand-deep); line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rf-hero-amt span { color: var(--sub); font-size: var(--font-xs); }

/* ── 卡片骨架 ─────────────────────────── */
.rf-card { padding: 22px; }
.rf-card h2 { margin: 0 0 4px; font-size: var(--font-lg); }
.rf-card-sub { margin: 0 0 14px; color: var(--sub); font-size: var(--font-xs); }
.rf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 18px; align-items: start; margin-top: 18px; }

/* ── 邀请链接 ─────────────────────────── */
.rf-link-row { display: flex; gap: 8px; }
.rf-link-row input { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-soft); color: var(--ink); font-size: var(--font-sm); text-overflow: ellipsis; }
.rf-link-row input:focus { outline: none; border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px rgba(43, 164, 106, 0.12); }
.rf-link-row .p-btn { flex: none; min-height: 42px; padding: 0 20px; }
#invite-copy.copied { border-color: var(--brand); background: var(--brand); color: var(--card); }
#invite-copy.copied::before { content: "✓"; margin-right: 4px; font-weight: 700; }
.rf-link-tip { margin: 10px 0 0; color: var(--sub); font-size: var(--font-xs); }

/* ── 三步流程 ─────────────────────────── */
.rf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.rf-steps li { display: flex; align-items: flex-start; gap: 9px; }
.rf-steps i { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--brand-deep); font-size: var(--font-xs); font-weight: 700; font-style: normal; }
.rf-steps b { display: block; font-size: var(--font-sm); font-weight: 600; }
.rf-steps span { display: block; margin-top: 2px; color: var(--sub); font-size: var(--font-xs); line-height: 1.6; }

/* ── 战绩 ─────────────────────────────── */
.rf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rf-stat { padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--surface-soft) 0%, var(--card) 100%); text-align: center; }
.rf-stat.hl { border-color: var(--brand-border); background: linear-gradient(160deg, var(--tint) 0%, var(--card) 100%); }
.rf-stat b { display: block; font-size: 28px; font-weight: 700; color: var(--brand-deep); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rf-stat span { display: block; margin-top: 3px; color: var(--sub); font-size: var(--font-xs); }
.rf-note { margin: 14px 0 0; color: var(--sub); font-size: var(--font-xs); line-height: 1.75; }

/* ── 邀请记录 ─────────────────────────── */
.rf-records { margin-top: 18px; }
.table-wrap { overflow-x: auto; }
.rf-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: var(--font-sm); }
.rf-table th { padding: 10px 12px; color: var(--sub); font-weight: 500; text-align: left; border-bottom: 1px solid var(--line); }
.rf-table td { position: relative; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rf-table tbody tr:last-child td { border-bottom: 0; }
.rf-table tbody tr:hover td { background: var(--surface-soft); }
.rf-table th:last-child, .rf-table td:last-child { text-align: right; }
.rf-table td:first-child { padding-left: 26px; }
.rf-table td:first-child::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--brand-soft); }
.rf-table td.empty { padding: 30px 12px; color: var(--sub); text-align: center; }
.rf-table td.empty::before { display: none; }
.invite-income { color: var(--brand-deep); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invite-error { margin: 8px 0 0 !important; color: var(--danger); font-size: var(--font-sm); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; color: var(--sub); font-size: var(--font-sm); }
.pager button { padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--card); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.pager button:hover:not(:disabled) { border-color: var(--brand-soft); color: var(--brand-deep); }
.pager button:disabled { opacity: 0.4; cursor: default; }

/* ── 规则说明 ─────────────────────────── */
.rf-rules { margin-top: 18px; }
.rf-rules ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rf-rules li { display: flex; gap: 9px; color: var(--control-ink); font-size: var(--font-sm); line-height: 1.75; }
.rf-rules li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--brand-soft); }

.rf-loading { padding: 30px; color: var(--sub); font-size: var(--font-sm); text-align: center; }
.rf-footer { padding: 20px 16px; color: var(--sub); font-size: var(--font-xs); text-align: center; }
.rf-footer a { color: inherit; text-decoration: none; }
.rf-footer a:hover { text-decoration: underline; }

/* ── 响应式 ───────────────────────────── */
@media (max-width: 800px) {
  .rf-page { padding: 20px 16px 40px; }
  .rf-head h1 { font-size: 1.625rem; }
  .rf-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; border-radius: 16px; }
  .rf-hero-amt { flex-direction: row; align-items: baseline; gap: 6px; width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--brand-border); }
  .rf-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rf-card { padding: 18px; }
  .rf-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rf-link-row { flex-direction: column; }
  .rf-link-row .p-btn { width: 100%; }
}
@media (max-width: 620px) {
  .rf-hero-amt b { font-size: 32px; }
  .rf-stat b { font-size: 24px; }
  .rf-table td:first-child { padding-left: 22px; }
}