/* Referral panel (customer account) + owner tab. Uses the site's existing panel/button styles. */
#referralPanel{margin-top:22px;padding-top:20px;border-top:1px solid rgba(214,180,120,.25);text-align:left}
#referralPanel h2{margin:.2em 0}
.ref-head p{opacity:.8;margin:.3em 0 1em}
.ref-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0 16px}
.ref-stat{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(214,180,120,.22)}
.ref-stat span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.7}
.ref-stat b{display:block;font-size:20px;margin-top:4px}
.ref-stat.main b{font-size:24px;color:#f0c46c}
.ref-label{display:block;font-size:13px;opacity:.75;margin-bottom:6px}
.ref-copy{display:flex;gap:8px}
.ref-copy input{flex:1;min-width:0}
.ref-copy .button{white-space:nowrap}
.ref-note{font-size:12.5px;opacity:.72;margin:6px 0 0}
.ref-wd{margin-top:18px}
.ref-wd h3,.ref-box h3{margin:0 0 10px}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.ref-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.ref-wd .button[disabled]{opacity:.5;cursor:not-allowed}
.ref-hist{margin-top:14px}
.ref-hist summary{cursor:pointer;font-weight:600;padding:8px 0}
.ref-table{overflow-x:auto}
.ref-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:13.5px}
.ref-table th,.ref-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
.ref-table th{font-size:11px;letter-spacing:.5px;text-transform:uppercase;opacity:.65;font-weight:500}
.ref-tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.ref-tag.EARNED,.ref-tag.PAID{background:rgba(74,222,154,.15);color:#4ade9a}
.ref-tag.VOID,.ref-tag.REJECTED{background:rgba(255,107,138,.15);color:#ff6b8a}
.ref-tag.REQUESTED{background:rgba(240,196,108,.15);color:#f0c46c}
.ref-box{padding:18px;margin-top:14px}
.ref-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ref-actions .button{padding:8px 12px;font-size:13px}
.ref-noteinput{width:100%;min-width:150px}
@media (max-width:560px){.ref-copy{flex-direction:column}}