.referral-banner{display:flex;align-items:center;gap:14px;padding:16px 20px;margin:18px 0 22px;background:#e5f6ee;border:1px solid #bce7d2;border-radius:16px;color:var(--signal-dark,#078f53);text-decoration:none}
.referral-banner>span:nth-child(2){display:grid;gap:4px}.referral-banner strong{font-size:16px}.referral-banner>span:nth-child(2)>span{font-size:13px}.referral-gift{font:500 30px "Unbounded",sans-serif}.referral-banner-arrow{margin-inline-start:auto;font-size:25px}
.referrals-page{width:100%;min-width:0}.referrals-page>h1{font:600 28px/1.3 "Unbounded",sans-serif;margin:14px 0 24px}.referrals-back{color:var(--signal-dark);font-size:14px;text-decoration:none}.referrals-body{display:grid;gap:22px}
.referral-hero{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:24px;padding:32px;border-radius:24px;background:#e5f6ee;border:1px solid #bce7d2;overflow:hidden}
.referral-eyebrow{font:500 10px "JetBrains Mono",monospace;letter-spacing:1.2px;color:var(--signal-dark);text-transform:uppercase}.referral-story h2{font:600 clamp(22px,2.2vw,32px)/1.3 "Unbounded",sans-serif;margin:16px 0 12px;max-width:620px}.referral-story p{font-size:16px;line-height:1.6;max-width:580px;color:var(--muted)}
.referral-tickets{display:flex;flex-direction:column;align-items:center;gap:8px;transform:rotate(8deg)}.referral-tickets span{background:var(--paper,#fff);color:var(--ink);font:600 32px "Unbounded",sans-serif;padding:18px 24px;border-radius:12px;border:1px solid #bce7d2;box-shadow:0 8px 20px #078f530b;white-space:nowrap}.referral-tickets span+span{background:var(--signal);color:white;transform:translateX(16px) rotate(-16deg)}
.referrals-page .card{width:100%;margin:0;padding:24px;border-radius:18px}.referral-label{display:block;color:var(--muted);font-size:13px;margin-bottom:12px}.referral-code-row{display:flex;gap:12px;align-items:center}.referral-code-input{flex:1;min-width:0;font:600 clamp(16px,2vw,25px) "JetBrains Mono",monospace;letter-spacing:1px;padding:16px!important;border:1px dashed var(--line)!important;border-radius:12px!important;background:var(--sky)!important;color:var(--ink)!important;width:100%}.referral-code-row .btn{width:auto;min-width:190px}.referral-actions{display:flex;gap:12px;margin-top:14px}.referrals-page .btn{margin:0;font-size:14px;min-height:44px}.referral-actions .btn{width:auto;flex:1}.referral-columns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}.referrals-page h2{font-size:19px;margin-bottom:12px}.referral-count{font-weight:600;color:var(--signal-dark);margin:12px 0}.referrals-page .sub{font-size:13px;line-height:1.6}.referral-reward{padding:16px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;margin-top:16px}.referral-reward strong{font-size:14px;flex:1}.referral-reward .btn{width:auto;font-size:12px;padding:10px 12px}.referral-empty{padding:24px 0 4px;color:var(--muted);font-size:14px;line-height:1.6}.referral-how ol{padding-inline-start:22px;color:var(--muted);font-size:14px;line-height:1.65;display:grid;gap:14px}.referral-how li::marker{color:var(--signal-dark);font-weight:700}.referral-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:20px;margin-top:24px;gap:16px}.referral-stats>div{display:grid;gap:8px}.referral-stats strong{font:500 26px "Unbounded",sans-serif}.referral-stats span{font-size:12px;color:var(--muted)}.referral-terms{font-size:13px;color:var(--muted);line-height:1.65}.referral-terms summary,.referral-history summary{cursor:pointer;font-weight:600;padding:8px 0}.referral-terms p{max-width:900px;padding-top:12px}.referral-history{margin-top:20px;font-size:13px;line-height:1.6}.referral-history .btn{display:block;margin:8px 0}.referral-status{min-height:24px;margin-top:10px;color:var(--signal-dark);font-size:13px}.referral-invitation{display:flex;align-items:center;justify-content:space-between;gap:16px}.referral-invitation .btn{width:auto}
.referrals-page button:focus-visible,.referrals-page a:focus-visible,.referral-banner:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
@media(max-width:760px){.referral-hero{grid-template-columns:1fr;padding:24px;gap:12px}.referral-tickets{display:none}.referral-columns{grid-template-columns:1fr}.referral-code-row{flex-direction:column}.referral-code-row .btn{width:100%}.referral-actions{flex-direction:column}.referrals-page>h1{font-size:23px}.referrals-page .card{padding:20px}.referral-reward{flex-wrap:wrap}.referral-reward strong{flex-basis:100%}.referral-reward .btn{width:100%}.referral-invitation{align-items:stretch;flex-direction:column}.referral-banner{padding:14px}.referral-story h2{font-size:24px}}
@media(prefers-color-scheme:dark){html[data-theme="dark"] .referral-hero,html[data-theme="dark"] .referral-banner{background:#143b2c;border-color:#236445}}