/* Referral program: scoped to this panel so existing account panels are unchanged. */ html.referral-panel-open, body.referral-panel-open { overflow: hidden; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) { --rp-gold: var(--palette-accent-dark, #ffb38a); --rp-blue: #8cbbf0; --rp-green: #8bd1bd; --rp-bg: var(--palette-page-dark, #101a3b); --rp-card: var(--palette-surface-dark, #17264d); --rp-line: rgba(var(--palette-line-dark-rgb, 91, 155, 255), .28); --rp-text: var(--palette-text-dark, #f3f7ff); --rp-muted: var(--palette-muted-dark, #b2c4e3); --rp-tint-rgb: var(--palette-line-dark-rgb, 91, 155, 255); --rp-focus: var(--palette-focus-dark, #52e0d2); --rp-scroll: var(--palette-scroll-dark, #567bc4); --rp-glow: rgba(var(--palette-focus-dark-rgb, 82, 224, 210), .16); --rp-action: linear-gradient(135deg, var(--palette-action-start, #ffb36b), var(--palette-action-end, #ff825f)); --rp-action-ink: var(--palette-action-ink, #142141); position: fixed; inset: 0; z-index: 1400; visibility: hidden; pointer-events: none; background: transparent; color: var(--rp-text); font-family: "Lato", "Segoe UI", Arial, sans-serif; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal).panel-open { visibility: visible; pointer-events: auto; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) [hidden] { display: none !important; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-view { padding: 0; margin: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) *, :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) *::before, :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) *::after { box-sizing: border-box; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-overlay { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(var(--palette-overlay-rgb, 7, 14, 42), 0.6588235294); opacity: 0; transition: opacity .2s; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal).panel-open .rp-overlay { opacity: 1; } body.frontend-theme :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-panel { position: absolute; inset: 0 0 0 auto; z-index: 1; display: flex; flex-direction: column; width: min(100%, 700px); max-width: 700px; height: 100%; padding: 0; overflow: hidden; background: var(--rp-bg) !important; border-left: 1px solid var(--rp-line); box-shadow: -20px 0 80px #0005; transform: translateX(100%); transition: transform .25s ease; } body.frontend-theme :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal).panel-open .rp-panel { transform: translateX(0); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) :is(h2,h3,h4,p) { margin: 0; text-transform: none; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) :is(h2,h3,h4,strong) { color: var(--rp-text); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) p { color: var(--rp-muted); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) button { font: inherit; cursor: pointer; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) button:disabled { cursor: not-allowed; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-header { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 20px 24px 18px; border-bottom: 1px solid var(--rp-line); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-heading { flex: 1; min-width: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-heading h2 { font-size: 23px; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-eyebrow { display: block; margin-bottom: 5px; color: var(--rp-gold); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rp-line); border-radius: 12px; background: rgba(var(--rp-tint-rgb), 0.035); color: var(--rp-gold); font-size: 23px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-icon-button:hover { background: rgba(var(--rp-tint-rgb), 0.125); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0 20px; border-bottom: 1px solid var(--rp-line); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tabs button { position: relative; min-height: 54px; padding: 10px 4px; border: 0; background: transparent; color: var(--rp-muted); font-size: 13px; font-weight: 700; line-height: 1.3; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tabs button[aria-selected="true"] { color: var(--rp-gold); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 14px 0; height: 3px; background: var(--rp-gold); border-radius: 4px 4px 0 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px calc(30px + env(safe-area-inset-bottom,0px)); scrollbar-width: thin; scrollbar-color: var(--rp-scroll) transparent; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-card { padding: 22px; border: 1px solid rgba(var(--rp-tint-rgb), 0.333); border-radius: 20px; background: radial-gradient(ellipse at top right,var(--rp-glow),transparent 65%),linear-gradient(130deg,var(--palette-raised-dark, #203561),var(--palette-surface-dark, #17264d)); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-label i { color: var(--rp-gold); font-size: 20px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-daily-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 9px; border: 1px solid rgba(var(--rp-tint-rgb), 0.188); border-radius: 20px; color: var(--rp-gold); font-size: 10px; font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-daily-pill > span[aria-hidden] { width: 5px; height: 5px; border-radius: 50%; background: var(--rp-gold); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-value { padding: 15px 0 12px; color: var(--rp-text); font-size: clamp(32px,7vw,44px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-bottom p { max-width: 250px; font-size: 12px; line-height: 1.6; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 15px; border: 1px solid rgba(var(--rp-tint-rgb), 0.376); border-radius: 11px; background: var(--rp-action); color: var(--rp-action-ink); font-size: 12px; font-weight: 800; line-height: 1.3; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-button-secondary { background: rgba(var(--rp-tint-rgb), 0.031); color: var(--rp-gold); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-withdraw { flex-shrink: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-withdraw:disabled { opacity: .48; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-withdraw-message { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--rp-line); border-radius: 10px; color: var(--rp-gold); background: var(--rp-card); font-size: 12px; line-height: 1.6; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-withdraw-message.is-error { color: #ffb5b5; border-color: #e9777759; background: #a42f2f18; } body.frontend-theme:not(.dark) :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-withdraw-message.is-error { color: #a02f37; background: #fff2f2; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-availability { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(var(--rp-tint-rgb), 0.11); font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-invite-card { display: flex; align-items: center; gap: 13px; width: 100%; margin: 14px 0 28px; padding: 15px 17px; border: 1px solid var(--rp-line); border-radius: 15px; background: var(--rp-card); color: var(--rp-text); text-align: left; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-invite-card > span:nth-child(2) { flex: 1; min-width: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-invite-card strong { display: block; font-size: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-invite-card small { display: block; margin-top: 3px; color: var(--rp-muted); font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-invite-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: rgba(var(--rp-tint-rgb), 0.078); color: var(--rp-gold); font-size: 24px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-invite-card > i { color: var(--rp-gold); font-size: 20px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-section-heading h3 { font-size: 20px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-text-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--rp-gold); font-size: 12px; font-weight: 700; white-space: nowrap; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-card { display: flex; flex-direction: column; align-items: flex-start; position: relative; min-width: 0; padding: 18px; border: 1px solid #8cbbf029; border-radius: 16px; background: linear-gradient(145deg,#8cbbf00b,var(--rp-card)); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-indirect { border-color: #8bd1bd29; background: linear-gradient(145deg,#8bd1bd0b,var(--rp-card)); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-icon { position: absolute; top: 17px; right: 15px; color: var(--rp-blue); font-size: 24px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-indirect .rp-stat-icon { color: var(--rp-green); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-card strong { margin: 0 0 7px; font-size: 30px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-card > span:not(.rp-stat-icon) { font-size: 13px; font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-card small { margin-top: 5px; color: var(--rp-muted); font-size: 11px; line-height: 1.5; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-overview-note { display: flex; align-items: flex-start; gap: 8px; margin: 15px 1px 26px; color: var(--rp-muted); font-size: 11px; line-height: 1.5; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-overview-note i { color: var(--rp-green); font-size: 16px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-guide-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 17px 0; border: 0; border-top: 1px solid var(--rp-line); border-bottom: 1px solid var(--rp-line); background: transparent; color: var(--rp-gold); text-align: left; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-guide-link strong { display: block; font-size: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-guide-link small { display: block; margin-top: 4px; color: var(--rp-muted); font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-guide-link > i { font-size: 23px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-section-copy { margin: -5px 0 20px; font-size: 13px; line-height: 1.6; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-team-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-team-toolbar label { color: var(--rp-muted); font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-team-toolbar select { width: auto; min-width: 132px; max-width: 65%; min-height: 38px; padding: 8px 28px 8px 12px; border: 1px solid var(--rp-line); border-radius: 10px; background-color: var(--rp-card); color: var(--rp-text); font: inherit; font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-team-filters { display: flex; gap: 6px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--rp-line); border-radius: 12px; background: var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-registration-summary { display: flex; gap: 12px; margin: 0 0 15px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-registration-summary > span { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 10px; padding: 10px 12px; border: 1px solid var(--rp-line); border-radius: 10px; color: var(--rp-muted); font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-registration-summary strong { font-size: 17px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-team-filters button { flex: 1; min-width: 0; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--rp-muted); font-size: 12px; font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-team-filters button.is-active { background: rgba(var(--rp-tint-rgb), 0.125); color: var(--rp-gold); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-key { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; color: var(--rp-muted); font-size: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-key > span { display: flex; align-items: center; gap: 5px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-key > span:last-child { margin-left: auto; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) :is(.rp-direct-dot,.rp-indirect-dot) { width: 6px; height: 6px; border-radius: 50%; background: var(--rp-blue); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-indirect-dot { background: var(--rp-green); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-root { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; margin-bottom: 8px; border: 1px solid rgba(var(--rp-tint-rgb), 0.314); border-radius: 12px; background: rgba(var(--rp-tint-rgb), 0.063); color: var(--rp-gold); font-size: 13px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree ul { margin: 0; padding: 0 0 0 20px; list-style: none; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li { --rp-tree-line: #8cbbf045; display: block; position: relative; padding: 0 0 8px 19px; border: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li::before { content: ""; position: absolute; top: 24px; left: 0; width: 19px; height: 1px; background: var(--rp-tree-line); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--rp-tree-line); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li:last-child::after { bottom: auto; height: 24px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li ul { padding-left: 10px; margin-top: 8px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li li { --rp-tree-line: #8bd1bd45; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-node { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #8cbbf026; border-radius: 12px; background: var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-node.rp-node-indirect { border-color: #8bd1bd26; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-node-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 31px; height: 31px; border-radius: 10px; background: #8cbbf012; color: var(--rp-blue); font-size: 17px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-node-indirect .rp-node-icon { background: #8bd1bd12; color: var(--rp-green); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-node-copy { min-width: 0; flex: 1; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-node-copy strong { display: block; font-size: 13px; font-weight: 800; letter-spacing: .02em; overflow-wrap: anywhere; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-node-copy time { display: block; margin-top: 2px; color: var(--rp-muted); font-size: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-node-context { opacity: .6; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-muted { color: var(--rp-muted); font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-network-diagram { padding: 22px 15px 0; margin-bottom: 25px; border: 1px solid var(--rp-line); border-radius: 18px; background: radial-gradient(ellipse at top,rgba(var(--rp-tint-rgb), 0.051),transparent 70%),var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-you { display: flex; align-items: center; justify-content: center; gap: 8px; width: 102px; min-height: 46px; margin: auto; border: 1px solid rgba(var(--rp-tint-rgb), 0.439); border-radius: 14px; color: var(--rp-gold); background: rgba(var(--rp-tint-rgb), 0.063); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-you i { font-size: 21px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-you strong { color: var(--rp-gold); font-size: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-stem { width: 1px; height: 22px; margin: auto; background: rgba(var(--rp-tint-rgb), 0.439); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-layer { display: grid; grid-template-columns: minmax(56px,1fr) 54px 54px minmax(56px,1fr); align-items: center; gap: 14px; position: relative; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-layer::before { content: ""; position: absolute; top: -1px; left: calc(50% - 34px); right: calc(50% - 34px); height: 1px; background: #8cbbf065; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-person { display: flex; flex-direction: column; align-items: center; padding: 9px 5px 6px; position: relative; border: 1px solid #8cbbf045; border-radius: 12px; color: var(--rp-blue); background: #8cbbf009; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-person i { font-size: 19px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-person span { margin-top: 2px; font-size: 10px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-layer-caption { color: var(--rp-blue); text-align: right; font-size: 11px; font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-layer-rate { color: var(--rp-blue); font-size: 16px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-layer-game-rate { font-size: 12px; line-height: 1.35; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-branches { display: flex; justify-content: center; gap: 67px; height: 22px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-branches span { width: 1px; background: #8bd1bd65; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-indirect::before { display: none; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-indirect :is(.rp-layer-caption,.rp-layer-rate) { color: var(--rp-green); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-indirect .rp-diagram-person { color: var(--rp-green); border-color: #8bd1bd45; background: #8bd1bd09; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-stop { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; padding: 13px 0; border-top: 1px dashed var(--rp-line); color: var(--rp-muted); font-size: 10px; text-align: center; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-steps { display: flex; flex-direction: column; gap: 22px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-step { display: flex; align-items: flex-start; gap: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-step-number { display: flex; align-items: center; justify-content: center; flex: 0 0 30px; height: 30px; border: 1px solid var(--rp-line); border-radius: 10px; color: var(--rp-gold); background: rgba(var(--rp-tint-rgb), 0.035); font-size: 10px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-step > div { flex: 1; min-width: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-step h4 { margin: 3px 0 6px; font-size: 15px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-step p { font-size: 12px; line-height: 1.7; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-equation { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; padding: 10px 12px; border-radius: 10px; background: var(--rp-card); font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-equation > b { color: var(--rp-muted); font-weight: 400; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-equation strong { color: var(--rp-gold); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-step-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 9px; font-size: 11px; color: var(--rp-muted); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-step-terms > strong { color: var(--rp-gold); font-size: 23px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-step-terms b { margin-left: 5px; color: var(--rp-text); font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-empty { padding: 45px 22px; border: 1px dashed var(--rp-line); border-radius: 18px; text-align: center; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-empty > i, :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-empty-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 0 auto 17px; border: 1px solid var(--rp-line); border-radius: 18px; background: var(--rp-card); color: var(--rp-gold); font-size: 25px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-empty h4 { margin-bottom: 9px; font-size: 17px; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-empty p { max-width: 330px; margin: 0 auto; font-size: 13px; line-height: 1.7; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-empty .rp-button { margin-top: 18px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table-wrap { overflow-x: auto; border: 1px solid var(--rp-line); border-radius: 14px; background: var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table { width: 100%; border-collapse: collapse; color: var(--rp-text); font-size: 13px; line-height: 1.5; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table th { padding: 12px 15px; border-bottom: 1px solid var(--rp-line); background: rgba(var(--rp-tint-rgb), 0.031); color: var(--rp-muted); text-align: left; font-size: 11px; font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table td { padding: 16px 15px; border-bottom: 1px solid var(--rp-line); vertical-align: middle; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table tr:last-child td { border-bottom: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table time { white-space: nowrap; font-variant-numeric: tabular-nums; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table th:last-child, :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-amount { text-align: right; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-credit { color: var(--rp-green); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-withdrawal { color: #f19a9a; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-pagination { display: flex; align-items: center; gap: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-pagination .rp-button { min-height: 38px; padding: 9px 12px; font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) #rp-history-page { white-space: nowrap; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 16px; border: 1px solid #e9777759; border-radius: 14px; background: #a42f2f12; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-error p { font-size: 12px; line-height: 1.6; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-error .rp-button { flex-shrink: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-withdraw-dialog { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 20px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(var(--palette-overlay-rgb, 7, 14, 42), 0.7882352941); cursor: default; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-card { position: relative; width: min(100%, 480px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; border: 1px solid var(--rp-line); border-radius: 22px; background: var(--rp-bg); box-shadow: 0 20px 80px #0006; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-header h3 { font-size: 21px; line-height: 1.3; font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-header .rp-icon-button { flex-shrink: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-balances { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid var(--rp-line); border-radius: 14px; background: var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-balances > span { display: flex; flex-direction: column; gap: 7px; color: var(--rp-muted); font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-balances strong { font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-label { display: block; margin: 17px 0 8px; color: var(--rp-text); font-size: 12px; font-weight: 700; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-input { display: block; width: 100%; min-height: 46px; padding: 12px; border: 1px solid var(--rp-line); border-radius: 10px; background-color: var(--rp-card); color: var(--rp-text); font: inherit; font-size: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) select.rp-wd-input { padding-right: 30px; text-overflow: ellipsis; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-input:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 2px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-validation { min-height: 19px; margin-top: 9px; color: #f19a9a; font-size: 12px; line-height: 1.5; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-error { padding: 13px; margin-bottom: 16px; border: 1px solid #e9777759; border-radius: 11px; background: #a42f2f12; color: #f19a9a; font-size: 12px; line-height: 1.6; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-copy { font-size: 12px; line-height: 1.7; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-summary { margin: 20px 0; border: 1px solid var(--rp-line); border-radius: 14px; background: var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-summary > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px; border-bottom: 1px solid var(--rp-line); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-summary > div:last-child { border: 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-summary dt { flex: 1; color: var(--rp-muted); font-size: 11px; font-weight: 400; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-summary dd { max-width: 60%; margin: 0; font-size: 13px; font-weight: 700; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 23px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-result { text-align: center; padding: 8px 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-result h4 { margin: 10px 0; font-size: 20px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-result p { font-size: 13px; line-height: 1.7; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-reference { margin: 20px 0; padding: 13px; border: 1px solid var(--rp-line); border-radius: 12px; background: var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-reference strong { display: block; margin-top: 5px; overflow-wrap: anywhere; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-result > .rp-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: var(--rp-green); background: var(--rp-card); font-size: 30px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 220px; color: var(--rp-muted); font-size: 13px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-spinner { width: 21px; height: 21px; border: 2px solid var(--rp-line); border-top-color: var(--rp-gold); border-radius: 50%; animation: rp-spin .8s linear infinite; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-notice { margin-bottom: 15px; padding: 12px 14px; border: 1px solid rgba(var(--rp-tint-rgb), 0.314); border-radius: 12px; color: var(--rp-gold); background: rgba(var(--rp-tint-rgb), 0.043); font-size: 12px; } body.frontend-theme:not(.dark) :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) { --rp-gold: var(--palette-accent-light, #a33c21); --rp-blue: #376fa7; --rp-green: #287c65; --rp-bg: var(--palette-page-light, #eff6ff); --rp-card: #fff; --rp-line: rgba(var(--palette-line-light-rgb, 53, 101, 186), .22); --rp-text: var(--palette-text-light, #182b50); --rp-muted: var(--palette-muted-light, #506585); --rp-tint-rgb: var(--palette-line-light-rgb, 53, 101, 186); --rp-focus: var(--palette-focus-light, #00756e); --rp-scroll: var(--palette-scroll-light, #6f8fbd); --rp-glow: rgba(var(--palette-line-light-rgb, 53, 101, 186), .12); } body.frontend-theme:not(.dark) :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-card { background: linear-gradient(125deg,var(--palette-raised-light, #e3efff),#ffffff); border-color: rgba(var(--palette-line-light-rgb, 53, 101, 186), .35); } body.frontend-theme:not(.dark) :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-button:not(.rp-button-secondary) { background: var(--rp-action); color: var(--rp-action-ink); } body.frontend-theme:not(.dark) :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-withdrawal { color: #a02f37; } body.frontend-theme:not(.dark) :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) :is(.rp-wd-error,.rp-wd-validation) { color: #a02f37; } @keyframes rp-spin { to { transform: rotate(360deg); } } @media (max-width: 480px) { :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-header { padding: 15px 16px; gap: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-heading h2 { font-size: 20px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tabs { padding: 0 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tabs button { font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-body { padding: 19px 16px calc(25px + env(safe-area-inset-bottom,0px)); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-card { padding: 18px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-balance-label { font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-daily-pill { font-size: 9px; padding: 4px 7px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-card { padding: 15px 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-icon { right: 11px; font-size: 20px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-stat-card > span:not(.rp-stat-icon) { font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree ul { padding-left: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li { padding-left: 13px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree li::before { width: 13px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-tree-node { padding: 10px; gap: 8px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-node-copy strong { font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-network-diagram { padding-left: 8px; padding-right: 8px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-layer { grid-template-columns: minmax(45px,1fr) 46px 46px minmax(45px,1fr); gap: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-branches { gap: 55px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-diagram-layer::before { left: calc(50% - 28px); right: calc(50% - 28px); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-layer-caption { font-size: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-layer-rate { font-size: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table { font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table th { padding: 11px 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-table td { padding: 14px 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-history-error { align-items: flex-start; flex-direction: column; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-withdraw-dialog { padding: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-wd-card { padding: 20px 17px; max-height: calc(100dvh - 24px); } } @media (prefers-reduced-motion: reduce) { :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-panel, :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-overlay { transition: none; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-spinner { animation: none; } } /* Category selector and one readable tier table, shared by both frontend versions. */ :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-step { padding: 18px; border: 1px solid var(--rp-line); border-radius: 14px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-steps { gap: 16px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-browser { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; margin-top: 18px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-game-categories { display: flex; flex-direction: column; gap: 7px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-game-category { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--rp-line); border-radius: 8px; background: var(--rp-card); color: var(--rp-muted); font: inherit; font-size: 12px; line-height: 1.4; text-align: left; cursor: pointer; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-game-category:hover { color: var(--rp-text); border-color: var(--rp-gold); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-game-category.is-active { background: var(--rp-gold); color: var(--rp-bg); border-color: var(--rp-gold); font-weight: 800; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-content { min-width: 0; overflow: hidden; border: 1px solid var(--rp-line); border-radius: 10px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-heading { padding: 14px; background: var(--rp-card); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-heading h5 { margin: 0 0 3px; color: var(--rp-text); font-size: 15px; font-weight: 800; text-transform: none; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-heading > span { color: var(--rp-muted); font-size: 11px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-table th { padding: 10px 14px; text-align: left; color: var(--rp-muted); font-size: 11px; font-weight: 600; background: rgba(var(--rp-tint-rgb), .06); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-table td { padding: 11px 14px; border-top: 1px solid var(--rp-line); color: var(--rp-text); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-table tr:nth-child(even) { background: rgba(var(--rp-tint-rgb), .035); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-table th:last-child, :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-table td:last-child { text-align: right; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-table strong { color: var(--rp-gold); font-size: 13px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) p.rp-rate-note { padding: 12px 14px; border-top: 1px solid var(--rp-line); color: var(--rp-muted); font-size: 11px; line-height: 1.6; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-calculation { margin-top: 14px; font-size: 12px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-calculation summary { cursor: pointer; color: var(--rp-muted); padding: 4px 0; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-guide-footnote { margin-top: 16px; color: var(--rp-muted); font-size: 11px; line-height: 1.6; } @media (max-width: 480px) { :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-step { padding: 14px; gap: 9px; flex-wrap: wrap; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-earning-step > div { flex-basis: 100%; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-step-number { height: 26px; flex-basis: 26px; } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-rate-browser { grid-template-columns: minmax(0, 1fr); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-game-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(#ReferralProgramModal, #SelfRewardsModal, #MembershipInfoModal) .rp-game-category { text-align: center; } } #SelfRewardsModal .rp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } #SelfRewardsModal .rp-calculation summary:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 3px; } /* The control panel uses the same palette as the existing account panels. */ #ReferralProgramModal .rp-tabs { display: flex; overflow-x: auto; scrollbar-width: thin; padding: 0 14px; } #ReferralProgramModal .rp-tabs [data-rp-tab] { flex: 1 0 90px; min-width: 90px; padding: 12px 8px; } #ReferralProgramModal .rp-tabs [data-rp-tab="control"] { flex-basis: 112px; min-width: 112px; } #ReferralProgramModal .rp-control-summary { padding: 21px; border: 1px solid var(--rp-line); border-radius: 20px; background: radial-gradient(ellipse at top right,var(--rp-glow),transparent 75%),var(--rp-card); } #ReferralProgramModal .rp-control-wallet { display: flex; justify-content: space-between; align-items: center; gap: 14px; } #ReferralProgramModal .rp-control-wallet > div { min-width: 0; } #ReferralProgramModal .rp-control-wallet span { display: block; color: var(--rp-muted); font-size: 11px; } #ReferralProgramModal .rp-control-wallet strong { display: block; margin-top: 7px; font-size: 30px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } #ReferralProgramModal .rp-control-wallet .rp-button { flex-shrink: 0; } #ReferralProgramModal .rp-control-wallet-area[hidden] { display: none; } #ReferralProgramModal .rp-control-wallet-area[hidden] ~ .rp-control-periods { margin-top: 0; } #ReferralProgramModal .rp-control-credit-note { margin-top: 10px; font-size: 11px; line-height: 1.6; } #ReferralProgramModal .rp-control-periods { display: flex; margin: 20px 0; overflow: hidden; border: 1px solid var(--rp-line); border-radius: 10px; } #ReferralProgramModal .rp-control-periods button { flex: 1; min-width: 0; min-height: 42px; padding: 10px 5px; border: 0; border-right: 1px solid var(--rp-line); color: var(--rp-muted); background: transparent; font-size: 12px; } #ReferralProgramModal .rp-control-periods button:last-child { border-right: 0; } #ReferralProgramModal .rp-control-periods button[aria-pressed="true"] { background: var(--rp-action); color: var(--rp-action-ink); font-weight: 800; } #ReferralProgramModal .rp-control-income { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 18px; } #ReferralProgramModal .rp-control-income span { font-size: 12px; } #ReferralProgramModal .rp-control-income strong { color: var(--rp-gold); font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #ReferralProgramModal .rp-control-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); } #ReferralProgramModal .rp-control-stats > div { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 0 9px; border-right: 1px solid var(--rp-line); text-align: center; } #ReferralProgramModal .rp-control-stats > div:last-child { border: 0; } #ReferralProgramModal .rp-control-stats strong { font-size: 19px; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #ReferralProgramModal .rp-control-stats span { color: var(--rp-muted); font-size: 10px; line-height: 1.5; } #ReferralProgramModal .rp-control-definition { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--rp-line); font-size: 10px; line-height: 1.7; } #ReferralProgramModal .rp-control-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--rp-muted); font-size: 11px; line-height: 1.5; } #ReferralProgramModal .rp-control-status:has(span:not(:empty)) { margin-top: 10px; } #ReferralProgramModal .rp-control-guide { margin-top: 22px; padding: 22px; border: 1px solid var(--rp-line); border-radius: 20px; background: var(--rp-card); } #ReferralProgramModal .rp-control-guide .rp-section-heading > i { color: var(--rp-gold); font-size: 28px; } #ReferralProgramModal .rp-control-guide > p { font-size: 12px; line-height: 1.8; } #ReferralProgramModal .rp-control-network { display: flex; flex-direction: column; align-items: center; padding: 24px 0; } #ReferralProgramModal .rp-control-person { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 160px; padding: 12px 16px; border: 1px solid var(--rp-line); border-radius: 14px; background: var(--rp-bg); text-align: center; } #ReferralProgramModal .rp-control-person i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--rp-tint-rgb),.1); color: var(--rp-gold); font-size: 21px; } #ReferralProgramModal .rp-control-person strong { font-size: 12px; font-weight: 800; } #ReferralProgramModal .rp-control-person small { color: var(--rp-muted); font-size: 10px; line-height: 1.6; } #ReferralProgramModal .rp-person-direct i { color: var(--rp-blue); background: #8cbbf015; } #ReferralProgramModal .rp-person-indirect i { color: var(--rp-green); background: #8bd1bd15; } #ReferralProgramModal .rp-control-connector { position: relative; width: 1px; height: 22px; background: var(--rp-line); } #ReferralProgramModal .rp-control-connector::after { content: ""; position: absolute; bottom: 1px; left: -3px; width: 7px; height: 7px; border-right: 1px solid var(--rp-muted); border-bottom: 1px solid var(--rp-muted); transform: rotate(45deg); } #ReferralProgramModal .rp-network-example { margin-top: 20px; padding: 18px 8px 12px; border: 1px solid var(--rp-line); border-radius: 15px; background: var(--rp-bg); } #ReferralProgramModal .rp-network-title { margin: 0 0 12px; padding: 0 8px; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.5; } #ReferralProgramModal .rp-commission-diagram { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; } #ReferralProgramModal .rp-diagram-links { stroke: var(--rp-muted); stroke-width: 1.15; opacity: .65; } #ReferralProgramModal .rp-diagram-flows { stroke: #18c96b; stroke-width: 1.2; color: #18c96b; } #ReferralProgramModal .rp-commission-diagram marker path { fill: #18c96b; } #ReferralProgramModal .rp-diagram-deeper-flow { stroke-dasharray: 3 2; } #ReferralProgramModal .rp-avatar-disc { fill: #a8bdcc; } #ReferralProgramModal .rp-avatar-hair { fill: #495971; } #ReferralProgramModal .rp-avatar-face { fill: #f4cfb1; } #ReferralProgramModal .rp-avatar-shirt { fill: #526f9a; } #ReferralProgramModal .rp-member-tag { fill: #ffe4bc; stroke: #e7b77d; stroke-width: .6; } #ReferralProgramModal .rp-member-name { fill: #a84822; font: 700 11px Arial,sans-serif; } #ReferralProgramModal .rp-diagram-member-d .rp-avatar-disc { fill: #c6ced4; } #ReferralProgramModal .rp-diagram-coin circle { fill: #ffb33f; } #ReferralProgramModal .rp-diagram-coin text { fill: #fff; font: 700 11px Arial,sans-serif; } #ReferralProgramModal .rp-network-caption { padding: 4px 8px 0; text-align: center; font-size: 10px; line-height: 1.6; } #ReferralProgramModal .rp-network-rates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 12px 0 22px; } #ReferralProgramModal .rp-network-rates > span { padding: 9px; border: 1px solid var(--rp-line); border-radius: 9px; color: var(--rp-muted); font-size: 10px; line-height: 1.7; } #ReferralProgramModal .rp-network-formulas > h4 { margin: 22px 0 14px; color: var(--rp-gold); text-align: center; white-space: pre-line; font-size: 15px; font-weight: 800; line-height: 1.6; } #ReferralProgramModal .rp-network-formula-card { padding: 19px; border: 1px solid var(--rp-line); border-radius: 14px; background: var(--rp-bg); } #ReferralProgramModal .rp-network-formula-card [data-rp-network-formula] { margin: 0 0 15px; color: var(--rp-text); font-size: 13px; font-weight: 500; line-height: 1.9; overflow-wrap: anywhere; } #ReferralProgramModal .rp-network-formula-card [data-rp-network-formula] strong { font-weight: 800; } #ReferralProgramModal .rp-network-formula-card .rp-network-basis { margin-bottom: 17px; color: var(--rp-muted); font-size: 11px; line-height: 1.8; } #ReferralProgramModal .rp-network-formula-card .rp-network-formula-note { margin: 0; padding-top: 13px; border-top: 1px dashed var(--rp-line); color: var(--rp-muted); font-size: 11px; line-height: 1.8; } #ReferralProgramModal .rp-network-rule { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; color: var(--rp-muted); font-size: 11px; line-height: 1.8; } #ReferralProgramModal .rp-network-rule > span[aria-hidden] { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%; background: var(--rp-action); color: var(--rp-action-ink); font-size: 10px; font-weight: 800; } #ReferralProgramModal .rp-guide-network { margin-bottom: 24px; } #ReferralProgramModal .rp-tabs [data-rp-tab="members"] { flex-basis: 164px; min-width: 164px; } #ReferralProgramModal .rp-tabs [data-rp-tab="exclusive"] { flex-basis: 116px; min-width: 116px; } #ReferralProgramModal .rp-tabs [data-rp-tab="tutorial"] { flex-basis: 150px; min-width: 150px; } #ReferralProgramModal .rp-team-dashboard { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 10px; margin-bottom: 12px; border: 1px solid var(--rp-line); border-radius: 16px; background: var(--rp-card); } #ReferralProgramModal .rp-team-metric { display: flex; min-width: 0; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 17px 7px; border-radius: 11px; background: var(--rp-action); color: var(--rp-action-ink); text-align: center; } #ReferralProgramModal .rp-team-dashboard .rp-team-metric strong { max-width: 100%; color: var(--rp-action-ink); font-size: 21px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } #ReferralProgramModal .rp-team-metric > span { max-width: 105px; font-size: 12px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; } #ReferralProgramModal .rp-team-metric-note { margin: 0 0 12px; color: var(--rp-muted); font-size: 10px; line-height: 1.8; } #ReferralProgramModal .rp-team-summary-status { display: flex; justify-content: space-between; gap: 12px; color: var(--rp-muted); font-size: 11px; line-height: 1.7; } #ReferralProgramModal .rp-team-summary-status:has(span:not(:empty)) { margin-bottom: 16px; } #ReferralProgramModal .rp-members-note { margin: 0 0 17px; color: var(--rp-muted); font-size: 11px; line-height: 1.8; text-align: center; } #ReferralProgramModal .rp-member-search { display: flex; align-items: stretch; gap: 9px; margin-bottom: 13px; } #ReferralProgramModal .rp-member-search > div { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 11px; border: 1px solid var(--rp-line); border-radius: 11px; background: var(--rp-card); } #ReferralProgramModal .rp-member-search i { color: var(--rp-gold); font-size: 19px; } #ReferralProgramModal .rp-member-search input { width: 100%; min-width: 0; min-height: 46px; padding: 9px 7px; border: 0; background: transparent; color: var(--rp-text); font: inherit; font-size: 12px; } #ReferralProgramModal .rp-member-search input::placeholder { color: var(--rp-muted); opacity: 1; } #ReferralProgramModal .rp-member-search .rp-button { min-width: 76px; } #ReferralProgramModal .rp-members-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--rp-muted); font-size: 11px; line-height: 1.7; } #ReferralProgramModal .rp-members-status:has(span:not(:empty)) { margin-bottom: 12px; } #ReferralProgramModal .rp-members-table-wrap { overflow: hidden; border: 1px solid var(--rp-line); border-radius: 15px; background: var(--rp-card); } #ReferralProgramModal .rp-members-table { width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--rp-text); } #ReferralProgramModal .rp-members-table :is(th,td) { padding: 14px 8px; text-align: center; overflow-wrap: anywhere; } #ReferralProgramModal .rp-members-table th { color: var(--rp-gold); font-size: 11px; font-weight: 600; line-height: 1.6; } #ReferralProgramModal .rp-members-table td { border-top: 1px solid var(--rp-line); font-size: 11px; line-height: 1.6; vertical-align: middle; } #ReferralProgramModal .rp-members-table td strong { display: block; font-size: 11px; font-weight: 700; } #ReferralProgramModal .rp-member-tier { display: block; margin-top: 3px; color: var(--rp-muted); font-size: 9px; } #ReferralProgramModal .rp-member-status { display: inline-block; padding: 3px 6px; border-radius: 7px; font-size: 10px; line-height: 1.6; } #ReferralProgramModal .rp-member-active { background: #29b88b19; color: var(--rp-green); } #ReferralProgramModal .rp-member-restricted { background: #dd6b6119; color: #db706c; } body.frontend-theme:not(.dark) #ReferralProgramModal .rp-member-active { color: #167758; } body.frontend-theme:not(.dark) #ReferralProgramModal .rp-member-restricted { color: #a73733; } #ReferralProgramModal :is(.rp-member-money,.rp-member-login) { font-variant-numeric: tabular-nums; } #ReferralProgramModal .rp-members-empty { min-height: 285px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; padding: 50px 18px; text-align: center; } #ReferralProgramModal .rp-members-empty[hidden] { display: none; } #ReferralProgramModal .rp-members-empty i { color: var(--rp-muted); opacity: .35; font-size: 72px; } #ReferralProgramModal .rp-members-empty p { font-size: 12px; } #ReferralProgramModal .rp-members-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; } #ReferralProgramModal .rp-members-pagination .rp-button { min-width: 70px; min-height: 40px; padding: 9px 10px; } #ReferralProgramModal .rp-members-pagination > span { text-align: center; font-size: 10px; line-height: 1.5; } #ReferralProgramModal .rp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; } #ReferralProgramModal .rp-exclusive-card { padding: 18px; margin-bottom: 17px; border: 1px solid var(--rp-line); border-radius: 15px; background: var(--rp-card); } #ReferralProgramModal .rp-exclusive-card :is(label,h3) { display: block; margin: 0 0 12px; color: var(--rp-text); font-size: 14px; font-weight: 700; line-height: 1.5; } #ReferralProgramModal .rp-exclusive-registration { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--rp-line); border-radius: 11px; background: var(--rp-bg); } #ReferralProgramModal #rp-exclusive-link { width: 100%; min-width: 0; resize: none; padding: 0; border: 0; background: transparent; color: var(--rp-text); font: inherit; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; } #ReferralProgramModal #rp-exclusive-copy { display: flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 42px; font-size: 11px; } #ReferralProgramModal .rp-exclusive-card .rp-share-options { margin: 0; } #ReferralProgramModal .rp-share-options [data-rp-exclusive-share="facebook"] i { color: #5993ed; } #ReferralProgramModal .rp-share-options [data-rp-exclusive-share="whatsapp"] i { color: #25d366; } #ReferralProgramModal .rp-share-options :is([data-rp-exclusive-share="telegram"],[data-rp-exclusive-share="twitter"]) i { color: #27a7e7; } #ReferralProgramModal .rp-share-options [data-rp-exclusive-share="native"] i { color: #19bf9b; } #ReferralProgramModal .rp-share-options [data-rp-exclusive-share="copy"] i { color: #e4c735; } #ReferralProgramModal .rp-exclusive-status { min-height: 20px; color: var(--rp-gold); font-size: 12px; line-height: 1.8; } #ReferralProgramModal .rp-exclusive-note { display: flex; align-items: flex-start; gap: 10px; padding: 20px 8px; color: var(--rp-muted); font-size: 11px; line-height: 1.8; text-align: center; } #ReferralProgramModal .rp-exclusive-note i { color: var(--rp-gold); font-size: 19px; } #ReferralProgramModal :is(#rp-exclusive-copy,[data-rp-exclusive-share]):disabled { opacity: .45; cursor: not-allowed; } #ReferralProgramModal .rp-tutorial-tabs { display: flex; gap: 8px; overflow-x: auto; margin: -4px 0 22px; padding-bottom: 5px; scrollbar-width: thin; } #ReferralProgramModal .rp-tutorial-tabs button { flex: 1 0 140px; min-height: 42px; padding: 10px; border: 1px solid var(--rp-line); border-radius: 11px; background: var(--rp-card); color: var(--rp-muted); font-size: 12px; font-weight: 700; } #ReferralProgramModal .rp-tutorial-tabs button[aria-selected="true"] { border-color: transparent; background: var(--rp-action); color: var(--rp-action-ink); } #ReferralProgramModal .rp-tutorial-title { margin: 0 0 23px; color: var(--rp-text); text-align: center; font-size: 20px; font-weight: 800; line-height: 1.5; } #ReferralProgramModal .rp-tutorial-article { padding: 21px; margin-bottom: 19px; border: 1px solid var(--rp-line); border-radius: 18px; background: linear-gradient(145deg,rgba(var(--rp-tint-rgb),.055),transparent),var(--rp-card); } #ReferralProgramModal .rp-tutorial-article h4 { margin-bottom: 12px; color: var(--rp-gold); font-size: 16px; font-weight: 800; line-height: 1.5; } #ReferralProgramModal .rp-tutorial-article > p { margin-bottom: 16px; font-size: 12px; line-height: 1.9; } #ReferralProgramModal .rp-tutorial-article-heading { display: flex; align-items: flex-start; gap: 9px; } #ReferralProgramModal .rp-tutorial-article-heading > span { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--rp-action); color: var(--rp-action-ink); font-size: 12px; font-weight: 800; } #ReferralProgramModal .rp-tutorial-bonuses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 20px 0; } #ReferralProgramModal .rp-tutorial-bonuses > div { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--rp-line); border-radius: 12px; background: var(--rp-bg); } #ReferralProgramModal .rp-tutorial-bonuses span { color: var(--rp-muted); font-size: 11px; line-height: 1.6; } #ReferralProgramModal .rp-tutorial-bonuses strong { color: var(--rp-gold); font-size: 25px; font-weight: 800; } #ReferralProgramModal .rp-tutorial-rates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 16px 0; } #ReferralProgramModal .rp-tutorial-rate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 82px; padding: 13px; border-radius: 12px; background: var(--rp-action); color: var(--rp-action-ink); text-align: center; } #ReferralProgramModal .rp-tutorial-rate span { font-size: 12px; line-height: 1.5; } #ReferralProgramModal .rp-tutorial-rates .rp-tutorial-rate strong { color: var(--rp-action-ink); font-size: 16px; font-weight: 800; } #ReferralProgramModal .rp-tutorial-article > p.rp-tutorial-note { font-size: 10px; line-height: 1.8; } #ReferralProgramModal :is(.rp-tutorial-visual,.rp-tutorial-category-demo) { display: flex; align-items: center; justify-content: space-evenly; gap: 12px; padding: 25px 18px; margin: 16px 0; border: 1px solid var(--rp-line); border-radius: 13px; background: var(--rp-bg); color: var(--rp-gold); } #ReferralProgramModal :is(.rp-tutorial-visual,.rp-tutorial-category-demo) i { font-size: 35px; } #ReferralProgramModal .rp-tutorial-social .ri-whatsapp-fill { color: #25d366; } #ReferralProgramModal .rp-tutorial-social :is(.ri-telegram-fill,.ri-facebook-circle-fill) { color: #42a4f4; } #ReferralProgramModal .rp-tutorial-actions { display: flex; flex-wrap: wrap; gap: 9px; } #ReferralProgramModal .rp-tutorial-actions .rp-button { flex: 1 0 135px; } #ReferralProgramModal .rp-tutorial-tips { margin: 0; padding-left: 21px; } #ReferralProgramModal .rp-tutorial-tips li { display: list-item; margin-bottom: 12px; color: var(--rp-muted); font-size: 12px; line-height: 1.9; } #ReferralProgramModal :is(.rp-tutorial-tabs button,#rp-member-search-input,#rp-exclusive-link,[data-rp-exclusive-share]):focus-visible { outline: 2px solid var(--rp-focus); outline-offset: -2px; } @media (max-width: 480px) { #ReferralProgramModal .rp-team-dashboard { padding: 8px; gap: 6px; } #ReferralProgramModal .rp-team-metric { min-height: 106px; padding: 15px 5px; } #ReferralProgramModal .rp-team-dashboard .rp-team-metric strong { font-size: 19px; } #ReferralProgramModal .rp-team-metric > span { font-size: clamp(10px,2.85vw,12px); } #ReferralProgramModal .rp-members-table :is(th,td) { padding: 12px 5px; } #ReferralProgramModal .rp-members-table th { font-size: 10px; } #ReferralProgramModal .rp-exclusive-card { padding: 14px; } #ReferralProgramModal .rp-exclusive-registration { padding: 12px; gap: 8px; } #ReferralProgramModal .rp-tutorial-article { padding: 17px; } } #ReferralProgramModal .rp-control-formula { padding: 17px; border: 1px solid var(--rp-line); border-radius: 12px; background: var(--rp-bg); } #ReferralProgramModal .rp-control-formula h4 { margin-bottom: 9px; color: var(--rp-gold); font-size: 14px; font-weight: 800; } #ReferralProgramModal .rp-control-formula p { color: var(--rp-text); font-size: 13px; line-height: 1.8; } #ReferralProgramModal :is(.rp-control-formula,.rp-control-example) small { display: block; margin-top: 10px; color: var(--rp-muted); font-size: 10px; line-height: 1.8; } #ReferralProgramModal .rp-control-example { margin-top: 18px; padding: 17px; border: 1px solid var(--rp-line); border-radius: 12px; } #ReferralProgramModal .rp-control-example p { font-size: 12px; line-height: 1.8; } #ReferralProgramModal .rp-control-example dl { margin: 13px 0; } #ReferralProgramModal .rp-control-example dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; } #ReferralProgramModal .rp-control-example dt { color: var(--rp-muted); font-size: 11px; font-weight: 400; } #ReferralProgramModal .rp-control-example dd { flex-shrink: 0; margin: 0; color: var(--rp-text); font-size: 12px; font-weight: 700; } #ReferralProgramModal .rp-control-example-lines { padding-top: 12px; border-top: 1px dashed var(--rp-line); } #ReferralProgramModal .rp-control-example-lines p { margin-bottom: 6px; color: var(--rp-text); font-variant-numeric: tabular-nums; } #ReferralProgramModal .rp-control-example-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--rp-line); font-size: 12px; } #ReferralProgramModal .rp-control-example-total strong { color: var(--rp-gold); font-size: 21px; font-weight: 800; } #ReferralProgramModal .rp-control-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 20px; border: 1px solid var(--rp-line); border-radius: 18px; background: rgba(var(--rp-tint-rgb),.05); } #ReferralProgramModal .rp-control-share h3 { margin-bottom: 6px; font-size: 16px; font-weight: 800; } #ReferralProgramModal .rp-control-share p { font-size: 11px; line-height: 1.6; } #ReferralProgramModal .rp-control-share .rp-button { min-height: 44px; flex: 1 0 140px; } #ReferralProgramModal .rp-share-dialog { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; } #ReferralProgramModal .rp-share-dialog[hidden] { display: none; } #ReferralProgramModal .rp-share-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(var(--palette-overlay-rgb,7,14,42),.8); } #ReferralProgramModal .rp-share-card { position: relative; width: min(100%,440px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; border: 1px solid var(--rp-line); border-radius: 22px; background: var(--rp-bg); box-shadow: 0 20px 60px #0006; } #ReferralProgramModal .rp-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } #ReferralProgramModal .rp-share-heading h3 { font-size: 20px; font-weight: 800; line-height: 1.4; } #ReferralProgramModal .rp-share-card > p { font-size: 12px; line-height: 1.7; } #ReferralProgramModal .rp-share-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 23px 0; } #ReferralProgramModal .rp-share-options button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 94px; min-width: 0; padding: 14px 5px; border: 1px solid var(--rp-line); border-radius: 13px; background: var(--rp-card); color: var(--rp-text); font-size: 11px; line-height: 1.4; } #ReferralProgramModal .rp-share-options i { font-size: 31px; color: var(--rp-gold); } #ReferralProgramModal [data-rp-share="facebook"] i { color: #5993ed; } #ReferralProgramModal [data-rp-share="whatsapp"] i { color: #25d366; } #ReferralProgramModal :is([data-rp-share="telegram"],[data-rp-share="twitter"]) i { color: #27a7e7; } #ReferralProgramModal .rp-share-card label { display: block; margin-bottom: 7px; color: var(--rp-muted); font-size: 11px; } #ReferralProgramModal #rp-share-link { display: block; width: 100%; min-height: 44px; padding: 11px; border: 1px solid var(--rp-line); border-radius: 9px; background: var(--rp-card); color: var(--rp-text); font: inherit; font-size: 12px; } #ReferralProgramModal #rp-share-status { min-height: 20px; margin-top: 12px; color: var(--rp-gold); } #ReferralProgramModal :is(.rp-share-options button,.rp-control-periods button,#rp-share-link):focus-visible { outline: 2px solid var(--rp-focus); outline-offset: -2px; } #ReferralProgramModal :is(#rp-control-share,#rp-control-withdraw):disabled { opacity: .5; } @media (max-width: 480px) { #ReferralProgramModal :is(.rp-control-summary,.rp-control-guide) { padding: 16px; } #ReferralProgramModal .rp-control-stats > div { padding: 0 5px; } #ReferralProgramModal .rp-control-stats strong { font-size: 17px; } #ReferralProgramModal .rp-share-card { padding: 18px; } #ReferralProgramModal .rp-control-network { padding: 20px 0; } }