.rrm-client {
    display: grid;
    gap: 16px;
}

.rrm-client * {
    box-sizing: border-box;
}


.rrm-tabs {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}

.rrm-tabs button {
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #526173;
    font-weight: 700;
    min-height: 36px;
    padding: 8px 12px;
}

.rrm-tabs button:hover,
.rrm-tabs button:focus,
.rrm-tabs button.is-active {
    background: #e8f1ff;
    color: #174a8b;
    outline: none;
}

.rrm-tab-panels,
.rrm-tab-panel.is-active {
    display: grid;
    gap: 16px;
}

.rrm-tab-panel {
    display: none;
}

.rrm-overview-panel {
    background: #f8fafc;
}

.rrm-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rrm-client__hero,
.rrm-client__panel,
.rrm-wallet-grid article {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 6px;
}

.rrm-client__hero {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 18px;
}

.rrm-client__hero h2,
.rrm-client__panel h3 {
    margin: 0 0 6px;
}

.rrm-client__hero p,
.rrm-client__panel p {
    color: #607080;
    margin: 0;
}

.rrm-client__heroStat {
    min-width: 170px;
    text-align: right;
}

.rrm-client__heroStat span,
.rrm-wallet-grid span {
    color: #607080;
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.rrm-client__heroStat strong,
.rrm-wallet-grid strong {
    color: #172033;
    display: block;
    font-size: 24px;
}

.rrm-client__panel {
    padding: 18px;
}

.rrm-panel-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.rrm-code {
    background: #e8f1ff;
    border: 1px solid #bfd7ff;
    border-radius: 6px;
    color: #174a8b;
    font-weight: 700;
    padding: 7px 10px;
    white-space: nowrap;
}

.rrm-link-copy {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.rrm-link-copy input {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #263241;
    min-height: 38px;
    padding: 8px 10px;
    width: 100%;
}

.rrm-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.rrm-qr-row {
    align-items: center;
    border-top: 1px solid #edf1f6;
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
}

.rrm-qr-row img {
    border: 1px solid #dde3ec;
    border-radius: 6px;
    height: 90px;
    width: 90px;
}

.rrm-wallet-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rrm-wallet-grid article {
    padding: 14px;
}

.rrm-wallet-grid small {
    color: #607080;
    display: block;
    margin-top: 6px;
}

.rrm-service-list,
.rrm-rules-list {
    display: grid;
    gap: 10px;
}

.rrm-service,
.rrm-rules-list article {
    border: 1px solid #edf1f6;
    border-radius: 6px;
    padding: 12px;
}

.rrm-service__top,
.rrm-service__meta {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.rrm-service__top strong,
.rrm-rules-list strong {
    display: block;
}

.rrm-service__top small,
.rrm-rules-list small,
.rrm-rules-list span {
    color: #607080;
    display: block;
    margin-top: 4px;
}

.rrm-service__top > span {
    background: #fff4d6;
    border-radius: 6px;
    color: #72510c;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 8px;
    text-align: right;
}

.rrm-service__top > span.is-ready {
    background: #dcfce7;
    color: #166534;
}

.rrm-progress {
    background: #eef2f7;
    border-radius: 999px;
    height: 10px;
    margin: 12px 0 8px;
    overflow: hidden;
}

.rrm-progress span {
    background: #2563eb;
    display: block;
    height: 100%;
}

.rrm-service__meta {
    color: #607080;
    font-size: 13px;
}

.rrm-service__meta strong {
    color: #263241;
}

.rrm-history-table {
    overflow-x: auto;
}

.rrm-history-table table {
    border-collapse: collapse;
    width: 100%;
}

.rrm-history-table th,
.rrm-history-table td {
    border-top: 1px solid #edf1f6;
    padding: 10px 8px;
    text-align: left;
    white-space: nowrap;
}

.rrm-history-table th {
    color: #607080;
    font-size: 12px;
}

.rrm-empty {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #607080;
    padding: 14px;
}

@media (max-width: 900px) {
    .rrm-wallet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .rrm-client__hero,
    .rrm-panel-head,
    .rrm-service__top,
    .rrm-service__meta,
    .rrm-qr-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .rrm-client__heroStat {
        text-align: left;
    }

    .rrm-link-copy,
    .rrm-wallet-grid {
        grid-template-columns: 1fr;
    }
}

.rrm-earn-section {
    overflow: hidden;
}

.rrm-earn-head {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #edf1f6;
    border-radius: 6px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 14px;
}

.rrm-section-kicker,
.rrm-rule-card__label {
    color: #2563eb;
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.rrm-earn-head h3 {
    margin-bottom: 5px;
}

.rrm-rules-list--pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rrm-rule-card {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 6px;
    display: grid;
    gap: 14px;
    padding: 14px;
}

.rrm-rule-card__head,
.rrm-rule-card__rewards,
.rrm-rule-card__footer {
    display: grid;
    gap: 10px;
}

.rrm-rule-card__head {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr) auto;
}

.rrm-rule-card__head > small,
.rrm-rule-card__footer span {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.rrm-rule-card__head > small {
    background: #eef6f3;
    color: #236554;
    margin: 0;
    padding: 6px 9px;
}

.rrm-rule-card__head > div > strong {
    color: #172033;
    font-size: 16px;
    line-height: 1.25;
}

.rrm-rule-card__head > div > span:not(.rrm-rule-card__label) {
    color: #607080;
    line-height: 1.35;
}

.rrm-rule-card__rewards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rrm-rule-card__rewards > div {
    background: #f8fafc;
    border: 1px solid #edf1f6;
    border-radius: 6px;
    padding: 12px;
}

.rrm-rule-card__rewards span {
    color: #607080;
    display: block;
    font-size: 12px;
    margin: 0 0 4px;
}

.rrm-rule-card__rewards strong {
    color: #172033;
    display: block;
    font-size: 21px;
    line-height: 1.1;
}

.rrm-rule-card__footer {
    border-top: 1px solid #edf1f6;
    grid-template-columns: repeat(2, minmax(0, max-content));
    padding-top: 12px;
}

.rrm-rule-card__footer span {
    background: #f1f5f9;
    color: #475569;
    padding: 6px 9px;
}

.rrm-empty--earn {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
}

@media (max-width: 900px) {
    .rrm-rules-list--pro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .rrm-earn-head,
    .rrm-rule-card__head,
    .rrm-rule-card__rewards,
    .rrm-rule-card__footer {
        grid-template-columns: 1fr;
    }

    .rrm-earn-head {
        align-items: flex-start;
        display: grid;
    }

    .rrm-rule-card__head > small,
    .rrm-rule-card__footer span {
        justify-self: flex-start;
        white-space: normal;
    }
}
.rrm-client-pagination { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; margin-top:14px; }
.rrm-client-pagination a { border:1px solid #dde3ec; border-radius:5px; color:#405064; min-width:34px; padding:7px 9px; text-align:center; }
.rrm-client-pagination a:hover, .rrm-client-pagination a.is-active { background:#e8f1ff; border-color:#bfd7ff; color:#174a8b; text-decoration:none; }

.rrm-client-alert { border-radius:6px; font-weight:700; padding:12px 14px; }
.rrm-client-alert.is-success { background:#dcfce7; border:1px solid #86efac; color:#166534; }
.rrm-client-alert.is-error { background:#fee2e2; border:1px solid #fca5a5; color:#991b1b; }
.rrm-service__action {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.rrm-renewal-badge {
    background: #fff4d6;
    border: 1px solid #f5dfa2;
    border-radius: 6px;
    color: #72510c;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    padding: 8px 10px;
    text-align: right;
}

.rrm-renewal-badge.is-ready {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.rrm-service__action form {
    margin: 0;
}

.rrm-service__action .btn {
    min-height: 34px;
    padding: 7px 11px;
}
.rrm-claim-history { border-top:1px solid #edf1f6; margin-top:18px; padding-top:16px; }
.rrm-claim-history h4 { font-size:15px; margin:0 0 10px; }
@media (max-width:640px) { .rrm-service__action { justify-content:flex-start; } }

.rrm-join-panel {
    background: #f8fafc;
}

.rrm-join-grid {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}

.rrm-join-grid h3 {
    color: #172033;
    font-size: 22px;
    margin-bottom: 8px;
}

.rrm-join-card {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 6px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.rrm-join-card small {
    color: #607080;
    line-height: 1.35;
}

.rrm-join-terms {
    align-items: flex-start;
    color: #263241;
    display: grid;
    font-weight: 600;
    gap: 8px;
    grid-template-columns: 18px minmax(0, 1fr);
    margin: 0;
}

.rrm-join-terms input {
    margin-top: 3px;
}

@media (max-width: 760px) {
    .rrm-join-grid {
        grid-template-columns: 1fr;
    }
}

/* Payout request */
.rrm-payout-balance {
    background: #f0f7ff;
    border: 1px solid #bdd7f5;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 14px 16px;
}

.rrm-payout-balance span {
    color: #607080;
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.rrm-payout-balance strong {
    color: #172033;
    display: block;
    font-size: 26px;
    line-height: 1.1;
    margin-bottom: 4px;
}

.rrm-payout-balance small {
    color: #7a8898;
    display: block;
    font-size: 12px;
}

.rrm-payout-form .rrm-field {
    display: grid;
    gap: 6px;
}

.rrm-payout-form .rrm-field label {
    font-weight: 600;
}

.rrm-payout-fields {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.rrm-payout-status {
    border-radius: 4px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
}

.rrm-payout-status--pending { background: #fff3cd; color: #856404; }
.rrm-payout-status--paid { background: #d1fae5; color: #065f46; }
.rrm-payout-status--rejected { background: #fee2e2; color: #991b1b; }

/* Invite-only: referral code entry page */
.rrm-invite-wrap {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.rrm-invite-card {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    max-width: 440px;
    padding: 36px 32px;
    text-align: center;
    width: 100%;
}

.rrm-invite-icon {
    background: #e8f1ff;
    border-radius: 50%;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    height: 60px;
    margin-bottom: 20px;
    width: 60px;
}

.rrm-invite-card h2 {
    font-size: 22px;
    margin: 0 0 10px;
}

.rrm-invite-desc {
    color: #607080;
    margin: 0 0 24px;
}

.rrm-invite-alert {
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 18px;
    padding: 11px 14px;
    text-align: left;
}

.rrm-invite-alert--error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.rrm-invite-form {
    text-align: left;
}

.rrm-invite-field {
    margin-bottom: 16px;
}

.rrm-invite-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.rrm-invite-submit {
    width: 100%;
}

.rrm-invite-login-hint {
    color: #607080;
    font-size: 13px;
    margin: 18px 0 0;
}

@media (max-width: 480px) {
    .rrm-invite-card {
        padding: 24px 18px;
    }
}