.referral-panel { margin: 18px 0; padding: 18px; border: 1px solid #38333e; border-radius: 12px; background: #1d1d23; color: #eee; }
.referral-panel p,.referral-panel li { color: #b5adc4; font-size: 13px; line-height: 1.7; }
.referral-panel h3 { margin: 0 0 12px; }
.referral-panel a { color: #83dbf1; }
.referral-copy-row { display:flex;gap:8px;margin:10px 0; }
.referral-copy-row input { min-width:0;flex:1;padding:10px;border:1px solid #47414d;border-radius:8px;background:#121216;color:#eee; }
.referral-panel button { padding:9px 13px;border:1px solid #625566;border-radius:8px;background:#302632;color:#fff;cursor:pointer; }
.referral-panel input[type=number] { padding:8px;max-width:90px; }
.referral-panel [role=status] { margin-top:10px; }
.referral-panel .referral-admin-row { display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #38333e;overflow-wrap:anywhere; }
.referral-panel ul { padding-left:20px;max-height:260px;overflow:auto; }
.referral-panel [hidden] { display:none!important; }
@media(max-width:480px) { .referral-panel {padding:12px;} .referral-copy-row {flex-wrap:wrap;} .referral-copy-row input {flex-basis:100%;} }

/* Sharing is secondary to redeeming rewards, so use a quiet footer section. */
#studioReferrals.referral-panel { margin:24px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--studio-line,#34343d);border-radius:0;background:transparent; }
#studioReferrals h3 { font-size:24px;margin:0 0 6px; }
#studioReferrals p { font-size:12px;line-height:1.6;margin:6px 0;color:var(--studio-muted,#a4a0ae); }
#studioReferrals .referral-copy-row { max-width:570px;margin:12px 0 8px;align-items:center; }
#studioReferrals .referral-copy-row input { font-size:13px;padding:8px 10px;min-height:36px; }
#studioReferrals button { background:#25252d;border-color:#41414b;padding:8px 10px;font-size:12px;white-space:nowrap;min-height:36px; }
#studioReferrals summary { display:list-item;cursor:pointer;font-size:12px;color:#a4a0ae;width:fit-content;padding:6px 0; }
#studioReferrals li { font-size:12px; }
#studioReferrals button:focus-visible,#studioReferrals summary:focus-visible { outline:2px solid var(--studio-cyan,#72dce9);outline-offset:3px; }

/* Admin: settings and balance repair are distinct actions, not one toolbar. */
#adminReferrals { background:transparent;border:0;border-radius:0;padding:20px;margin:0; }
#adminReferrals h3 { margin:0 0 4px;font-size:20px; }
#adminReferrals h4 { margin:0 0 12px;font-size:15px; }
#adminReferrals p { margin:6px 0;font-size:12px;line-height:1.65;max-width:78ch; }
#adminReferrals .referral-admin-head { display:flex;justify-content:space-between;align-items:start;gap:16px; }
#adminReferrals .referral-admin-head button { white-space:nowrap;background:transparent;border-color:#47414d; }
#adminReferrals .referral-admin-status { margin:10px 0;color:#82dfcc; }
#adminReferrals .referral-admin-status[data-state=error] { color:#ffabb0; }
#adminReferrals .referral-admin-status[data-state=pending] { color:#b5adc4; }
#adminReferrals .referral-admin-settings { border-top:1px solid #38333e;padding:18px 0; }
#adminReferrals .referral-settings-row { display:flex;align-items:center;gap:24px;flex-wrap:wrap; }
#adminReferrals .referral-toggle { display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer; }
#adminReferrals input[type=checkbox] { accent-color:#ff5c8a;width:17px;height:17px; }
#adminReferrals .referral-cap-field { display:flex;align-items:center;gap:10px;font-size:12px; }
#adminReferrals input[type=number] { width:76px;min-height:38px;background:#121216;color:#eee;border:1px solid #47414d;border-radius:7px; }
#adminReferrals .referral-settings-actions { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px; }
#adminReferrals .referral-primary { background:#a92453;border-color:#c6376a;font-weight:700; }
#adminReferrals .referral-save-hint { color:#b5adc4;font-size:12px; }
#adminReferrals .referral-maintenance { padding:16px;border:1px solid #3d3943;border-radius:8px;background:#19191f; }
#adminReferrals .referral-maintenance h4 { margin-bottom:4px; }
#adminReferrals .referral-maintenance button { margin-top:8px;background:transparent; }
#adminReferrals button:disabled { opacity:.45;cursor:not-allowed; }
#adminReferrals .referral-admin-details { margin-top:18px; }
#adminReferrals details { border-top:1px solid #38333e;padding:12px 0;overflow-wrap:anywhere; }
#adminReferrals summary { cursor:pointer;font-weight:600;font-size:13px;padding:4px 0; }
#adminReferrals details[open] summary { margin-bottom:8px; }
#adminReferrals .referral-admin-row { justify-content:space-between; }
#adminReferrals .referral-code-info { display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;font-size:12px; }
#adminReferrals code { background:#121216;border-radius:5px;padding:4px 7px;color:#ddd;font-size:12px; }
#adminReferrals .referral-code-state { color:#b5adc4;font-size:11px; }
#adminReferrals button:focus-visible,#adminReferrals input:focus-visible,#adminReferrals summary:focus-visible { outline:2px solid #72dce9;outline-offset:3px; }
@media(max-width:560px){
  #adminReferrals { padding:14px; }
  #adminReferrals .referral-admin-head { flex-direction:column;gap:8px; }
  #adminReferrals .referral-settings-row { align-items:start;flex-direction:column;gap:14px; }
  #adminReferrals .referral-cap-field { flex-wrap:wrap; }
}