.referral-page-bar { display:flex; align-items:center; gap:12px; min-height:38px; margin-bottom:16px; color:#fff0de; }
.referral-page-bar .bonuses-back { flex:none; margin:0; }
.referral-page-bar h1 { min-width:0; margin:0; font-size:clamp(18px,5vw,24px); font-weight:700; line-height:1.2; white-space:nowrap; }
@media(max-width:359px) { .referral-page-bar { gap:9px; } .referral-page-bar .bonuses-back { padding:9px 11px; } }
.referral-program-page {
  width:100%; max-width:560px; margin:0 auto; padding:18px 16px 22px;
  border:1px solid #ffae6638; border-radius:24px;
  color:#fff0de; background:radial-gradient(ellipse at top,#80401930,transparent 70%),linear-gradient(140deg,#2e190f,#160c08);
  box-shadow:inset 0 1px #ffd5a71a,0 16px 40px #0004;
  animation:surface-appear 380ms var(--soft-ease,cubic-bezier(.22,1,.36,1)) backwards;
}
.referral-fire-emblem { width:44px; height:44px; display:grid; place-items:center; flex:none; border-radius:14px; border:1px solid #ffb76065; color:#ffdb9b; background:radial-gradient(circle at 25% 10%,#ffbd5f,transparent 55%),linear-gradient(145deg,#dc601f,#7f1d12); box-shadow:0 0 16px #ff691c22,inset 0 1px #ffe5b033; }
.referral-fire-emblem svg { display:block; width:30px; height:30px; fill:currentColor; }
.referral-fire-emblem .ref-arrow { fill:none; stroke:#fff1dc; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.referral-program-head { display:flex; align-items:center; gap:10px; margin:2px 0 18px; flex:none; }
.referral-program-head > div { min-width:0; flex:1; }
.referral-program-head h2 { margin:0; font-size:18px; line-height:1.2; }
.referral-program-head p { margin:5px 0 0; font-size:12px; line-height:1.35; color:#ca9d7c; }
.referral-program-body { min-width:0; overflow:visible; }
.referral-program-body::-webkit-scrollbar { display:none; }
.referral-explanation { padding:16px; margin-bottom:14px; border:1px solid #ffac6533; border-radius:20px; background:linear-gradient(145deg,#85421935,#45241855); }
.referral-explanation p { margin:0; font-size:14px; line-height:1.55; }
.referral-explanation p + p { margin-top:12px; }
.referral-percent { color:#ffba5d; }
.referral-share-row { display:flex; align-items:stretch; gap:9px; }
.referral-personal-link { position:relative; min-width:0; flex:1; padding:12px 43px 12px 12px; border:1px solid #ffa6692e; border-radius:18px; background:#542d1b50; }
.referral-personal-link label { display:block; font-size:9px; font-weight:700; letter-spacing:.08em; color:#c89573; margin-bottom:7px; }
.referral-personal-link > div { display:flex; align-items:center; gap:6px; }
.referral-personal-link input { min-width:0; flex:1; width:0; padding:0; border:0; outline:0; background:none; color:#ffd092; font:inherit; font-size:16px; font-weight:600; line-height:24px; text-overflow:ellipsis; }
.referral-personal-link button { position:absolute; right:9px; top:50%; transform:translateY(-50%); width:30px; height:30px; flex:none; display:grid; place-items:center; padding:0; gap:0; line-height:0; color:#e4b992; border-radius:7px; }
.referral-personal-link button svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.referral-share-button { flex:none; width:64px; min-height:70px; display:grid; place-items:center; padding:0; gap:0; line-height:0; border:1px solid #ffc071; border-radius:18px; background:linear-gradient(135deg,#ffab43,#e14a1a); color:#fff6e2; box-shadow:0 6px 20px #ff5f1620,inset 0 1px #ffe2a84a; }
.referral-share-button svg { display:block; width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.referral-feedback { min-height:16px; margin:7px 2px 10px; font-size:11px; line-height:1.4; color:#ffc778; }
.referral-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.referral-stat-grid article { min-width:0; min-height:78px; padding:12px 6px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; border:1px solid #ffae6825; border-radius:17px; background:#4e2a1a50; }
.referral-stat-grid article > span { font-size:9px; text-transform:uppercase; font-weight:700; letter-spacing:.04em; color:#c59575; }
.referral-stat-grid article > strong { display:flex; align-items:center; justify-content:center; gap:5px; min-height:28px; color:#ffe6c4; font-size:22px; line-height:28px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.referral-inline-star { display:block; width:20px; height:20px; object-fit:contain; flex:none; transform:none; }
.referral-amount { display:block; font:inherit; line-height:inherit; }
.referral-fraction-note { margin:12px 3px 19px; color:#b78b6f; font-size:11px; line-height:1.5; }
.referral-history-section { margin-top:18px; }
.referral-history-section > header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.referral-history-section h3 { margin:0; font-size:17px; }
.referral-history-section header > span { min-width:27px; padding:5px; border-radius:12px; background:#7a421a44; text-align:center; font-size:12px; color:#ffcc92; }
.referral-history { display:grid; gap:8px; }
.referral-history-item,.referral-reward-item { min-width:0; display:flex; align-items:center; gap:9px; padding:12px; border:1px solid #ffae6528; border-radius:17px; background:#4e2a1b50; }
.referral-person-avatar { display:grid; place-items:center; width:35px; height:35px; flex:none; border-radius:50%; background:linear-gradient(140deg,#ba6925,#632418); color:#ffdfaa; font-size:16px; font-weight:700; }
.referral-person-info { min-width:0; flex:1; display:grid; gap:5px; }
.referral-person-info strong,.referral-reward-item > div strong { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; line-height:1.3; }
.referral-person-info small,.referral-person-earned small,.referral-reward-item small { font-size:10px; color:#bd906e; line-height:1.35; }
.referral-person-earned { min-width:0; flex:none; display:grid; justify-items:end; gap:5px; }
.referral-person-earned strong,.referral-reward-item > strong { display:flex; align-items:center; justify-content:flex-end; gap:4px; min-height:20px; font-size:14px; color:#ffd08b; line-height:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.referral-person-earned .referral-inline-star,.referral-reward-item .referral-inline-star { width:16px; height:16px; }
.referral-reward-item > div { min-width:0; flex:1; display:grid; gap:5px; }
.referral-reward-item > strong { flex:none; }
.referral-empty { text-align:center; padding:20px 14px; border:1px solid #ffab6123; border-radius:18px; background:#4e2a1b35; color:#d8aa83; }
.referral-empty strong { font-size:14px; color:#ffe0ba; }
.referral-empty p { margin:7px 0; font-size:12px; line-height:1.5; }
.referral-empty button { margin:14px auto 0; min-height:40px; padding:10px 20px; color:#ffecd5; background:#9b4d2160; border-radius:14px; font-size:14px; }
.referral-program-page :focus-visible { outline:2px solid #ffc27d; outline-offset:3px; }
.referral-program-page button:disabled { opacity:.5; cursor:default; }
.referral-loading { color:#d4a384; text-align:center; min-height:120px; padding:30px 10px; font-size:14px; }
@media(max-width:350px) {
  .referral-program-page { padding:14px 12px; }
  .referral-program-head { gap:8px; }
  .referral-program-head h2 { font-size:16px; }
  .referral-program-head .referral-fire-emblem { width:38px; height:38px; }
  .referral-stat-grid { gap:6px; }
  .referral-stat-grid article > strong { font-size:19px; }
  .referral-explanation { padding:13px; }
  .referral-share-button { width:54px; }
}
@media(prefers-reduced-motion:reduce) { .referral-program-page { animation:none; } }