.referral-page-content { padding-bottom: 48px; }
.referral-tabs { display: flex; width: min(446px, 100%); margin: 0 auto 32px; padding: 5px; border: 1px solid var(--partner-border); border-radius: 999px; }
.referral-tabs button { flex: 1; min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: var(--partner-text); font: inherit; font-size: 17px; font-weight: 800; }
.referral-tabs button.is-active { background: var(--partner-mint); color: #172027; }
.referral-page-heading, .referral-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.referral-page-heading { margin-bottom: 22px; }
.referral-page-heading h2, .referral-card-heading h3 { margin: 0; color: var(--partner-text); }
.referral-page-heading h2 { font-size: clamp(28px, 3vw, 34px); }
.referral-page-heading p:not(.partner-eyebrow) { margin: 7px 0 0; color: var(--partner-muted); }
.referral-link-button, .referral-clear-button, .referral-view-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid rgba(165, 228, 222, .6); border-radius: 9px; background: transparent; color: var(--partner-text); padding: 0 14px; font: inherit; font-weight: 800; text-decoration: none; }
.referral-link-button:hover, .referral-clear-button:hover, .referral-view-button:hover { background: rgba(165, 228, 222, .12); }
.referral-link-button i { width: 18px; height: 18px; }
.referral-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.referral-stat-grid article { min-height: 132px; display: grid; align-content: center; gap: 10px; padding: 21px; border: 1px solid rgba(165, 228, 222, .52); border-radius: 14px; background: var(--partner-panel); box-shadow: var(--partner-shadow); }
.referral-stat-grid article:nth-child(2) { border-color: rgba(124, 207, 201, .75); }
.referral-stat-grid article:nth-child(3) { border-color: rgba(255, 194, 94, .7); }
.referral-stat-grid article:nth-child(4) { border-color: rgba(145, 236, 226, .75); }
.referral-stat-grid p { margin: 0; color: var(--partner-muted); font-size: 14px; font-weight: 700; }
.referral-stat-grid strong { min-height: 31px; color: var(--partner-text); font-size: clamp(24px, 2.4vw, 31px); }
.referral-data-card { padding: 24px; border: 1px solid rgba(165, 228, 222, .52); border-radius: 18px; background: var(--partner-panel); box-shadow: var(--partner-shadow); }
.referral-card-heading { margin-bottom: 21px; }
.referral-card-heading h3 { font-size: clamp(24px, 2.5vw, 30px); }
.referral-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.referral-controls select, .referral-search { min-height: 42px; border: 1px solid rgba(165, 228, 222, .36); border-radius: 8px; background: #151620; color: var(--partner-text); font: inherit; }
.referral-controls select { min-width: 132px; padding: 0 10px; }
.referral-search { display: flex; align-items: center; gap: 8px; min-width: 250px; padding: 0 12px; color: var(--partner-mint); }
.referral-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--partner-text); font: inherit; }
.referral-table-wrap { overflow: auto; }
.referral-table { width: 100%; min-width: 1170px; border-collapse: collapse; }
.referral-table th, .referral-table td { padding: 15px 12px; border-bottom: 1px solid rgba(165, 228, 222, .13); color: var(--partner-text); text-align: left; vertical-align: middle; }
.referral-table th { color: var(--partner-muted); font-size: 14px; white-space: nowrap; }
.referral-table td { font-size: 14px; }
.referral-table td:nth-child(2), .referral-table td:nth-child(4) { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-loading { color: var(--partner-muted) !important; text-align: center !important; font-style: italic; }
.referral-status { display: inline-flex; align-items: center; min-width: 79px; justify-content: center; padding: 6px 9px; border: 1px solid rgba(165, 228, 222, .42); border-radius: 999px; background: #151620; color: var(--partner-text); font-size: 12px; font-weight: 800; text-transform: capitalize; }
.referral-status.status-approved, .referral-status.status-paid { border-color: rgba(124, 207, 201, .8); color: var(--partner-mint); }
.referral-status.status-pending { border-color: rgba(255, 194, 94, .8); color: var(--partner-gold); }
.referral-status.status-cancelled, .referral-status.status-refunded, .referral-status.status-failed { border-color: rgba(238, 115, 115, .75); color: #ffb0b0; }
.referral-mobile-list { display: none; }
.referral-detail-modal { width: min(620px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0; border: 1px solid rgba(165, 228, 222, .62); border-radius: 18px; background: #1d1e29; color: var(--partner-text); box-shadow: 0 24px 64px rgba(0, 0, 0, .55); }
.referral-detail-modal::backdrop { background: rgba(0, 0, 0, .72); }
.referral-modal-content { padding: 26px; }
.referral-modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.referral-modal-heading h2 { margin: 0; font-size: 26px; }
.referral-icon-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(165, 228, 222, .62); border-radius: 9px; background: transparent; color: var(--partner-text); }
.referral-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 25px 0 0; }
.referral-detail-list div { min-width: 0; }
.referral-detail-list dt { margin-bottom: 5px; color: var(--partner-muted); font-size: 13px; font-weight: 700; }
.referral-detail-list dd { margin: 0; overflow-wrap: anywhere; color: var(--partner-text); font-weight: 700; }
@media (max-width: 960px) { .referral-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .referral-card-heading { flex-direction: column; } .referral-controls { justify-content: flex-start; } }
@media (max-width: 860px) { .referral-page-content { padding: 102px 16px 32px; } }
@media (max-width: 640px) { .referral-tabs button { min-height: 43px; font-size: 15px; } .referral-page-heading { flex-direction: column; } .referral-stat-grid { grid-template-columns: 1fr 1fr; gap: 11px; } .referral-stat-grid article { min-height: 112px; padding: 16px; } .referral-stat-grid strong { font-size: 22px; } .referral-data-card { padding: 17px; } .referral-search { min-width: 100%; } .referral-controls { width: 100%; } .referral-controls select, .referral-clear-button { flex: 1 1 132px; } .referral-table-wrap { display: none; } .referral-mobile-list { display: grid; gap: 12px; } .referral-mobile-card { padding: 16px; border: 1px solid rgba(165, 228, 222, .22); border-radius: 12px; background: #191a24; } .referral-mobile-top, .referral-mobile-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .referral-mobile-top strong { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .referral-mobile-card p { margin: 12px 0 7px; color: var(--partner-muted); font-size: 13px; } .referral-mobile-meta { margin-top: 12px; color: var(--partner-text); font-size: 13px; } .referral-mobile-card .referral-view-button { width: 100%; margin-top: 14px; } .referral-detail-list { grid-template-columns: 1fr; gap: 14px; } .referral-modal-content { padding: 20px; } }