/* ============================================================
   invite.css —— 邀請好友頁（配合 Soft Store 淺色主題）
   Claude 追加，獨立檔避免與別人的 skin 打架。
   ============================================================ */
.inv-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); align-items: stretch; }

.inv-share__label { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.inv-code {
  font: 900 30px/1 var(--font); letter-spacing: 4px; color: var(--accent);
  margin: 6px 0 var(--sp-3);
}
.inv-linkbox { display: flex; gap: var(--sp-2); }
.inv-linkbox__in {
  flex: 1; min-width: 0; background: #fbfcfe; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; color: var(--text-soft); outline: none;
}
.inv-linkbox__in:focus { border-color: var(--accent); box-shadow: var(--ring-cyan); }
.inv-share__btns { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

.inv-stats { display: flex; flex-direction: column; gap: var(--sp-3); }
.inv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-content: start; }
.inv-stat { text-align: center; padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2); }
.inv-stat__v { font-size: 26px; font-weight: 900; color: var(--text); }
.inv-stat__l { font-size: 12px; color: var(--text-dim); }
.inv-milestone { grid-column: 1 / -1; }
.inv-milestone__t { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.inv-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 6px 0 4px; }
.inv-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
.inv-milestone__d { font-size: 12px; color: var(--text-dim); text-align: right; }

.inv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.inv-step { display: flex; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.inv-step__no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.inv-step__t { font-weight: 800; font-size: 14px; }
.inv-step__d { font-size: 13px; color: var(--text-soft); margin-top: 2px; }

.inv-terms { margin: 0 0 var(--sp-5); padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.inv-terms li { font-size: 13px; color: var(--text-soft); line-height: 1.6; }
.inv-terms b { color: var(--text); font-weight: 800; }

.inv-demo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2); }

@media (max-width: 760px) {
  .inv-top { grid-template-columns: 1fr; }
  .inv-steps { grid-template-columns: 1fr; }
}