.referral-card{background:#fff;border-radius:12px;padding:20px;margin:12px 0;box-shadow:0 2px 8px #0000000f}.referral-card.loading,.referral-card.error{text-align:center;padding:24px;color:#666}.referral-card.error{color:#d32f2f;background-color:#ffebee}.referral-header{margin-bottom:20px}.referral-header h3{margin:0 0 8px;font-size:18px;color:#333}.referral-header p{margin:0;font-size:13px;color:#666;line-height:1.4}.referral-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;padding:16px;background-color:#f5f5f5;border-radius:8px}.stat{text-align:center;display:flex;flex-direction:column;gap:4px}.stat-label{font-size:12px;color:#666;font-weight:500}.stat-value{font-size:20px;font-weight:700;color:#667eea}.referral-link-section{margin-bottom:20px}.link-label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.link-container{display:flex;gap:8px;margin-bottom:8px}.link-input{flex:1;padding:10px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:13px;font-family:Courier New,monospace;background-color:#f9f9f9}.link-input:focus{outline:none;border-color:#667eea}.copy-btn{padding:10px 16px;background-color:#667eea;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background-color .2s;font-weight:600}.copy-btn:hover{background-color:#5568d3}.copy-btn:active{transform:scale(.95)}.link-hint{margin:0;font-size:12px;color:#999}.claim-btn{width:100%;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s;margin-bottom:20px}.claim-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.claim-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.how-it-works{background-color:#f9f9f9;padding:16px;border-radius:8px;border-left:4px solid #667eea}.how-it-works h4{margin:0 0 12px;font-size:14px;color:#333}.how-it-works ol{margin:0;padding-left:20px;font-size:13px;color:#666;line-height:1.6}.how-it-works li{margin-bottom:6px}.how-it-works li:last-child{margin-bottom:0}@media (max-width: 600px){.referral-stats{grid-template-columns:1fr;gap:8px}.link-container{flex-direction:column}.copy-btn{width:100%}}