/* RefPulse Frontend Styles — v1.0.0 */
:root {
  --rp-purple:    #7c3aed;
  --rp-purple-lt: #ede9fe;
  --rp-purple-dk: #5b21b6;
  --rp-green:     #059669;
  --rp-green-lt:  #d1fae5;
  --rp-red:       #dc2626;
  --rp-red-lt:    #fee2e2;
  --rp-amber:     #d97706;
  --rp-amber-lt:  #fef3c7;
  --rp-text:      #111827;
  --rp-muted:     #6b7280;
  --rp-border:    #e5e7eb;
  --rp-bg:        #f9fafb;
  --rp-card:      #ffffff;
  --rp-radius:    10px;
  --rp-shadow:    0 1px 3px rgba(0,0,0,.08);
  --rp-shadow-md: 0 4px 16px rgba(0,0,0,.08);
}

/* ── Wrap ──────────────────────────────────────────────────────────────────── */
.rp-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--rp-text); }

/* ── Notices ─────────────────────────────────────────────────────────────── */
.rp-notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: var(--rp-radius); margin-bottom: 18px; font-size: 14px; line-height: 1.5; }
.rp-notice a { color: inherit; font-weight: 600; }
.rp-notice-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.rp-notice-warning { background: var(--rp-amber-lt); border: 1px solid #fcd34d; color: #92400e; }
.rp-notice-danger  { background: var(--rp-red-lt);   border: 1px solid #fca5a5; color: #991b1b; }
.rp-notice-icon    { font-size: 16px; flex-shrink: 0; }

/* ── Registration form ───────────────────────────────────────────────────── */
.rp-register-wrap { max-width: 600px; }
.rp-register-hero { margin-bottom: 24px; }
.rp-register-hero h2 { margin: 0 0 6px; font-size: 24px; }
.rp-register-hero p  { margin: 0; color: var(--rp-muted); }

.rp-form { background: var(--rp-card); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 28px; box-shadow: var(--rp-shadow); }
.rp-form-row { display: grid; gap: 14px; }
.rp-form-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .rp-form-row-2 { grid-template-columns: 1fr; } }

.rp-field { margin-bottom: 16px; }
.rp-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--rp-text); }
.rp-hint { font-size: 12px; color: var(--rp-muted); font-weight: 400; }
.rp-req  { color: var(--rp-red); }
.rp-field input,
.rp-field select,
.rp-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rp-border); border-radius: 8px; font-size: 14px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; background: #fff; }
.rp-field input:focus,
.rp-field select:focus,
.rp-field textarea:focus { border-color: var(--rp-purple); outline: none; box-shadow: 0 0 0 3px var(--rp-purple-lt); }
.rp-field-hint { display: block; font-size: 12px; color: var(--rp-muted); margin-top: 4px; }

/* Code availability check */
.rp-code-check-wrap { display: flex; gap: 8px; }
.rp-code-check-wrap input { flex: 1; }
#rp-code-availability { font-size: 12px; margin-top: 4px; font-weight: 500; }
#rp-code-availability.rp-avail-yes { color: var(--rp-green); }
#rp-code-availability.rp-avail-no  { color: var(--rp-red); }

/* Terms checkbox */
.rp-terms-field { border: 1px solid var(--rp-border); border-radius: 8px; padding: 12px 14px; background: var(--rp-bg); }
.rp-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: var(--rp-muted); }
.rp-checkbox-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--rp-purple); flex-shrink: 0; }
.rp-checkbox-custom { display: none; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.rp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: opacity .15s, box-shadow .15s; }
.rp-btn:hover { opacity: .88; }
.rp-btn:disabled { opacity: .5; cursor: not-allowed; }
.rp-btn-primary { background: var(--rp-purple); color: #fff; }
.rp-btn-outline { background: #fff; color: var(--rp-purple); border: 1.5px solid var(--rp-purple); padding: 9px 18px; }
.rp-btn-copy    { background: var(--rp-purple-lt); color: var(--rp-purple-dk); font-size: 13px; padding: 9px 14px; border-radius: 8px; white-space: nowrap; }
.rp-btn-copy:hover { background: var(--rp-purple); color: #fff; }
.rp-btn-loading svg { width: 16px; height: 16px; }
.rp-spin { animation: rp-spin .7s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-form-actions { margin-top: 4px; }

/* Alerts */
.rp-alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-top: 14px; }
.rp-alert-success { background: var(--rp-green-lt); color: #065f46; border: 1px solid #6ee7b7; }
.rp-alert-error   { background: var(--rp-red-lt);   color: #991b1b; border: 1px solid #fca5a5; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.rp-dashboard {}

.rp-dash-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.rp-dash-greeting h2 { margin: 0 0 4px; font-size: 22px; }
.rp-dash-greeting p  { margin: 0; color: var(--rp-muted); font-size: 14px; }
.rp-dash-code-pill   { background: linear-gradient(135deg, var(--rp-purple) 0%, var(--rp-purple-dk) 100%); color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 13px; }
.rp-dash-code-pill strong { font-family: monospace; font-size: 16px; margin-left: 6px; letter-spacing: .05em; }

/* Stats grid */
.rp-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 12px; margin-bottom: 22px; }
.rp-stat-card  { background: var(--rp-card); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 16px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--rp-shadow); }
.rp-stat-icon  { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.rp-icon-purple { background: var(--rp-purple-lt); }
.rp-icon-green  { background: var(--rp-green-lt); }
.rp-icon-blue   { background: #dbeafe; }
.rp-icon-orange { background: #ffedd5; }
.rp-stat-body  {}
.rp-stat-label { display: block; font-size: 12px; color: var(--rp-muted); margin-bottom: 3px; }
.rp-stat-value { display: block; font-size: 20px; font-weight: 700; line-height: 1; }
.rp-stat-highlight { color: var(--rp-purple); }
.rp-stat-sub   { display: block; font-size: 11px; color: var(--rp-muted); margin-top: 3px; }

/* Tabs */
.rp-tabs { background: var(--rp-card); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); overflow: hidden; }
.rp-tab-nav { display: flex; background: var(--rp-bg); border-bottom: 1px solid var(--rp-border); overflow-x: auto; }
.rp-tab-btn { padding: 13px 20px; font-size: 14px; font-weight: 500; color: var(--rp-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .15s; }
.rp-tab-btn:hover { color: var(--rp-text); }
.rp-tab-btn.rp-tab-active { color: var(--rp-purple); border-bottom-color: var(--rp-purple); font-weight: 600; background: var(--rp-card); }
.rp-tab-panel { padding: 24px; }

/* Share tab */
.rp-share-section { display: flex; flex-direction: column; gap: 22px; }
.rp-share-block > label { display: block; font-size: 13px; font-weight: 600; color: var(--rp-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.rp-copy-row  { display: flex; gap: 8px; align-items: stretch; }
.rp-copy-input { flex: 1; padding: 10px 12px; border: 1px solid var(--rp-border); border-radius: 8px; font-family: monospace; font-size: 13px; background: var(--rp-bg); }
.rp-code-display { flex: 1; padding: 10px 14px; background: var(--rp-purple-lt); border-radius: 8px; font-family: monospace; font-size: 22px; font-weight: 700; letter-spacing: .1em; color: var(--rp-purple-dk); }
.rp-share-hint { font-size: 13px; color: var(--rp-muted); margin: 8px 0 0; line-height: 1.5; }

.rp-social-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.rp-social-share > span { font-size: 13px; color: var(--rp-muted); }
.rp-social-btn  { padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; transition: opacity .15s; }
.rp-social-twitter  { background: #000; color: #fff; }
.rp-social-facebook { background: #1877f2; color: #fff; }
.rp-social-whatsapp { background: #25d366; color: #fff; }
.rp-social-btn:hover { opacity: .85; }

/* Payout form */
.rp-input-prefix { display: flex; align-items: stretch; }
.rp-input-prefix span { padding: 0 12px; background: var(--rp-bg); border: 1px solid var(--rp-border); border-right: 0; border-radius: 8px 0 0 8px; display: flex; align-items: center; font-size: 15px; color: var(--rp-muted); }
.rp-input-prefix input { border-radius: 0 8px 8px 0; flex: 1; }

/* History tab */
.rp-section-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.rp-section-title + .rp-section-title { margin-top: 24px; }
.rp-table-wrap  { overflow-x: auto; margin-bottom: 20px; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-table th { background: var(--rp-bg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rp-muted); padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rp-border); }
.rp-table td { padding: 11px 12px; border-bottom: 1px solid var(--rp-border); }
.rp-table tr:last-child td { border-bottom: 0; }
.rp-table-empty { text-align: center; color: var(--rp-muted); font-style: italic; padding: 24px !important; }

/* Badges */
.rp-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.rp-badge-approved, .rp-badge-paid,  .rp-badge-active   { background: var(--rp-green-lt); color: #065f46; }
.rp-badge-on_hold,  .rp-badge-pending, .rp-badge-requested { background: var(--rp-amber-lt); color: #92400e; }
.rp-badge-rejected, .rp-badge-suspended { background: var(--rp-red-lt); color: #991b1b; }

/* Leaderboard */
.rp-leaderboard { max-width: 460px; }
.rp-leader-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; background: var(--rp-bg); border: 1px solid var(--rp-border); font-size: 14px; }
.rp-leader-row.rp-leader-me { background: var(--rp-purple-lt); border-color: #c4b5fd; }
.rp-leader-rank   { width: 26px; height: 26px; background: var(--rp-purple); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.rp-leader-name   { flex: 1; font-weight: 500; }
.rp-leader-earned { font-weight: 700; color: var(--rp-purple); }

/* Text helpers */
.rp-text-muted { color: var(--rp-muted); font-size: 13px; }