/* Referral page BODY - laid out exactly as docs/bullbearswap_frontend_handoff/BBS_Referral_Program_Full_Handoff_v2
   (approved reference image + design_tokens.json): dark green page, hero band, link + stats, quote, How It Works, Performance,
   Recent Earnings + accordions on the left, Referrer Code + promo on the right, footer.
   The site header, network picker, wallet pill, wallet modal and fonts still come from styles.css (the header is NOT restyled here).
   Every rule below is prefixed rf- or scoped to body[data-page="referral"] so nothing leaks into the shared header. */

body[data-page="referral"] {
  background: linear-gradient(#010a07, #000a07 50%, #010f07);
  min-height: 100vh;
}
.rf { --rf-line:#18423a; --rf-muted:#a9b7b3; --rf-green:#a4ff00; --rf-green2:#71e400; --rf-danger:#ff4d4f; --rf-card:linear-gradient(180deg,#051715,#031210);
  max-width:1440px; margin:0 auto; padding:0 0 28px; font-size:calc(15px * var(--k)); line-height:1.5; color:#f5f7f6; }
/* One typography scale for the whole body: 1 on wide screens, ~0.85 at the wireframe's 1024px (its text is ~12.5px where the
   desktop sizes here are 14-15px). Every plain px font-size in this file goes through it. */
.rf { --k:1; }
@media (max-width:1350px){ .rf { --k:.95; } }
@media (max-width:1200px){ .rf { --k:.9; } }
@media (max-width:1100px){ .rf { --k:.86; } }
@media (max-width:760px){ .rf { --k:.95; } }
.rf *, .rf *::before, .rf *::after { box-sizing:border-box; }
.rf button { font-family:inherit; font-size:inherit; line-height:inherit; cursor:pointer; }
.rf button:disabled { opacity:.5; cursor:not-allowed; }
.rf a { color:inherit; }
.rf :focus-visible { outline:2px solid var(--rf-green); outline-offset:2px; }

.rf-ico { display:inline-block; width:1.25em; height:1.25em; flex:none; overflow:visible; }

/* hero band */
.rf-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,56fr) minmax(0,44fr); align-items:center; background:radial-gradient(circle at 72% 50%,rgba(57,255,20,.15),transparent 36%),linear-gradient(90deg,#000705 0%,#010c0a 45%,#010d0f 100%); border-bottom:1px solid #173b34; }
.rf-hero-copy { position:relative; z-index:2; padding:clamp(24px,3.2vw,42px) clamp(18px,2.7vw,28px); }
.rf-hero h1 { font-size:clamp(30px,4.75vw,54px); line-height:1.1; margin:0 0 6px; font-weight:800; color:#f5f7f6; letter-spacing:-.5px; }
.rf-hero h1 span, .rf-hero h2 b, .rf-hero p strong { color:var(--rf-green); }
.rf-hero h2 { font-size:clamp(16px,2.05vw,28px); margin:0 0 12px; font-weight:700; color:#f5f7f6; white-space:nowrap; }
.rf-hero p { font-size:clamp(15px,1.95vw,20px); color:#dbe4e1; margin:0; }
.rf-proofs { display:flex; flex-wrap:nowrap; gap:14px clamp(10px,1.6vw,26px); margin:clamp(16px,2.5vw,26px) 0 0; padding:0; list-style:none; }
.rf-proofs li { flex:none; white-space:nowrap; display:flex; gap:7px; align-items:flex-start; color:#e7f0ed; font-weight:600; line-height:1.3; font-size:clamp(10.5px,1.1vw,15px); }
.rf-proofs small { display:block; color:var(--rf-muted); font-size:clamp(9.5px,.95vw,12.5px); font-weight:500; }
.rf-ring { flex:none; width:clamp(18px,2vw,26px); height:clamp(18px,2vw,26px); border:1.5px solid var(--rf-green); border-radius:50%; display:grid; place-items:center; color:var(--rf-green); }
.rf-ring .rf-ico { width:clamp(10px,1.1vw,13px); height:clamp(10px,1.1vw,13px); color:var(--rf-green); display:block; }
.rf-hero-art { position:relative; z-index:1; align-self:end; justify-self:end; width:108%; line-height:0; container-type:inline-size; }
.rf-hero-art img { display:block; width:100%; height:auto; }
.rf-tag { position:absolute; right:1.4%; top:38%; display:flex; flex-direction:column; line-height:1.06; text-transform:uppercase; font-family:"Bebas Neue","Oswald","Roboto Condensed","Arial Narrow",Impact,sans-serif; font-stretch:condensed; color:#8f9997; font-size:clamp(8px,2.9cqw,22px); letter-spacing:.3px; pointer-events:none; }
.rf-tag b { font-weight:900; color:#a9b2b0; }
.rf-tag span { font-weight:500; font-size:.8em; }

/* cards */
.rf-card { background:var(--rf-card); border:1px solid var(--rf-line); border-radius:16px; box-shadow:0 18px 45px rgba(0,0,0,.22); padding:18px; min-width:0; }
.rf-card h3 { margin:0; font-size:calc(20px * var(--k)); font-weight:700; color:#f5f7f6; letter-spacing:0; }
.rf-sub { color:var(--rf-muted); font-size:calc(14px * var(--k)); margin:3px 0 0; }
.rf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 22px 0; }
.rf-grid > * { min-width:0; }
.rf-title { display:flex; align-items:center; gap:14px; }
.rf-badge { width:46px; height:46px; border-radius:50%; background:#12361f; color:var(--rf-green); display:grid; place-items:center; flex:none; box-shadow:0 0 0 1px #1f5a2b; }
.rf-badge .rf-ico { width:22px; height:22px; color:var(--rf-green); }
.rf-linkrow { display:grid; grid-template-columns:1fr 150px; gap:10px; margin-top:16px; }
.rf-inputwrap { position:relative; min-width:0; }
.rf-inputwrap input { width:100%; background:#031211; border:1px solid #2b7166; color:#fff; border-radius:10px; padding:14px 42px 14px 14px; font:inherit; font-size:calc(14px * var(--k)); min-width:0; }
.rf-inputwrap .rf-inbtn { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:#fff; padding:6px; border-radius:8px; }
.rf-btn { background:var(--rf-green); color:#041108; border:0; border-radius:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; }
.rf-btn:hover:not(:disabled) { background:var(--rf-green2); }
.rf-share { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.rf-ghost { background:transparent; color:#fff; border:1px solid #22534b; border-radius:10px; padding:11px 2px; font-weight:600; font-size:clamp(10.5px,1.1vw,14px); white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:5px; width:100%; min-width:0; }
.rf-ghost:hover:not(:disabled) { border-color:var(--rf-green); }
.rf-sharewrap { position:relative; }
.rf-qr { position:absolute; z-index:30; right:0; top:calc(100% + 10px); background:#fff; color:#000; border-radius:14px; padding:14px; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.55); width:230px; }
.rf-qr canvas { width:200px; height:200px; image-rendering:pixelated; display:block; margin:0 auto; }
.rf-qr p { margin:8px 0 0; font-size:calc(12px * var(--k)); word-break:break-all; color:#333; }
.rf-msg { min-height:20px; margin-top:12px; font-size:calc(13.5px * var(--k)); color:var(--rf-muted); }
.rf-msg.ok { color:var(--rf-green); } .rf-msg.err { color:var(--rf-danger); }

/* right column of the top grid: stats card + quote card */
.rf-rightcol { display:flex; flex-direction:column; gap:16px; }
.rf-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:18px 8px; }
.rf-stats > div { text-align:center; padding:6px 12px; border-right:1px solid #173b34; }
.rf-stats > div:last-child { border-right:0; }
.rf-stats .rf-ico { width:clamp(22px,2.2vw,30px); height:clamp(22px,2.2vw,30px); color:var(--rf-green); margin-bottom:4px; }
.rf-stats b { display:block; font-size:clamp(18px,2.05vw,28px); color:var(--rf-green); font-weight:800; line-height:1.15; }
.rf-stats .t { display:block; color:#d3ddda; font-size:clamp(12px,1.4vw,14px); margin-top:2px; }
.rf-quote { display:flex; gap:14px; align-items:flex-start; padding:18px 20px; color:#edf3f1; font-size:calc(16px * var(--k)); }
.rf-quote .qm { font-size:calc(34px * var(--k)); line-height:1; font-weight:800; color:#d9e5e1; flex:none; margin-top:-2px; font-family:Georgia,serif; }
.rf-quote .by { margin-left:auto; align-self:flex-end; color:var(--rf-muted); font-size:calc(13px * var(--k)); white-space:nowrap; }

/* how it works */
.rf-how { margin:16px 22px 0; }
.rf-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.rf-head .rf-sub { margin:0; }
.rf-headl { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.rf-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.4fr); gap:6px; margin-top:20px; align-items:stretch; }
.rf-step { position:relative; padding:4px 26px 6px 6px; text-align:center; }
.rf-step:not(:nth-last-child(2))::after { content:""; position:absolute; right:6px; top:46%; width:11px; height:11px; border-right:2px solid var(--rf-green); border-top:2px solid var(--rf-green); transform:rotate(45deg); opacity:.75; }
.rf-sh { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:clamp(12px,1.25vw,16px); white-space:nowrap; }
.rf-num { display:inline-grid; place-items:center; width:clamp(26px,2.9vw,32px); height:clamp(26px,2.9vw,32px); border:2px solid var(--rf-green); border-radius:50%; color:var(--rf-green); font-weight:700; flex:none; font-size:clamp(12px,1.3vw,15px); }
.rf-step .rf-ico.big { width:clamp(30px,3.3vw,42px); height:clamp(30px,3.3vw,42px); color:#fff; display:block; margin:16px auto 10px; }
.rf-step .rf-ico.big.g { color:var(--rf-green); }
.rf-step p { margin:0 auto; color:#bdc9c5; line-height:1.5; max-width:210px; font-size:calc(14.5px * var(--k)); }
.rf-aside { border:1.5px solid var(--rf-green); border-radius:14px; padding:18px 20px; background:radial-gradient(circle at top left,rgba(164,255,0,.16),transparent 55%); box-shadow:0 0 26px rgba(164,255,0,.14); display:flex; flex-direction:column; justify-content:center; }
.rf-aside .row { display:flex; gap:16px; align-items:center; }
.rf-aside .rf-ico { width:clamp(30px,3.4vw,46px); height:clamp(30px,3.4vw,46px); color:var(--rf-green); flex:none; }
.rf-aside h4 { margin:0; font-size:clamp(12px,1.25vw,17px); line-height:1.55; font-weight:600; }
.rf-script { color:var(--rf-green); font-family:"Segoe Script","Brush Script MT","Lucida Handwriting",cursive; font-style:italic; font-weight:700; font-size:clamp(13px,1.75vw,23px); margin-top:12px; display:inline-block; border-bottom:3px solid rgba(164,255,0,.75); border-radius:0 0 40% 40%; padding-bottom:2px; align-self:flex-start; white-space:nowrap; }

/* performance */
.rf-perf { margin:16px 22px 0; }
.rf-range { display:flex; gap:2px; background:#031211; border:1px solid #133d36; border-radius:10px; padding:3px; }
.rf-range button { background:transparent; border:0; color:var(--rf-muted); padding:7px 14px; border-radius:8px; font-weight:600; font-size:calc(13.5px * var(--k)); }
.rf-range button[aria-pressed=true] { color:var(--rf-green); background:#0d2b24; box-shadow:inset 0 0 0 1px #4b9d32; }
.rf-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rf-load { display:inline-flex; align-items:center; gap:8px; background:transparent; color:#fff; border:1px solid #22534b; border-radius:10px; padding:9px 14px; font-weight:700; font-size:calc(13.5px * var(--k)); }
.rf-load:hover:not(:disabled) { border-color:var(--rf-green); }
.rf-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.rf-metric { display:flex; gap:14px; align-items:center; background:#0b1a19; border:1px solid #133d36; border-radius:12px; padding:16px; min-width:0; }
.rf-mi { flex:none; width:46px; height:46px; display:grid; place-items:center; color:var(--rf-green); background:radial-gradient(circle,rgba(164,255,0,.18),transparent 70%); border-radius:50%; }
.rf-mi .rf-ico { width:28px; height:28px; color:var(--rf-green); }
.rf-metric strong { display:block; font-size:calc(25px * var(--k)); line-height:1.15; font-weight:800; overflow-wrap:anywhere; color:#f5f7f6; }
.rf-metric .l { display:block; color:#d7e1de; font-size:calc(14px * var(--k)); margin-top:2px; }
.rf-metric small { color:var(--rf-green); font-size:calc(12.5px * var(--k)); }

/* bottom: left = earnings + accordions, right = code + promo */
.rf-bottom { display:grid; grid-template-columns:2fr 1fr; gap:16px; padding:16px 22px 0; align-items:start; }
.rf-bottom > * { min-width:0; }
.rf-left, .rf-stack { display:flex; flex-direction:column; gap:16px; }
.rf-tablewrap { overflow-x:auto; margin-top:12px; border:1px solid #153a34; border-radius:10px; }
.rf-card table { width:100%; border-collapse:collapse; font-size:calc(12.5px * var(--k)); }
.rf-card th, .rf-card td { padding:11px 9px; border-bottom:1px solid #153a34; border-right:1px solid #11302b; text-align:left; white-space:nowrap; color:#e9f1ee; }
.rf-card th:last-child, .rf-card td:last-child { border-right:0; }
.rf-card tbody tr:last-child td { border-bottom:0; }
.rf-card thead th { background:#0f1f22; color:#9fb0ab; font-weight:600; }
.rf-card tbody tr { background:#031311; }
.rf-mono { font-family:ui-monospace,Consolas,monospace; }
.rf-muted-cell { color:var(--rf-muted); font-style:italic; }
.rf-card td.rf-empty { padding:28px 0; text-align:center; color:var(--rf-muted); border-right:0; }
.rf-xlink { color:var(--rf-green); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.rf-xlink .rf-ico { width:16px; height:16px; color:#fff; }
.rf-tok { display:inline-flex; align-items:center; gap:6px; }
/* Default margin is for the "Earned so far" totals line (a plain text run, not
   a flex row, so the icon needs its own gap); .rf-tok's own `gap` already
   spaces its icon, so that case is reset to 0 right below. */
.rf-tok-ico { width:18px; height:18px; border-radius:50%; object-fit:cover; flex:none; vertical-align:middle; margin-right:6px; }
.rf-tok .rf-tok-ico { margin-right:0; }
.rf-totals { margin-top:10px; color:var(--rf-muted); font-size:calc(13px * var(--k)); }
.rf-totals-note { display:block; margin-top:4px; font-size:calc(11.5px * var(--k)); line-height:1.4; }
.rf-codebox { display:flex; align-items:center; gap:12px; border:1px solid #2b7166; border-radius:10px; padding:6px 6px 6px 14px; margin:12px 0; background:#0a191a; }
.rf-codebox .lab { color:#e9f1ee; font-size:calc(14px * var(--k)); flex:none; }
.rf-codebox .val { flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--rf-green); border-radius:8px; padding:8px 12px; min-width:0; background:#061614; }
.rf-codebox .val span { font-size:calc(20px * var(--k)); font-weight:700; color:var(--rf-green); overflow-wrap:anywhere; }
.rf-iconbtn { background:transparent; border:0; color:#fff; padding:4px; border-radius:6px; }
.rf-rules { list-style:none; padding:0; margin:10px 0; }
.rf-rules li { position:relative; padding-left:28px; margin:9px 0; color:#d2ddda; font-size:calc(14.5px * var(--k)); }
.rf-rules li::before { content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:5px; background:var(--rf-green); }
.rf-rules li::after { content:""; position:absolute; left:6px; top:5px; width:5px; height:9px; border:solid #05140f; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.rf-promo { display:flex; align-items:stretch; padding:0; overflow:hidden; background:radial-gradient(circle at left,rgba(164,255,0,.16),transparent 48%),#041514; }
.rf-promo .art { width:112px; flex:none; min-height:140px; background:url(./assets/referral/promo-more-traders.png) left center/auto 100% no-repeat; -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent); mask-image:linear-gradient(90deg,#000 62%,transparent); }
.rf-promo .copy { padding:16px 16px 16px 8px; display:flex; flex-direction:column; justify-content:center; }
.rf-promo h3 { font-size:clamp(14px,1.5vw,16px); line-height:1.4; margin-bottom:12px; }
.rf-promo .rf-btn { padding:12px 14px; }

/* referrer's own status line */
.rf-status { font-size:calc(13.5px * var(--k)); color:var(--rf-muted); margin:6px 0 2px; }
.rf-status b { color:var(--rf-green); }

/* accordions (left column, as in the approved reference) */
.rf-acc { display:flex; flex-direction:column; gap:10px; }
.rf-acc details { background:#021412; border:1px solid var(--rf-line); border-radius:12px; }
.rf-acc summary { padding:16px 18px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:14px; list-style:none; color:#fff; }
.rf-acc summary::-webkit-details-marker { display:none; }
.rf-acc summary::after { content:""; margin-left:auto; width:9px; height:9px; border-right:2px solid #cfd9d5; border-bottom:2px solid #cfd9d5; transform:rotate(45deg); transition:transform .15s; }
.rf-acc details[open] summary::after { transform:rotate(-135deg); }
.rf-acc-body { padding:0 20px 16px; color:#cdd9d5; font-size:calc(14px * var(--k)); }
.rf-acc-body ul { margin:0; padding-left:20px; } .rf-acc-body li { margin:6px 0; } .rf-acc-body p { margin:8px 0; }

/* footer: replaces the site's X-only footer on this page (app.js skips building its own when .site-footer exists) */
body[data-page="referral"] .site-footer.rf-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 26px; margin-top:0; border-top:1px solid #173b34; color:#a9b7b3; font-size:calc(14px * var(--k)); width:100%; background:#000a0d; }
.rf-foot .brand { display:flex; align-items:center; gap:10px; color:#fff; font-size:calc(22px * var(--k)); font-weight:700; text-decoration:none; }
.rf-foot .brand img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.rf-foot .brand b { color:#a4ff00; font-weight:700; }
.rf-foot .tag { margin-right:auto; margin-left:6px; }
body[data-page="referral"] .site-footer.rf-foot .x-link { color:#fff; }
body[data-page="referral"] .site-footer.rf-foot .x-link:hover { color:#a4ff00; background:rgba(164,255,0,.12); }
.rf-foot .script { color:#a4ff00; font-family:"Segoe Script","Brush Script MT","Lucida Handwriting",cursive; font-style:italic; font-weight:700; font-size:calc(20px * var(--k)); padding-left:20px; border-left:1px solid #1f4a42; }

@media (max-width:900px){
  .rf-hero { display:block; }
  .rf-hero-copy { padding:28px 16px 6px; }
  .rf-hero h2 { white-space:normal; font-size:clamp(17px,3.6vw,24px); }
  .rf-hero h1 { font-size:clamp(30px,6.5vw,44px); }
  .rf-hero p { font-size:clamp(15px,2.6vw,18px); }
  .rf-proofs { flex-wrap:wrap; }
  .rf-proofs li { font-size:calc(13px * var(--k)); } .rf-proofs small { font-size:calc(11.5px * var(--k)); }
  .rf-ring { width:22px; height:22px; }
  .rf-hero-art { margin-top:6px; width:100%; justify-self:auto; }
}
@media (max-width:760px){
  .rf-grid, .rf-bottom { grid-template-columns:minmax(0,1fr); padding-left:16px; padding-right:16px; }
  .rf-how, .rf-perf { margin-left:16px; margin-right:16px; }
  .rf-stats { grid-template-columns:1fr; } .rf-stats > div { border-right:0; border-bottom:1px solid #173b34; padding:12px; } .rf-stats > div:last-child { border-bottom:0; }
  .rf-steps { grid-template-columns:1fr 1fr; } .rf-step::after { display:none !important; } .rf-aside { grid-column:1 / -1; }
  .rf-metrics { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .rf-steps, .rf-metrics { grid-template-columns:1fr; } .rf-share { grid-template-columns:1fr; } .rf-linkrow { grid-template-columns:1fr; }
  .rf-proofs { flex-direction:column; gap:10px; } .rf-quote { flex-wrap:wrap; } .rf-codebox { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){ .rf-acc summary::after { transition:none; } }
.rf-money { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.rf-mbox { background:#0b1a19; border:1px solid #133d36; border-radius:12px; padding:16px; min-width:0; }
.rf-mbox .l { display:block; color:var(--rf-muted); font-size:calc(13px * var(--k)); }
.rf-mbox strong { display:block; font-size:clamp(20px,2.3vw,30px); font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.rf-mbox.owed { border-color:#4b9d32; } .rf-mbox.owed strong { color:var(--rf-green); }
.rf-bar { height:6px; border-radius:6px; background:#0d2b24; margin-top:10px; overflow:hidden; } .rf-bar i { display:block; height:100%; background:var(--rf-green); border-radius:6px; }
#payWrap { margin-top:10px; }
@media (max-width:520px){ .rf-money { grid-template-columns:1fr; } }
.rf-connecthint { display:none; margin:10px 0 0; color:var(--rf-muted); font-size:calc(14px * var(--k)); }
.rf[data-state=disc] .rf-connecthint { display:block; }
.rf[data-state=disc] .rf-linkrow, .rf[data-state=disc] .rf-share, .rf[data-state=disc] .rf-perf, .rf[data-state=disc] .rf-credits, .rf[data-state=disc] .rf-codecard { display:none; }
.rf[data-state=conn] .rf-share { display:none; }
.rf-money.rf-loading strong { opacity:.45; animation:rfpulse 1s ease-in-out infinite alternate; }
@keyframes rfpulse { from { opacity:.25; } to { opacity:.6; } }
@media (prefers-reduced-motion:reduce){ .rf-money.rf-loading strong { animation:none; } }

/* NOT CONNECTED (handoff BBS_Referral_30pct, styles.css as supplied): hero + three steps replace the connected hero until a wallet is connected;
   the link card ("Your Referral Link") shows only once a wallet is connected. */
.rfh, .rfh-steps { display:none; }
.rf[data-state=disc] .rfh { display:grid; }
.rf[data-state=disc] .rfh-steps { display:grid; }
.rf[data-state=disc] .rf-hero { display:none; }
.rf[data-state=disc] [aria-labelledby=linkTitle] { display:none; }
.rf[data-state=disc] .rf-grid { grid-template-columns:minmax(0,1fr); }
.rfh { --lime:#b6ff00; position:relative; isolation:isolate; grid-template-columns:minmax(0,44%) 1fr; min-height:640px; align-items:center; padding:0 28px; border-bottom:1px solid rgba(72,255,116,.22); background:#010a07; }
.rfh-copy { position:relative; z-index:2; padding:36px 0 44px; }
.rfh-eyebrow { color:var(--lime); font-weight:900; letter-spacing:.04em; margin-bottom:12px; }
.rfh h1 { font-size:clamp(38px,3.9vw,70px); line-height:1; margin:0 0 22px; font-weight:950; letter-spacing:-.04em; white-space:nowrap; }
.rfh h1 span { color:var(--lime); } .rfh h1 em { font-style:normal; color:#fff; }
.rfh-lead { max-width:470px; color:#c8d5cc; font-size:clamp(16px,1.25vw,19px); line-height:1.45; margin:0; }
.rfh-checks { list-style:none; padding:0; margin:25px 0 28px; display:grid; gap:12px; }
.rfh-checks li::before { content:"\2713"; display:inline-grid; place-items:center; width:23px; height:23px; border-radius:50%; background:var(--lime); color:#071005; margin-right:10px; font-weight:900; }
.rfh-actions { display:flex; gap:16px; flex-wrap:wrap; }
.rfh-primary { background:linear-gradient(90deg,#b7ff00,#e6ff54); border:0; border-radius:999px; color:#071005; font-weight:900; padding:14px 24px; box-shadow:0 0 24px rgba(170,255,0,.28); cursor:pointer; }
.rfh-secondary { background:transparent; color:#fff; border:1px solid #6d8d7a; border-radius:999px; padding:14px 24px; font-weight:800; text-decoration:none; }
/* the art is the hero's background (the left of it is empty: the copy is live text over it) */
.rfh-art { position:absolute; inset:0; z-index:0; overflow:hidden; }
.rfh-art img { width:100%; height:100%; object-fit:cover; object-position:right center; display:block; }
.rfh-steps { margin:18px 28px 0; border:1px solid rgba(72,255,116,.45); border-radius:22px; background:linear-gradient(180deg,rgba(10,23,16,.95),rgba(3,11,7,.95));
  grid-template-columns:1.45fr 1fr auto 1fr auto 1fr; gap:18px; align-items:center; padding:18px 28px; }
.rfh-steps-title small { color:#b6ff00; font-weight:900; } .rfh-steps-title h2 { margin:5px 0 4px; font-size:32px; } .rfh-steps-title h2 span { color:#b6ff00; }
.rfh-steps-title p, .rfh-steps article p { margin:0; color:#c8d5cc; }
.rfh-steps article { display:flex; gap:14px; border:1px solid rgba(72,255,116,.55); border-radius:18px; padding:16px; background:#08140d; }
.rfh-steps article b { width:42px; height:42px; min-width:42px; border-radius:50%; display:grid; place-items:center; border:2px solid #b6ff00; color:#b6ff00; font-size:20px; }
.rfh-steps article h3 { margin:0 0 4px; font-size:18px; }
.rfh-arrow { color:#b6ff00; font-size:26px; }
@media (max-width:980px){
  .rf[data-state=disc] .rfh { grid-template-columns:1fr; min-height:0; padding:0 16px; }
  .rfh-art { position:relative; inset:auto; order:-1; margin:0 -16px; height:min(86vw,420px); }
  .rfh-art img { object-position:60% center; }
  .rfh-copy { padding-top:14px; }
  .rfh h1 { font-size:clamp(40px,12vw,64px); white-space:normal; line-height:.98; }
  .rfh-lead { max-width:none; font-size:17px; }
  .rf[data-state=disc] .rfh-steps { grid-template-columns:1fr; margin:18px 16px 0; } .rfh-arrow { display:none; }
}

/* CONNECTED (BBS_Referral_Connected_Dashboard_Handoff): hero, account command centre, performance rail, recent earnings + status. Same page, reflow only. */
.rf[data-state=disc] .rfc { display:none; }
.rf[data-state=disc] .rfc-accwrap { margin-top:16px; }
.rfc { --lime:#b8ff00; --bd:rgba(80,210,123,.38); --bd2:rgba(184,255,0,.72); --mut:#9ab6a4; margin-left:28px; margin-right:28px; }
.rfc .rf-ico { width:1.5em; height:1.5em; color:var(--lime); }
.rfc-hero { display:grid; grid-template-columns:54% 46%; align-items:center; min-height:210px; margin:0; padding:0 28px; border-bottom:1px solid rgba(64,196,99,.18); overflow:hidden; }
.rfc-hero-copy { padding:22px 0 18px; }
.rfc-eyebrow { color:var(--lime); font-weight:900; letter-spacing:.04em; font-size:15px; margin-bottom:6px; }
.rfc-hero h1 { font-size:clamp(38px,4.5vw,72px); letter-spacing:-.04em; line-height:.95; margin:0; font-weight:900; }
.rfc-hero h1 span { color:var(--lime); }
.rfc-sub { font-size:20px; color:#dcece1; margin:10px 0 14px; }
.rfc-points { list-style:none; padding:0; margin:0; display:flex; gap:28px; flex-wrap:wrap; font-weight:700; }
.rfc-points li::before { content:"\2713"; color:var(--lime); margin-right:8px; font-weight:900; }
.rfc-hero-art { height:100%; display:flex; align-items:flex-end; justify-content:flex-end; }
.rfc-hero-art img { width:100%; height:210px; object-fit:cover; object-position:center left; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%); mask-image:linear-gradient(90deg,transparent,#000 18%); }
.rfc-account, .rfc-perf, .rfc-panel { background:linear-gradient(180deg,rgba(9,28,18,.96),rgba(5,17,12,.96)); border:1px solid var(--bd); box-shadow:0 0 28px rgba(152,255,0,.10); }
.rfc-account { border-color:var(--bd2); border-radius:24px; padding:20px 28px 18px; margin-top:16px; }
.rfc-acc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-bottom:14px; border-bottom:1px solid rgba(84,203,115,.22); flex-wrap:wrap; }
.rfc-title { display:flex; align-items:center; gap:12px; } .rfc-title .rf-ico { width:34px; height:34px; }
.rfc-title h2, .rfc-panel h2 { margin:0; font-size:26px; font-weight:800; } .rfc-title p, .rfc-panel-head p { margin:3px 0 0; color:var(--mut); font-size:14px; }
.rfc-chips { display:flex; gap:8px; flex-wrap:wrap; }
.rfc-chip { border:1px solid var(--bd); background:#07120e; border-radius:999px; padding:8px 13px; display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px; }
.rfc-chip img { width:20px; height:20px; border-radius:50%; }
.rf[data-state=active] .rfc-on-active, .rfc-on-active { color:var(--lime); border-color:var(--bd2); }
.rf:not([data-state=active]) .rfc-on-active { display:none; }
.rf[data-state=active] .rfc-on-conn { display:none; }
.rfc-money { display:grid; grid-template-columns:1fr 1fr 1.35fr 1fr; gap:18px; align-items:stretch; padding:16px 0 10px; }
.rfc-stat, .rfc-rule { display:flex; gap:14px; align-items:center; min-width:0; padding:6px 18px; border-right:1px solid rgba(129,190,145,.22); }
.rfc-stat .l { display:block; color:#d8e8dc; }
.rfc-stat strong { display:block; font-size:clamp(24px,2.4vw,34px); line-height:1.1; overflow-wrap:anywhere; }
.rfc-owed { border:1px solid var(--bd2); border-radius:16px; background:radial-gradient(circle at 50% 0%,rgba(184,255,0,.16),transparent 52%),#0c2417; box-shadow:0 0 26px rgba(184,255,0,.14); }
.rfc-owed strong { font-size:clamp(28px,3vw,42px); color:var(--lime); }
.rfc-rule { border-right:0; } .rfc-rule strong { display:block; font-size:19px; } .rfc-rule span { color:#d8e8dc; }
.rfc-loadrow { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:2px 0 6px; }
.rfc-load { border:1px solid var(--bd2); background:#07120e; color:#fff; border-radius:12px; padding:9px 14px; font-weight:800; display:inline-flex; gap:8px; align-items:center; }
.rfc-loadrow .rf-msg { margin:0; }
.rfc-linkrow { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding-top:12px; margin-top:8px; border-top:1px solid rgba(84,203,115,.22); }
.rfc-linklabel { display:flex; gap:9px; align-items:center; white-space:nowrap; }
.rfc-linkbox { display:flex; align-items:center; min-width:0; border:1px solid var(--bd); background:#04100c; border-radius:12px; padding:0 8px 0 14px; }
.rfc-linkbox input { flex:1; min-width:0; background:transparent; border:0; color:#e4f4e9; padding:13px 0; font:inherit; outline:0; text-overflow:ellipsis; }
.rfc-linkbox .rf-inbtn { background:transparent; border:0; color:#fff; padding:6px 8px; }
.rfc-copy { border:0; border-radius:13px; padding:12px 22px; font-weight:900; color:#061006; background:linear-gradient(90deg,#b8ff00,#e8ff4d); display:inline-flex; gap:8px; align-items:center; justify-content:center; }
.rfc-copy .rf-ico { color:#061006; }
.rfc-perf { margin-top:12px; border-radius:18px; display:grid; grid-template-columns:1.15fr .65fr .65fr .65fr .72fr auto; align-items:center; gap:16px; padding:12px 20px; }
.rfc-perf-title { display:flex; gap:12px; align-items:center; } .rfc-perf-title strong { display:block; font-size:18px; } .rfc-perf-title span, .rfc-pstat span { display:block; color:var(--mut); font-size:13px; }
.rfc-pstat { display:flex; gap:12px; align-items:center; border-left:1px solid rgba(136,194,151,.2); padding-left:22px; } .rfc-pstat strong { display:block; font-size:24px; }
.rfc-range { display:flex; border:1px solid var(--bd); border-radius:999px; padding:3px; background:#07120e; gap:0; }
.rfc-range button { border:0; background:transparent; color:#dceade; padding:8px 14px; border-radius:999px; font-weight:800; }
.rfc-range button[aria-pressed=true] { background:var(--lime); color:#061006; }
.rfc-lower { display:grid; grid-template-columns:2.15fr 1fr; gap:18px; margin-top:14px; }
.rfc-panel { border-radius:20px; padding:18px; min-width:0; }
.rfc-panel[aria-labelledby="earnTitle"] { border-color:var(--bd2); }
.rfc-panel-head { display:flex; gap:12px; align-items:flex-start; } .rfc-panel-head .rf-ico { width:30px; height:30px; margin-top:2px; }
.rfc-panel h2 { font-size:24px; }
.rfc-tablewrap {
  overflow:auto; margin-top:14px; border:1px solid rgba(83,183,111,.25); border-radius:14px;
  scrollbar-width:thin; scrollbar-color:var(--rf-green) rgba(255,255,255,.06);
}
.rfc-tablewrap::-webkit-scrollbar { width:9px; height:9px; }
.rfc-tablewrap::-webkit-scrollbar-track { background:rgba(255,255,255,.06); border-radius:14px; }
.rfc-tablewrap::-webkit-scrollbar-thumb { background:var(--rf-green2); border-radius:8px; border:2px solid rgba(5,20,16,.9); background-clip:padding-box; }
.rfc-tablewrap::-webkit-scrollbar-thumb:hover { background:var(--rf-green); }
.rfc-tablewrap::-webkit-scrollbar-corner { background:transparent; }
.rfc-tablewrap table { border-collapse:collapse; width:100%; min-width:760px; }
.rfc-tablewrap th, .rfc-tablewrap td { padding:12px 14px; text-align:left; border-bottom:1px solid rgba(104,169,122,.18); font-size:14px; }
.rfc-tablewrap th { color:#bcd0c1; background:#0c1c15; font-size:13px; }
.rfc-statuslist { list-style:none; padding:0; margin:16px 0; display:grid; gap:11px; }
.rfc-statuslist li::before { content:"\2713"; color:var(--lime); margin-right:10px; font-weight:900; }
.rfc-statuslist li.rfc-pending::before { content:"\25CB"; color:#9ab6a4; }
.rf:not([data-state=active]) .rfc-statuslist li.rfc-on-active { display:none; }
.rf[data-state=active] .rfc-statuslist li.rfc-on-conn { display:none; }
.rfc-shield { display:grid; place-items:center; padding:8px 0 14px; }
.rfc-shield .rf-ico { width:112px; height:112px; padding:30px; border:2px solid var(--lime); border-radius:38% 38% 46% 46%; background:radial-gradient(circle,rgba(184,255,0,.2),rgba(10,34,21,.8)); box-shadow:0 0 38px rgba(184,255,0,.18); }
.rfc-rules { width:100%; display:flex; gap:10px; align-items:center; justify-content:center; background:#07120e; color:#fff; border:1px solid var(--bd2); border-radius:12px; padding:10px 14px; font-weight:800; }
.rfc-accwrap { margin:14px 28px 0; }
@media (max-width:1100px){
  .rfc-hero { grid-template-columns:1fr; } .rfc-hero-art { order:-1; height:150px; } .rfc-hero-art img { height:150px; }
  .rfc-money { grid-template-columns:1fr 1fr; } .rfc-perf { grid-template-columns:1fr 1fr; } .rfc-range { grid-column:1/-1; justify-self:start; }
  .rfc-lower { grid-template-columns:1fr; }
}
@media (max-width:720px){
  .rfc, .rfc-accwrap { margin-left:14px; margin-right:14px; } .rfc-hero { padding:0 14px; margin:0; }
  .rfc-hero h1 { font-size:46px; } .rfc-points { display:grid; gap:8px; }
  .rfc-acc-head { display:grid; } .rfc-account { padding:18px 16px; }
  .rfc-money { grid-template-columns:1fr; } .rfc-stat, .rfc-rule { border-right:0; }
  .rfc-linkrow { grid-template-columns:1fr; } .rfc-perf { grid-template-columns:1fr; } .rfc-pstat { border-left:0; padding-left:0; }
  .rfc-range { grid-column:auto; overflow:auto; max-width:100%; }
}
.rfc-account .rf-msg:empty { display:none; }
/* Referral Status as in the wireframe: list left, shield right */
.rfc-statusbody { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 16px; }
.rfc-statuslist { margin:0; }
.rfc-statuslist li { display:flex; align-items:center; gap:10px; }
.rfc-statuslist li::before { content:"\2713"; display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:var(--lime); color:#061006; font-size:13px; font-weight:900; margin:0; }
.rf:not([data-state=active]) .rfc-statuslist li.rfc-need { color:#9ab6a4; }
.rf:not([data-state=active]) .rfc-statuslist li.rfc-need::before { content:""; background:transparent; border:2px solid #4d6b59; }
.rfc-shieldimg { width:min(150px,40%); height:auto; flex:none; border-radius:14px; }
/* refresh / sign-in: a held session answers it silently ("Refresh balance"); with none yet, the same
   button asks the wallet to sign ("Sign in to see balance") -- always visible, the label says which. */
.rfc-refresh { height:36px; border-radius:18px; border:1px solid var(--bd,rgba(80,210,123,.38)); background:#07120e; color:#fff; display:inline-flex; align-items:center; gap:7px; padding:0 14px; white-space:nowrap; }
.rfc-refresh .rf-ico { width:18px; height:18px; flex:none; }
.rfc-refresh-label { font-size:calc(13px * var(--k)); font-weight:700; }
.rfc-refresh:hover { border-color:rgba(184,255,0,.72); }
.rfc-refresh:disabled { opacity:.6; cursor:progress; }
.rfc-refresh.spin .rf-ico { animation:rfcspin 0.9s linear infinite; }
@keyframes rfcspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .rfc-refresh.spin .rf-ico { animation:none; } }
.rfc-panel-head-refresh { justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.rf-credit-amt { color:var(--rf-green); font-weight:800; }
@media (max-width:640px){ .rfc-refresh-label { display:none; } .rfc-refresh { padding:0; width:36px; justify-content:center; border-radius:50%; } }