.rp-page { max-width: 1300px; }

.rp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin: 16px 0;
}
@media (max-width: 900px) { .rp-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .rp-stats-grid { grid-template-columns: 1fr; } }

.rp-stat {
    background: #141414;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}
.rp-stat.accent { border-color: rgba(0,255,213,.25); }
.rp-stat-val { font-size: 1.45rem; font-weight: 800; color: #fff; }
.rp-stat-val.brand { color: #00ffd5; }
.rp-stat-val.red   { color: #f87171; }
.rp-stat-val.green { color: #4ade80; }
.rp-stat-lbl { font-size: .82rem; color: #6b7280; margin-top: 3px; }

.rp-alert {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.25);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
    color: #e5e7eb;
}

.rp-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-bottom: 1px solid #222; padding-bottom: 0; margin-bottom: 20px;
}
.rp-tab {
    padding: 9px 16px; border: none; background: transparent;
    color: #9aa3af; font-size: .92rem; font-weight: 600; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0;
    transition: color .15s, border-color .15s;
}
.rp-tab:hover { color: #fff; }
.rp-tab.active { color: #00ffd5; border-bottom-color: #00ffd5; background: rgba(0,255,213,.04); }

.rp-section { display: none; }
.rp-section.active { display: block; }

.rp-panel {
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}
.rp-panel-title { font-weight: 700; color: #00ffd5; margin-bottom: 14px; font-size: 1rem; }

.ref-badge-status {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.ref-badge-status.active, .ref-badge-status.confirmed, .ref-badge-status.paid {
    background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.25);
}
.ref-badge-status.pending {
    background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.25);
}
.ref-badge-status.rejected, .ref-badge-status.suspended {
    background: rgba(248,113,113,.12); color: #f87171; border: 1px solid rgba(248,113,113,.25);
}

.rp-filter-strip {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.rp-ftab {
    padding: 6px 14px; border-radius: 8px; font-size: .85rem; font-weight: 600;
    text-decoration: none; color: #9aa3af; background: #1a1a1a; border: 1px solid #222;
    transition: all .15s;
}
.rp-ftab:hover { color: #fff; border-color: #333; }
.rp-ftab.active { color: #00ffd5; border-color: rgba(0,255,213,.35); background: rgba(0,255,213,.06); }

.rp-sort-strip {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
}
.rp-sort-strip label { font-size: .82rem; color: #9aa3af; }

.inline-action {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.inline-action input[type="text"] {
    padding: 5px 8px; background: #1a1a1a; border: 1px solid #333; border-radius: 6px;
    color: #eee; font-size: 12px; width: 120px;
}

.small-note { font-size: 11px; color: #6b7280; margin-top: 2px; }

.rp-pagination {
    display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
    margin-top: 16px; padding-top: 12px; border-top: 1px dashed #222;
}
.rp-page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border-radius: 8px; border: 1px solid #222; background: #1a1a1a;
    color: #ccc; text-decoration: none; font-size: .85rem; font-weight: 600;
    transition: all .15s;
}
.rp-page-link:hover { border-color: #444; color: #fff; }
.rp-page-link.active { background: rgba(0,255,213,.1); border-color: rgba(0,255,213,.35); color: #00ffd5; }
.rp-page-link.disabled { opacity: .4; pointer-events: none; }
.rp-page-link.ellipsis { border: none; background: none; pointer-events: none; color: #666; }
.rp-page-info { font-size: .8rem; color: #6b7280; margin-left: 6px; }

.mono { font-family: 'Courier New', monospace; }