/* Reference-led route. Shared header, chat and wallet keep their existing geometry. */
.referrals-page[hidden]{display:none!important}
.referrals-page{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.ref-panel{background:#fff;border:1px solid #ffffffb8;border-radius:20px;min-width:0}
.ref-intro{padding:17px 18px 10px}
.ref-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:19px}
.ref-heading h1{font-size:40px;line-height:1.13;letter-spacing:-1.7px;font-weight:760}
.ref-heading h1:focus{outline:none}
.ref-heading p{font-size:16px;line-height:1.5;color:#7b7c89;margin-top:3px}
.ref-text-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:none;border:0;padding:13px 0 0;color:#777b87;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.referrals-page svg{width:19px;height:19px;flex:none}
.ref-text-link svg{width:15px;height:15px}
.ref-offers{display:grid;grid-template-columns:minmax(0,2.36fr) minmax(250px,1fr);gap:16px}
.ref-invite{min-width:0;min-height:254px;border-radius:15px;overflow:hidden;padding:25px 25px 21px;display:flex;flex-direction:column;justify-content:space-between;background:#fff2e9 url('assets/referrals/invite-hero.png') center/cover no-repeat;border:1px solid #fae8df}
.ref-invite-copy{max-width:70%}
.ref-invite h2{font-size:26px;letter-spacing:-.9px;line-height:1.2;font-weight:730}
.ref-headline{font-size:clamp(32px,2.6vw,45px);color:var(--orange);font-weight:750;letter-spacing:-1.6px;line-height:1.2;display:block;margin:4px 0 2px;white-space:nowrap}
.ref-description{color:#727887;font-size:16px;font-weight:550;line-height:1.4}
.ref-caption{color:#9698a3;font-size:13px;line-height:1.4;margin-top:4px;max-width:400px}
.ref-link-block{position:relative;margin-top:21px;width:min(100%,560px)}
.ref-link-block>label{display:block;font-size:11px;color:#606575;margin-bottom:6px}
.ref-link-actions{display:flex;gap:10px;align-items:center}
.ref-link-field{display:flex;min-width:0;flex:1;border:1px solid #dedde1;background:#ffffffed;border-radius:9px;height:43px;overflow:hidden}
.ref-link-field input{min-width:0;width:100%;border:0;outline-offset:-3px;background:transparent;font-size:12px;font-weight:550;color:#25252e;padding:0 12px;text-overflow:ellipsis}
.ref-link-field button{background:none;border:0;color:#8c8d9a;width:36px;display:grid;place-items:center;flex:none}
.referrals-page .primary,.ref-secondary{min-height:43px;height:auto;border-radius:9px;font-size:12px;font-weight:600;padding:12px 18px;display:inline-flex;justify-content:center;align-items:center;gap:8px;white-space:nowrap}
.referrals-page .primary{box-shadow:none}
.ref-secondary{border:1px solid #d9d9df;background:#fff;color:#1d1e25}
.ref-secondary:hover{border-color:#ffb18a;background:#fffaf6}
.ref-link-actions svg{width:16px;height:16px}
.ref-balance{padding:25px 22px 21px;background:linear-gradient(130deg,#fdfcfa,#fff);border:1px solid #eeeceb;border-radius:15px;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;min-width:0}
.ref-balance h2{font-size:22px;letter-spacing:-.8px;line-height:1.3}
.ref-balance>strong{font-size:46px;color:var(--orange);font-weight:750;letter-spacing:-1.7px;line-height:1.15;margin:-3px 0 4px}
.ref-balance .primary{margin-top:auto}
.ref-balance .ref-secondary{margin-top:4px}
.ref-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:15px 20px}
.ref-stats>div{display:flex;align-items:center;gap:24px;min-width:0;padding:0 12px}
.ref-stats>div+div{border-left:1px solid #eeeef2;padding-left:40px}
.ref-stat-icon{display:grid;place-items:center;width:51px;height:51px;background:#fff2e8;color:var(--orange);border-radius:50%;flex:none}
.ref-stat-icon svg{width:25px;height:25px}
.ref-stats>div>div>span{display:block;font-size:12px;color:#7c8090;line-height:1.4}
.ref-stats strong{display:block;font-size:26px;letter-spacing:-.6px;line-height:1.2;margin-top:3px}
.ref-levels{padding:13px 18px 12px}
.ref-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.ref-section-heading h2{font-size:23px;letter-spacing:-.8px;line-height:1.2}
.ref-section-heading>span{font-size:12px;color:#7b8191}
.ref-tiers{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:0;gap:10px}
.ref-tiers li{border:1px solid #e9e9ed;border-radius:12px;min-height:108px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px 17px;text-align:center}
.ref-tiers h3{font-size:14px;line-height:1.3;margin:0 0 3px;font-weight:600}
.ref-tiers strong{font-size:32px;line-height:1.2;letter-spacing:-1px;font-weight:750}
.ref-tiers li>span{font-size:12px;color:#798194;margin-top:3px}
.ref-tiers .is-current{border-color:var(--orange);background:linear-gradient(130deg,#fff2e9,#fffaf6)}
.ref-tiers .is-current strong{color:var(--orange)}
.ref-current{position:absolute;bottom:-4px;background:var(--orange);color:#fff;border-radius:20px;font-size:10px;padding:4px 12px;line-height:1.2}
.ref-current[hidden]{display:none}
.ref-progress-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#6d7486;margin-top:12px;margin-bottom:5px}
.ref-progress{height:12px;background:#e9e9ee;border-radius:20px;overflow:hidden}
.ref-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff8b53,#ff5714);transition:width .35s ease}
#ref-progress-hint{font-size:11px;color:#7b8191;line-height:1.5;margin-top:4px}
.ref-invitations{padding:12px 18px 15px}
.ref-invitations .ref-section-heading{margin-bottom:7px}
#ref-period{height:34px;min-width:154px;max-width:100%;border:1px solid #dedee5;border-radius:9px;background:#fff;padding:0 12px;font-size:12px;color:#303340;cursor:pointer}
.ref-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:12px}
.ref-table th{font-size:11px;color:#7d8190;font-weight:500;background:#f8f8f9;padding:9px 14px}
.ref-table th:first-child{border-radius:9px 0 0 9px;width:27%}.ref-table th:nth-child(2){width:31%}.ref-table th:nth-child(3){width:23%}.ref-table th:last-child{border-radius:0 9px 9px 0;width:19%}
.ref-table td{padding:5px 14px;border-bottom:1px solid #f0f0f3;height:34px;color:#7b8191}
.ref-table tr:last-child td{border:0}
.ref-table td:last-child{color:#252733;white-space:nowrap}
.ref-person{display:flex;gap:13px;align-items:center;color:#252733;min-width:0}.ref-person b{overflow:hidden;text-overflow:ellipsis}
.ref-person .avatar{--a:27px}
.ref-person-text{min-width:0}.ref-person-text b{display:block}.ref-person-text small{display:none}.ref-turnover{white-space:nowrap;font-variant-numeric:tabular-nums}
.ref-empty{padding:24px;text-align:center;font-size:14px;color:#858995}
.ref-empty[hidden]{display:none}
.ref-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ref-modal-copy{color:#6e7180;font-size:15px;line-height:1.7}.ref-modal-copy p+p{margin-top:16px}
.ref-history>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #ece9e4;font-size:14px}.ref-history small{display:block;color:#858995;margin-top:5px}.ref-history strong{color:var(--orange)}
/* The shared chat keeps the game scale, independent of referral table height. */
@media(min-width:1500px){
 .layout.with-chat.layout--referrals{grid-template-columns:minmax(0,1fr) clamp(280px,19vw,330px)}
 .layout--referrals.with-chat>.ruvi-chat{height:850px;min-height:0;max-height:850px;align-self:start}
 .layout.with-chat.layout--referrals.chat-collapsed{grid-template-columns:minmax(0,1fr) 64px}
}
@media(min-width:761px) and (max-width:1199px){.ref-offers{grid-template-columns:minmax(0,1fr) 250px}.ref-invite{padding:23px 20px;background-position:70% center}.ref-invite-copy{max-width:78%}.ref-invite h2{font-size:23px}.ref-headline{font-size:32px}.ref-description{font-size:14px}.ref-caption{font-size:12px;max-width:280px}.ref-link-actions{flex-wrap:wrap}.ref-link-field{flex-basis:100%}.ref-link-actions>.primary,.ref-link-actions>.ref-secondary{flex:1}.ref-stats>div+div{padding-left:20px}.ref-stats>div{gap:13px}.ref-heading h1{font-size:36px}}
@media(max-width:760px){
 .referrals-page{width:100%;gap:12px}.ref-panel{border-radius:18px}.ref-intro{padding:18px 14px 14px}.ref-heading{flex-wrap:wrap;gap:6px;margin-bottom:16px}.ref-heading h1{font-size:34px;letter-spacing:-1.2px}.ref-heading p{font-size:14px;max-width:300px}.ref-text-link{padding:0;font-size:11px;min-height:30px}
 .ref-offers{grid-template-columns:1fr;gap:12px}.ref-invite{min-height:350px;padding:20px 18px 18px;background-size:auto 235px;background-position:right 50%;background-repeat:no-repeat;background-color:#fff2e9}.ref-invite-copy{max-width:100%}.ref-invite h2{font-size:22px;letter-spacing:-.6px}.ref-headline{font-size:34px;letter-spacing:-1.2px}.ref-description{font-size:13px;max-width:59%;margin-top:10px}.ref-caption{font-size:11px;max-width:52%;margin-top:7px}
 .ref-link-block{margin-top:70px;width:100%}.ref-link-actions{flex-wrap:wrap;gap:8px}.ref-link-field{flex-basis:100%;height:44px}.ref-link-field input{font-size:16px}.ref-link-actions>.primary,.ref-link-actions>.ref-secondary{flex:1;padding:12px 10px}.ref-balance{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.ref-balance h2{font-size:20px;grid-column:1/-1}.ref-balance>strong{font-size:38px;grid-column:1/-1}.ref-balance .primary,.ref-balance .ref-secondary{margin:0;white-space:normal;min-height:45px;font-size:11px;padding:10px}
 .ref-stats{padding:15px 8px}.ref-stats>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 10px!important}.ref-stats>div>div>span{font-size:10px;min-height:28px}.ref-stats strong{font-size:21px;white-space:nowrap}.ref-stat-icon{width:34px;height:34px}.ref-stat-icon svg{width:19px;height:19px}
 .ref-levels,.ref-invitations{padding:15px 12px}.ref-section-heading{gap:8px;flex-wrap:wrap}.ref-section-heading h2{font-size:21px}.ref-section-heading>span{font-size:10px}.ref-tiers{gap:6px}.ref-tiers li{padding:12px 5px 18px;min-height:112px;border-radius:10px}.ref-tiers h3{font-size:11px}.ref-tiers strong{font-size:26px}.ref-tiers li>span{font-size:10px;max-width:85px;line-height:1.4}.ref-current{font-size:8px;white-space:nowrap;padding:4px 7px}.ref-progress-label{font-size:10px}.ref-progress{height:9px}#ref-progress-hint{font-size:10px}
 #ref-period{min-width:120px;font-size:11px;height:35px}.ref-table{font-size:11px}.ref-table th{font-size:9px;padding:9px 5px}.ref-table th:first-child{width:34%}.ref-table th:nth-child(2){width:37%}.ref-table td{padding:9px 5px;line-height:1.4}.ref-person{gap:6px}.ref-person .avatar{--a:24px}
}
@media(max-width:370px){.ref-invite h2{font-size:20px}.ref-headline{font-size:29px}.ref-stats strong{font-size:18px}.ref-person .avatar{--a:20px}.ref-person{gap:4px}.ref-table{font-size:10px}}
@media(max-width:760px){.ref-table th:nth-child(2),.ref-table td:nth-child(2){display:none}.ref-table th:first-child{width:40%}.ref-table th:nth-child(3){width:33%}.ref-table th:last-child{width:27%}.ref-person-text small{display:block;font-size:8px;color:#8a8e9a;margin-top:3px;line-height:1.4}.ref-turnover{font-size:10px}.ref-table td:last-child{font-size:11px}
 .ref-invite{background-size:auto 150px;background-position:right calc(100% - 115px)}.ref-description,.ref-caption{max-width:100%}.ref-link-block{margin-top:150px}.ref-headline{font-size:clamp(25px,8vw,32px)}
}
@media(prefers-reduced-motion:reduce){.ref-progress>span{transition:none}}