.referral-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 32px;border-radius:22px;background:linear-gradient(125deg,#123d31,#1d7458 68%,#4d9a7e);color:#fff;box-shadow:0 18px 45px rgba(20,75,59,.2)}
.referral-hero h2{margin:5px 0 9px;font-size:28px}.referral-hero p:last-child{margin:0;color:rgba(255,255,255,.72)}.referral-code-card{display:grid;min-width:260px;grid-template-columns:1fr auto;gap:5px 16px;padding:16px 18px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px)}.referral-code-card small{grid-column:1/-1;color:rgba(255,255,255,.68)}.referral-code-card strong{align-self:center;font-size:25px;letter-spacing:.14em}.referral-code-card button{padding:9px 13px;background:#fff;color:#176b50}
.referral-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}.referral-summary article{padding:19px 21px;border:1px solid #e3e9e6;border-radius:16px;background:#fff;box-shadow:0 8px 26px rgba(33,49,61,.05)}.referral-summary small,.referral-summary span{display:block;color:#7b8983;font-size:12px}.referral-summary strong{display:block;margin:7px 0 3px;color:#183b31;font-size:26px}
.referral-panels{display:grid;gap:16px}.referral-panel{padding:22px;border:1px solid #e3e9e6;border-radius:18px;background:#fff}.referral-panel>header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:15px}.referral-panel h3{margin:3px 0 0}.referral-panel>header>small{color:#84908a}.referral-table-wrap{overflow-x:auto}.referral-panel table{width:100%;border-collapse:collapse}.referral-panel th,.referral-panel td{padding:13px 12px;border-bottom:1px solid #edf1ef;text-align:left;white-space:nowrap}.referral-panel th{color:#7a8781;font-size:11px;font-weight:700}.referral-panel td{color:#42524b;font-size:13px}.referral-panel td strong{color:#176b50}.referral-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}.referral-pagination button{padding:7px 12px}.referral-pagination span{color:#65736d;font-size:12px}
@media(max-width:780px){.referral-hero{display:grid;padding:22px}.referral-code-card{min-width:0}.referral-summary{grid-template-columns:1fr}.referral-panel{padding:17px}.referral-panel>header{align-items:flex-start;gap:8px}.referral-panel>header>small{display:none}}