/* =========================================================
   BNG REFERRAL NETWORK
   File: public_html/referral.css
   Mobile-first referral and network interface
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    --primary-yellow: #F0B90B;
    --primary-yellow-hover: #DFAE00;
    --primary-yellow-soft: #FFF7D6;
    --primary-yellow-border: #F5D35C;

    --background: #FFFFFF;
    --secondary-background: #F5F5F5;
    --tertiary-background: #FAFAFA;
    --card-background: #FFFFFF;

    --main-text: #181A20;
    --secondary-text: #707A8A;
    --muted-text: #98A1B0;
    --disabled-text: #B7BEC8;

    --border-color: #EAECEF;
    --border-strong: #D8DCE3;

    --success: #0ECB81;
    --success-dark: #087A4E;
    --success-soft: #E7F8F1;

    --danger: #F6465D;
    --danger-dark: #BD263A;
    --danger-soft: #FFF0F2;

    --warning: #F0B90B;
    --warning-dark: #896500;
    --warning-soft: #FFF8DE;

    --information: #2F6FED;
    --information-dark: #2058C6;
    --information-soft: #EEF4FF;

    --purple: #7B61FF;
    --purple-dark: #5C43E5;
    --purple-soft: #F1EEFF;

    --shadow-xs:
        0 1px 2px rgba(24, 26, 32, 0.03);

    --shadow-sm:
        0 5px 18px rgba(24, 26, 32, 0.055);

    --shadow-md:
        0 14px 38px rgba(24, 26, 32, 0.085);

    --shadow-lg:
        0 26px 76px rgba(24, 26, 32, 0.16);

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-pill: 999px;

    --header-height: 70px;
    --bottom-navigation-height: 78px;
    --container-width: 1220px;

    --transition-fast: 160ms ease;
    --transition-normal: 240ms ease;
    --transition-slow: 340ms ease;
}


/* =========================================================
   2. RESET AND BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    padding-bottom:
        calc(
            var(--bottom-navigation-height)
            + env(safe-area-inset-bottom)
            + 22px
        );

    overflow-x: hidden;

    color: var(--main-text);
    background: var(--secondary-background);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.referral-member-detail-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    margin: 0;

    color: inherit;
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button {
    border: 0;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

input,
select,
textarea {
    min-width: 0;
}

[hidden] {
    display: none !important;
}

::selection {
    color: var(--main-text);
    background: rgba(240, 185, 11, 0.32);
}


/* =========================================================
   3. ACCESSIBILITY
   ========================================================= */

.skip-link {
    position: fixed;
    z-index: 9999;

    top: 10px;
    left: 10px;

    padding: 11px 16px;

    color: var(--main-text);
    background: var(--primary-yellow);
    border-radius: var(--radius-md);

    font-size: 14px;
    font-weight: 900;

    transform: translateY(-150%);

    transition:
        transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(240, 185, 11, 0.3);
    outline-offset: 2px;
}


/* =========================================================
   4. SHARED CONTAINER
   ========================================================= */

.referral-container {
    width: min(
        100%,
        var(--container-width)
    );

    margin-inline: auto;
    padding-inline: 14px;
}


/* =========================================================
   5. GLOBAL ALERT
   ========================================================= */

.referral-alert {
    position: fixed;
    z-index: 3200;

    top:
        calc(
            env(safe-area-inset-top)
            + 12px
        );

    left: 50%;

    width: min(
        calc(100% - 28px),
        560px
    );

    padding: 13px 16px;

    color: var(--main-text);
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;

    transform: translateX(-50%);
}

.referral-alert.is-success {
    color: var(--success-dark);
    background: var(--success-soft);
    border-color: rgba(14, 203, 129, 0.32);
}

.referral-alert.is-error {
    color: var(--danger-dark);
    background: var(--danger-soft);
    border-color: rgba(246, 70, 93, 0.32);
}

.referral-alert.is-warning {
    color: var(--warning-dark);
    background: var(--warning-soft);
    border-color: rgba(240, 185, 11, 0.42);
}


/* =========================================================
   6. PAGE LOADING
   ========================================================= */

.referral-page-loading {
    position: fixed;
    z-index: 4000;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 24px;

    color: var(--secondary-text);
    background: rgba(255, 255, 255, 0.965);

    font-size: 14px;
    font-weight: 700;
    text-align: center;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.referral-page-loading__spinner {
    width: 25px;
    height: 25px;

    flex: 0 0 auto;

    border: 3px solid var(--border-color);
    border-top-color: var(--primary-yellow);
    border-radius: 50%;

    animation:
        referral-spin 0.8s linear infinite;
}

@keyframes referral-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   7. HEADER
   ========================================================= */

.referral-header {
    position: sticky;
    z-index: 900;

    top: 0;

    min-height:
        calc(
            var(--header-height)
            + env(safe-area-inset-top)
        );

    padding-top:
        env(safe-area-inset-top);

    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border-color);

    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
}

.referral-header__inner {
    min-height: var(--header-height);

    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        42px;

    align-items: center;
    gap: 10px;
}

.referral-header__back,
.referral-header__refresh {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--main-text);
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 50%;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.referral-header__back:hover,
.referral-header__refresh:hover {
    background: var(--secondary-background);
    border-color: var(--border-strong);
}

.referral-header__back:active,
.referral-header__refresh:active {
    transform: scale(0.95);
}

.referral-header__back svg,
.referral-header__refresh svg {
    width: 22px;
    height: 22px;
}

.referral-header__refresh.is-loading svg {
    animation:
        referral-spin 0.8s linear infinite;
}

.referral-header__refresh:disabled {
    opacity: 0.6;
}

.referral-brand {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.referral-brand__logo {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    overflow: hidden;

    background: var(--primary-yellow-soft);
    border-radius: 12px;
}

.referral-brand__logo img {
    width: 24px;
    height: 24px;

    object-fit: contain;
}

.referral-brand__content {
    min-width: 0;
}

.referral-brand__content strong,
.referral-brand__content small {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-brand__content strong {
    color: var(--main-text);

    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.4px;
}

.referral-brand__content small {
    margin-top: 1px;

    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25px;
}


/* =========================================================
   8. MAIN PAGE
   ========================================================= */

.referral-main {
    padding-block: 14px 26px;
}

.referral-hero,
.referral-invite-section,
.referral-summary,
.referral-level-section,
.referral-members-section,
.referral-activity-section,
.referral-rules-section,
.referral-security-notice {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   9. HERO
   ========================================================= */

.referral-hero {
    position: relative;

    display: grid;
    gap: 16px;

    overflow: hidden;

    padding: 18px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FFFFFF 62%,
            #FFF9E6 100%
        );
}

.referral-hero::after {
    position: absolute;

    right: -62px;
    bottom: -78px;

    width: 170px;
    height: 170px;

    background:
        radial-gradient(
            circle,
            rgba(240, 185, 11, 0.16),
            rgba(240, 185, 11, 0)
        );

    border-radius: 50%;

    content: "";
    pointer-events: none;
}

.referral-hero__content,
.referral-hero__status {
    position: relative;
    z-index: 1;
}

.section-eyebrow {
    display: block;

    color: #8A6600;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.referral-hero h1 {
    margin: 5px 0 0;

    color: var(--main-text);

    font-size:
        clamp(
            27px,
            8vw,
            42px
        );

    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 1.08;
}

.referral-hero p {
    max-width: 650px;

    margin: 8px 0 0;

    color: var(--secondary-text);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.65;
}

.referral-hero__status {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.referral-hero__status > div {
    min-width: 0;

    padding: 11px;

    background: rgba(245, 245, 245, 0.92);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-hero__status span,
.referral-hero__status strong {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-hero__status span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 700;
}

.referral-hero__status strong {
    margin-top: 4px;

    color: var(--main-text);

    font-size: 12px;
    font-weight: 900;
}


/* =========================================================
   10. POLICY NOTICE
   ========================================================= */

.referral-policy-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-top: 12px;
    padding: 14px;

    color: #775A00;
    background: var(--warning-soft);
    border: 1px solid var(--primary-yellow-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.referral-policy-notice > svg {
    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    margin-top: 1px;
}

.referral-policy-notice div {
    min-width: 0;
}

.referral-policy-notice strong {
    display: block;

    color: var(--warning-dark);

    font-size: 12px;
    font-weight: 900;
}

.referral-policy-notice p {
    margin: 3px 0 0;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}


/* =========================================================
   11. SECTION HEADINGS
   ========================================================= */

.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.section-heading-row > div {
    min-width: 0;
}

.section-heading-row h2 {
    margin: 4px 0 0;

    color: var(--main-text);

    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.55px;
}

.referral-link-status,
.referral-data-status,
.referral-level-label,
.referral-member-count,
.referral-activity-count {
    min-height: 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding-inline: 10px;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);

    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.referral-link-status.is-ready,
.referral-data-status.is-ready {
    color: var(--success-dark);
    background: var(--success-soft);
    border-color: rgba(14, 203, 129, 0.26);
}

.referral-link-status.is-error,
.referral-data-status.is-error {
    color: var(--danger-dark);
    background: var(--danger-soft);
    border-color: rgba(246, 70, 93, 0.26);
}

.referral-level-label {
    color: #805E00;
    background: var(--primary-yellow-soft);
    border-color: var(--primary-yellow-border);
}


/* =========================================================
   12. INVITE SECTION
   ========================================================= */

.referral-invite-section {
    margin-top: 12px;
    padding: 17px;
}

.referral-invite-card {
    position: relative;

    margin-top: 14px;
    padding: 15px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FFFFFF 55%,
            #FFF9E6 100%
        );

    border: 1px solid var(--primary-yellow-border);
    border-radius: var(--radius-xl);
}

.referral-invite-card::after {
    position: absolute;

    top: -55px;
    right: -45px;

    width: 155px;
    height: 155px;

    background:
        radial-gradient(
            circle,
            rgba(240, 185, 11, 0.16),
            rgba(240, 185, 11, 0)
        );

    border-radius: 50%;

    content: "";
    pointer-events: none;
}

.referral-invite-card > * {
    position: relative;
    z-index: 1;
}

.referral-invite-card__heading {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}

.referral-invite-card__icon {
    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: #805E00;
    background: var(--primary-yellow);
    border-radius: 15px;

    box-shadow:
        0 8px 22px
        rgba(240, 185, 11, 0.24);
}

.referral-invite-card__icon svg {
    width: 25px;
    height: 25px;
}

.referral-invite-card__heading > div {
    min-width: 0;
}

.referral-invite-card__heading span,
.referral-invite-card__heading strong {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
}

.referral-invite-card__heading span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 700;
}

.referral-invite-card__heading strong {
    margin-top: 3px;

    color: var(--main-text);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}


/* =========================================================
   13. REFERRAL CODE AND URL BLOCKS
   ========================================================= */

.referral-code-block,
.referral-link-block {
    margin-top: 12px;
    padding: 12px;

    background: rgba(250, 250, 250, 0.94);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-code-block__heading,
.referral-link-block__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.referral-code-block__heading > span,
.referral-link-block__heading > span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 800;
}

.referral-code-block__heading button,
.referral-link-block__heading button {
    min-height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding-inline: 10px;

    color: var(--main-text);
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    font-size: 9px;
    font-weight: 900;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.referral-code-block__heading button:hover:not(:disabled),
.referral-link-block__heading button:hover:not(:disabled) {
    background: var(--primary-yellow-soft);
    border-color: var(--primary-yellow-border);
}

.referral-code-block__heading button:disabled,
.referral-link-block__heading button:disabled {
    color: var(--disabled-text);
    opacity: 0.72;
}

.referral-code-block__heading button svg,
.referral-link-block__heading button svg {
    width: 15px;
    height: 15px;
}

.referral-code-block code,
.referral-link-block code {
    display: block;

    margin-top: 9px;
    padding: 11px;

    overflow-wrap: anywhere;

    color: var(--main-text);
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
}

.referral-code-block code {
    color: #805E00;

    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* =========================================================
   14. SHARE ACTIONS
   ========================================================= */

.referral-share-actions {
    display: grid;
    gap: 8px;

    margin-top: 12px;
}

.referral-share-button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding-inline: 14px;

    border-radius: var(--radius-md);

    font-size: 11px;
    font-weight: 900;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.referral-share-button svg {
    width: 19px;
    height: 19px;
}

.referral-share-button--primary {
    color: var(--main-text);
    background: var(--primary-yellow);
    border: 1px solid var(--primary-yellow);
}

.referral-share-button--primary:hover:not(:disabled) {
    background: var(--primary-yellow-hover);
    border-color: var(--primary-yellow-hover);
}

.referral-share-button--secondary {
    color: var(--main-text);
    background: var(--secondary-background);
    border: 1px solid var(--border-color);
}

.referral-share-button--secondary:hover:not(:disabled) {
    background: var(--border-color);
}

.referral-share-button:active:not(:disabled) {
    transform: scale(0.985);
}

.referral-share-button:disabled {
    color: var(--disabled-text);
    opacity: 0.65;
}


/* =========================================================
   15. QR CONTAINER
   ========================================================= */

.referral-qr-container {
    display: grid;
    grid-template-columns:
        118px
        minmax(0, 1fr);

    align-items: center;
    gap: 13px;

    margin-top: 12px;
    padding: 13px;

    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.referral-qr-code {
    width: 118px;
    height: 118px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-qr-code img,
.referral-qr-code canvas,
.referral-qr-code svg {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.referral-qr-container > div:last-child {
    min-width: 0;
}

.referral-qr-container strong {
    display: block;

    color: var(--main-text);

    font-size: 12px;
    font-weight: 900;
}

.referral-qr-container p {
    margin: 4px 0 0;

    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.55;
}


/* =========================================================
   16. REFERRAL SUMMARY
   ========================================================= */

.referral-summary {
    margin-top: 12px;
    padding: 17px;
}

.referral-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 14px;
}

.referral-summary-card {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 12px;

    background: var(--secondary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.referral-summary-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);

    transform: translateY(-1px);
}

.referral-summary-card__icon {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 11px;
}

.referral-summary-card__icon svg {
    width: 21px;
    height: 21px;
}

.referral-summary-card__icon--team {
    color: #805E00;
    background: var(--primary-yellow-soft);
}

.referral-summary-card__icon--direct {
    color: var(--success-dark);
    background: var(--success-soft);
}

.referral-summary-card__icon--level-two {
    color: var(--purple-dark);
    background: var(--purple-soft);
}

.referral-summary-card__icon--active {
    color: var(--information-dark);
    background: var(--information-soft);
}

.referral-summary-card > div:last-child {
    min-width: 0;
}

.referral-summary-card span,
.referral-summary-card strong,
.referral-summary-card small {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-summary-card > div > span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 700;
}

.referral-summary-card strong {
    margin-top: 4px;

    color: var(--main-text);

    font-size: 15px;
    font-weight: 900;
}

.referral-summary-card small {
    margin-top: 2px;

    color: var(--secondary-text);

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   17. REFERRAL LEVELS
   ========================================================= */

.referral-level-section {
    margin-top: 12px;
    padding: 17px;
}

.referral-level-grid {
    display: grid;
    gap: 10px;

    margin-top: 14px;
}

.referral-level-card {
    position: relative;

    min-width: 0;

    padding: 14px;

    overflow: hidden;

    border-radius: var(--radius-lg);
}

.referral-level-card--direct {
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F1FBF7
        );

    border: 1px solid rgba(14, 203, 129, 0.25);
}

.referral-level-card--second {
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F4F1FF
        );

    border: 1px solid rgba(123, 97, 255, 0.25);
}

.referral-level-card__heading {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 10px;
}

.referral-level-card__icon {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;
}

.referral-level-card--direct
.referral-level-card__icon {
    color: var(--success-dark);
    background: var(--success-soft);
}

.referral-level-card--second
.referral-level-card__icon {
    color: var(--purple-dark);
    background: var(--purple-soft);
}

.referral-level-card__icon svg {
    width: 23px;
    height: 23px;
}

.referral-level-card__heading > div {
    min-width: 0;
}

.referral-level-card__heading span,
.referral-level-card__heading strong {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-level-card__heading span {
    color: var(--secondary-text);

    font-size: 9px;
    font-weight: 700;
}

.referral-level-card__heading strong {
    margin-top: 2px;

    color: var(--main-text);

    font-size: 14px;
    font-weight: 900;
}

.referral-level-card__heading b {
    min-width: 52px;
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-pill);

    font-size: 16px;
    font-weight: 900;
}

.referral-level-card--direct
.referral-level-card__heading b {
    color: var(--success-dark);
    background: var(--success-soft);
}

.referral-level-card--second
.referral-level-card__heading b {
    color: var(--purple-dark);
    background: var(--purple-soft);
}

.referral-level-card > p {
    margin: 12px 0 0;

    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}

.referral-level-card dl {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin: 13px 0 0;
}

.referral-level-card dl > div {
    min-width: 0;

    padding: 10px;

    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-level-card dt {
    color: var(--secondary-text);

    font-size: 9px;
    font-weight: 700;
}

.referral-level-card dd {
    overflow: hidden;

    margin: 4px 0 0;

    color: var(--main-text);

    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   18. MEMBER SECTION
   ========================================================= */

.referral-members-section {
    margin-top: 12px;
    padding: 17px;
}

.referral-member-tools {
    display: grid;
    gap: 9px;

    margin-top: 14px;
}

.referral-member-search {
    min-height: 49px;

    display: grid;
    grid-template-columns:
        21px
        minmax(0, 1fr)
        36px;

    align-items: center;
    gap: 8px;

    padding-inline: 13px 5px;

    background: var(--secondary-background);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.referral-member-search:focus-within {
    background: #FFFFFF;
    border-color: var(--primary-yellow);

    box-shadow:
        0 0 0 3px
        rgba(240, 185, 11, 0.12);
}

.referral-member-search > svg {
    width: 20px;
    height: 20px;

    color: var(--secondary-text);
}

.referral-member-search input {
    width: 100%;
    height: 47px;

    padding: 0;

    color: var(--main-text);
    background: transparent;
    border: 0;
    outline: 0;

    font-size: 12px;
    font-weight: 700;
}

.referral-member-search input::placeholder {
    color: var(--muted-text);
    font-weight: 600;
}

.referral-member-search button {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--secondary-text);
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 50%;
}

.referral-member-search button svg {
    width: 17px;
    height: 17px;
}

.referral-member-tabs {
    display: flex;
    align-items: center;
    gap: 5px;

    overflow-x: auto;
    scrollbar-width: none;
}

.referral-member-tabs::-webkit-scrollbar {
    display: none;
}

.referral-member-tab {
    min-height: 37px;

    flex: 0 0 auto;

    padding-inline: 12px;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.referral-member-tab:hover {
    color: var(--main-text);
    border-color: var(--border-color);
}

.referral-member-tab.is-active {
    color: var(--main-text);
    background: var(--primary-yellow);
    border-color: var(--primary-yellow);
}

.referral-member-status-select {
    position: relative;

    min-height: 46px;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        18px;

    align-items: center;
    gap: 8px;

    padding-inline: 12px;

    background: var(--secondary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-member-status-select > span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 800;
}

.referral-member-status-select select {
    width: 100%;

    padding: 0 20px 0 0;

    color: var(--main-text);
    background: transparent;
    border: 0;
    outline: 0;

    appearance: none;
    -webkit-appearance: none;

    font-size: 11px;
    font-weight: 800;
}

.referral-member-status-select > svg {
    width: 17px;
    height: 17px;

    pointer-events: none;

    color: var(--secondary-text);
}


/* =========================================================
   19. MEMBER LIST AND ROW
   ========================================================= */

.referral-member-list {
    margin-top: 13px;

    overflow: hidden;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.referral-member-row {
    position: relative;

    min-width: 0;
    min-height: 138px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(98px, auto)
        34px;

    grid-template-areas:
        "identity status open"
        "identity deposit open"
        "sponsor level open";

    align-items: center;
    gap: 8px;

    padding: 12px 10px;

    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);

    cursor: pointer;

    transition:
        background var(--transition-fast);
}

.referral-member-row:last-child {
    border-bottom: 0;
}

.referral-member-row:hover,
.referral-member-row:focus-within {
    background: var(--tertiary-background);
}

.referral-member-row__identity {
    grid-area: identity;

    min-width: 0;

    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: center;
    gap: 9px;
}

.referral-member-row__avatar {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: #805E00;
    background: var(--primary-yellow-soft);
    border: 1px solid var(--primary-yellow-border);
    border-radius: 50%;

    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.referral-member-row__identity > div {
    min-width: 0;
}

.referral-member-row__name,
.referral-member-row__reference,
.referral-member-row__joined {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-member-row__name {
    color: var(--main-text);

    font-size: 12px;
    font-weight: 900;
}

.referral-member-row__reference {
    margin-top: 2px;

    color: var(--secondary-text);

    font-size: 8px;
    font-weight: 700;
}

.referral-member-row__joined {
    margin-top: 2px;

    color: var(--muted-text);

    font-size: 8px;
    font-weight: 600;
}

.referral-member-row__sponsor {
    grid-area: sponsor;
}

.referral-member-row__level {
    grid-area: level;

    text-align: right;
}

.referral-member-row__deposit {
    grid-area: deposit;

    text-align: right;
}

.referral-member-row__sponsor,
.referral-member-row__level,
.referral-member-row__deposit {
    min-width: 0;
}

.referral-member-row__sponsor span,
.referral-member-row__sponsor strong,
.referral-member-row__level span,
.referral-member-row__level strong,
.referral-member-row__deposit span,
.referral-member-row__deposit strong {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-member-row__sponsor span,
.referral-member-row__level span,
.referral-member-row__deposit span {
    color: var(--secondary-text);

    font-size: 8px;
    font-weight: 700;
}

.referral-member-row__sponsor strong,
.referral-member-row__level strong,
.referral-member-row__deposit strong {
    margin-top: 2px;

    color: var(--main-text);

    font-size: 9px;
    font-weight: 900;
}

.referral-member-row__status-column {
    grid-area: status;

    min-width: 0;

    text-align: right;
}

.referral-member-row__status {
    min-height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;

    padding-inline: 9px;

    overflow: hidden;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border-radius: var(--radius-pill);

    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-member-row__status.is-active,
.referral-member-row__status.is-verified {
    color: var(--success-dark);
    background: var(--success-soft);
}

.referral-member-row__status.is-pending,
.referral-member-row__status.is-reviewing {
    color: var(--warning-dark);
    background: var(--warning-soft);
}

.referral-member-row__status.is-inactive,
.referral-member-row__status.is-blocked,
.referral-member-row__status.is-rejected {
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.referral-member-row__status-message {
    display: block;
    overflow: hidden;

    margin-top: 3px;

    color: var(--muted-text);

    font-size: 8px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-member-row__open {
    grid-area: open;

    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border-radius: 50%;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.referral-member-row__open:hover {
    color: var(--main-text);
    background: var(--border-color);
}

.referral-member-row__open:active {
    transform: scale(0.94);
}

.referral-member-row__open svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   20. MEMBER LOADING
   ========================================================= */

.referral-member-list-loading {
    display: grid;
    gap: 8px;

    margin-top: 13px;
}

.referral-member-skeleton {
    min-height: 76px;

    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        90px
        76px;

    align-items: center;
    gap: 10px;

    padding: 11px;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-member-skeleton > span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #F0F1F3 25%,
            #FAFAFB 50%,
            #F0F1F3 75%
        );

    background-size: 200% 100%;

    animation:
        referral-skeleton-shimmer 1.3s linear infinite;
}

.referral-member-skeleton__avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;
}

.referral-member-skeleton__name {
    width: 78%;
    height: 15px;

    border-radius: var(--radius-sm);
}

.referral-member-skeleton__deposit {
    width: 100%;
    height: 15px;

    border-radius: var(--radius-sm);
}

.referral-member-skeleton__status {
    width: 100%;
    height: 27px;

    border-radius: var(--radius-pill);
}

@keyframes referral-skeleton-shimmer {
    to {
        background-position: -200% 0;
    }
}


/* =========================================================
   21. EMPTY AND ERROR STATES
   ========================================================= */

.referral-member-empty-state,
.referral-member-error-state,
.referral-activity-empty-state,
.referral-activity-error-state {
    min-height: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-top: 13px;
    padding: 32px 20px;

    color: var(--secondary-text);
    background: var(--tertiary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);

    text-align: center;
}

.referral-member-empty-state__icon,
.referral-member-error-state__icon,
.referral-activity-empty-state__icon,
.referral-activity-error-state__icon {
    width: 58px;
    height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border-radius: 50%;
}

.referral-member-error-state__icon,
.referral-activity-error-state__icon {
    color: var(--danger);
    background: var(--danger-soft);
}

.referral-member-empty-state__icon svg,
.referral-member-error-state__icon svg,
.referral-activity-empty-state__icon svg,
.referral-activity-error-state__icon svg {
    width: 28px;
    height: 28px;
}

.referral-member-empty-state strong,
.referral-member-error-state strong,
.referral-activity-empty-state strong,
.referral-activity-error-state strong {
    color: var(--main-text);

    font-size: 15px;
    font-weight: 900;
}

.referral-member-empty-state p,
.referral-member-error-state p,
.referral-activity-empty-state p,
.referral-activity-error-state p {
    max-width: 410px;

    margin: 6px 0 0;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.referral-member-error-state button,
.referral-activity-error-state button {
    min-height: 43px;

    margin-top: 15px;
    padding-inline: 17px;

    color: var(--main-text);
    background: var(--primary-yellow);
    border-radius: var(--radius-md);

    font-size: 11px;
    font-weight: 900;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.referral-member-error-state button:hover,
.referral-activity-error-state button:hover {
    background: var(--primary-yellow-hover);
}

.referral-member-error-state button:active,
.referral-activity-error-state button:active {
    transform: scale(0.98);
}


/* =========================================================
   22. ACTIVITY SECTION
   ========================================================= */

.referral-activity-section {
    margin-top: 12px;
    padding: 17px;
}

.referral-activity-tabs {
    display: flex;
    align-items: center;
    gap: 5px;

    overflow-x: auto;
    scrollbar-width: none;

    margin-top: 14px;
}

.referral-activity-tabs::-webkit-scrollbar {
    display: none;
}

.referral-activity-tab {
    min-height: 37px;

    flex: 0 0 auto;

    padding-inline: 12px;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.referral-activity-tab:hover {
    color: var(--main-text);
    border-color: var(--border-color);
}

.referral-activity-tab.is-active {
    color: var(--main-text);
    background: var(--primary-yellow);
    border-color: var(--primary-yellow);
}


/* =========================================================
   23. ACTIVITY LIST AND ROW
   ========================================================= */

.referral-activity-list {
    margin-top: 13px;

    overflow: hidden;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.referral-activity-row {
    min-width: 0;
    min-height: 94px;

    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        minmax(85px, auto);

    grid-template-areas:
        "icon content amount"
        "icon content date";

    align-items: center;
    gap: 9px;

    padding: 12px 10px;

    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);

    transition:
        background var(--transition-fast);
}

.referral-activity-row:last-child {
    border-bottom: 0;
}

.referral-activity-row:hover {
    background: var(--tertiary-background);
}

.referral-activity-row__icon {
    grid-area: icon;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #805E00;
    background: var(--primary-yellow-soft);
    border-radius: 13px;

    font-size: 17px;
    font-weight: 900;
}

.referral-activity-row__icon.is-registration {
    color: var(--information-dark);
    background: var(--information-soft);
}

.referral-activity-row__icon.is-activation {
    color: var(--success-dark);
    background: var(--success-soft);
}

.referral-activity-row__icon.is-deposit {
    color: var(--purple-dark);
    background: var(--purple-soft);
}

.referral-activity-row__content {
    grid-area: content;

    min-width: 0;
}

.referral-activity-row__title,
.referral-activity-row__description,
.referral-activity-row__reference {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-activity-row__title {
    color: var(--main-text);

    font-size: 12px;
    font-weight: 900;
}

.referral-activity-row__description {
    margin-top: 2px;

    color: var(--secondary-text);

    font-size: 9px;
    font-weight: 600;
}

.referral-activity-row__reference {
    margin-top: 2px;

    color: var(--muted-text);

    font-size: 8px;
    font-weight: 600;
}

.referral-activity-row__amount {
    grid-area: amount;

    min-width: 0;

    text-align: right;
}

.referral-activity-row__amount strong,
.referral-activity-row__amount span {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-activity-row__amount strong {
    color: var(--main-text);

    font-size: 11px;
    font-weight: 900;
}

.referral-activity-row__amount span {
    margin-top: 2px;

    color: var(--secondary-text);

    font-size: 8px;
    font-weight: 700;
}

.referral-activity-row__date {
    grid-area: date;

    min-width: 0;

    text-align: right;
}

.referral-activity-row__date strong,
.referral-activity-row__date span {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-activity-row__date strong {
    color: var(--secondary-text);

    font-size: 9px;
    font-weight: 800;
}

.referral-activity-row__date span {
    margin-top: 2px;

    color: var(--muted-text);

    font-size: 8px;
    font-weight: 600;
}


/* =========================================================
   24. ACTIVITY LOADING
   ========================================================= */

.referral-activity-loading {
    display: grid;
    gap: 1px;

    margin-top: 13px;

    overflow: hidden;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.referral-activity-skeleton {
    min-height: 82px;

    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        85px
        72px;

    align-items: center;
    gap: 10px;

    padding: 11px;

    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
}

.referral-activity-skeleton:last-child {
    border-bottom: 0;
}

.referral-activity-skeleton > span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #F0F1F3 25%,
            #FAFAFB 50%,
            #F0F1F3 75%
        );

    background-size: 200% 100%;

    animation:
        referral-skeleton-shimmer 1.3s linear infinite;
}

.referral-activity-skeleton__icon {
    width: 42px;
    height: 42px;

    border-radius: 13px;
}

.referral-activity-skeleton__title {
    width: 80%;
    height: 15px;

    border-radius: var(--radius-sm);
}

.referral-activity-skeleton__amount,
.referral-activity-skeleton__date {
    width: 100%;
    height: 14px;

    border-radius: var(--radius-sm);
}


/* =========================================================
   25. REFERRAL RULES
   ========================================================= */

.referral-rules-section {
    margin-top: 12px;
    padding: 17px;
}

.referral-rules-list {
    display: grid;
    gap: 8px;

    margin-top: 14px;
}

.referral-rules-list article {
    min-width: 0;

    display: grid;
    grid-template-columns:
        34px
        minmax(0, 1fr);

    align-items: flex-start;
    gap: 10px;

    padding: 12px;

    background: var(--secondary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-rules-list article > span {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #805E00;
    background: var(--primary-yellow-soft);
    border: 1px solid var(--primary-yellow-border);
    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.referral-rules-list article > div {
    min-width: 0;
}

.referral-rules-list strong {
    display: block;

    color: var(--main-text);

    font-size: 11px;
    font-weight: 900;
}

.referral-rules-list p {
    margin: 3px 0 0;

    color: var(--secondary-text);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
}


/* =========================================================
   26. SECURITY NOTICE
   ========================================================= */

.referral-security-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-top: 12px;
    padding: 14px;

    color: var(--secondary-text);
}

.referral-security-notice > svg {
    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    color: var(--success);
}

.referral-security-notice div {
    min-width: 0;
}

.referral-security-notice strong {
    color: var(--main-text);

    font-size: 12px;
    font-weight: 900;
}

.referral-security-notice p {
    margin: 3px 0 0;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}


/* =========================================================
   27. MOBILE BOTTOM NAVIGATION
   ========================================================= */

.referral-bottom-navigation {
    position: fixed;
    z-index: 800;

    right: 10px;

    bottom:
        calc(
            8px
            + env(safe-area-inset-bottom)
        );

    left: 10px;

    min-height: var(--bottom-navigation-height);

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    align-items: stretch;
    gap: 3px;

    padding: 6px;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.bottom-navigation-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 6px 3px;

    color: var(--secondary-text);
    background: transparent;
    border-radius: 18px;

    font-size: 9px;
    font-weight: 800;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.bottom-navigation-item svg {
    width: 22px;
    height: 22px;
}

.bottom-navigation-item:hover {
    color: var(--main-text);
    background: var(--secondary-background);
}

.bottom-navigation-item.is-active {
    color: var(--main-text);
    background: var(--primary-yellow-soft);
}


/* =========================================================
   28. MEMBER DETAIL BACKDROP
   ========================================================= */

.referral-member-detail-backdrop {
    position: fixed;
    z-index: 1900;
    inset: 0;

    background: rgba(24, 26, 32, 0.48);

    opacity: 0;

    transition:
        opacity var(--transition-normal);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.referral-member-detail-backdrop.is-visible {
    opacity: 1;
}


/* =========================================================
   29. MEMBER DETAIL SHEET
   ========================================================= */

.referral-member-detail-sheet {
    position: fixed;
    z-index: 2000;

    right: 0;
    bottom: 0;
    left: 0;

    max-height:
        min(
            90vh,
            860px
        );

    display: flex;
    flex-direction: column;

    padding-bottom:
        env(safe-area-inset-bottom);

    overflow: hidden;

    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--shadow-lg);

    transform: translateY(105%);

    transition:
        transform var(--transition-slow);
}

.referral-member-detail-sheet.is-open {
    transform: translateY(0);
}

.referral-member-detail-sheet__handle {
    width: 44px;
    height: 5px;

    flex: 0 0 auto;

    margin: 8px auto 3px;

    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

.referral-member-detail-sheet__header {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    flex: 0 0 auto;

    padding: 12px 16px;

    border-bottom: 1px solid var(--border-color);
}

.referral-member-detail-identity {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}

.referral-member-detail-identity__avatar {
    width: 43px;
    height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: #805E00;
    background: var(--primary-yellow-soft);
    border: 1px solid var(--primary-yellow-border);
    border-radius: 50%;

    font-size: 16px;
    font-weight: 900;
}

.referral-member-detail-identity > div {
    min-width: 0;
}

.referral-member-detail-identity > div > span,
.referral-member-detail-identity h2 {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-member-detail-identity > div > span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 800;
}

.referral-member-detail-identity h2 {
    margin: 2px 0 0;

    color: var(--main-text);

    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.4px;
}

.referral-member-detail-close {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border-radius: 50%;
}

.referral-member-detail-close:hover {
    color: var(--main-text);
}

.referral-member-detail-close svg {
    width: 20px;
    height: 20px;
}

.referral-member-detail-sheet__content {
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 16px;
}


/* =========================================================
   30. DETAIL STATUS
   ========================================================= */

.referral-member-detail-status {
    padding: 16px;

    background:
        linear-gradient(
            135deg,
            var(--primary-yellow-soft),
            #FFFFFF
        );

    border: 1px solid var(--primary-yellow-border);
    border-radius: var(--radius-lg);
}

.referral-member-detail-status > span,
.referral-member-detail-status > strong,
.referral-member-detail-status > small {
    display: block;
}

.referral-member-detail-status > span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 700;
}

.referral-member-detail-status > strong {
    width: max-content;
    min-height: 30px;

    display: inline-flex;
    align-items: center;

    margin-top: 7px;
    padding-inline: 11px;

    color: var(--secondary-text);
    background: var(--secondary-background);
    border-radius: var(--radius-pill);

    font-size: 10px;
    font-weight: 900;
}

.referral-member-detail-status > strong.is-active,
.referral-member-detail-status > strong.is-verified {
    color: var(--success-dark);
    background: var(--success-soft);
}

.referral-member-detail-status > strong.is-pending,
.referral-member-detail-status > strong.is-reviewing {
    color: var(--warning-dark);
    background: var(--warning-soft);
}

.referral-member-detail-status > strong.is-inactive,
.referral-member-detail-status > strong.is-blocked,
.referral-member-detail-status > strong.is-rejected {
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.referral-member-detail-status > small {
    margin-top: 7px;

    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.55;
}


/* =========================================================
   31. DETAIL GRID
   ========================================================= */

.referral-member-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin: 12px 0 0;
}

.referral-member-detail-grid > div {
    min-width: 0;

    padding: 11px;

    background: var(--secondary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-member-detail-grid dt {
    color: var(--secondary-text);

    font-size: 9px;
    font-weight: 700;
}

.referral-member-detail-grid dd {
    overflow: hidden;

    margin: 4px 0 0;

    color: var(--main-text);

    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   32. DETAIL DESCRIPTION
   ========================================================= */

.referral-member-detail-description {
    margin-top: 10px;
    padding: 12px;

    background: var(--tertiary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-member-detail-description > span {
    color: var(--secondary-text);

    font-size: 10px;
    font-weight: 800;
}

.referral-member-detail-description p {
    margin: 6px 0 0;

    color: var(--main-text);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.referral-member-detail-primary-button {
    width: 100%;
    min-height: 49px;

    margin-top: 14px;

    color: var(--main-text);
    background: var(--primary-yellow);
    border-radius: var(--radius-md);

    font-size: 12px;
    font-weight: 900;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.referral-member-detail-primary-button:hover {
    background: var(--primary-yellow-hover);
}

.referral-member-detail-primary-button:active {
    transform: scale(0.985);
}


/* =========================================================
   33. NOSCRIPT
   ========================================================= */

.noscript-notice {
    position: fixed;
    z-index: 9999;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    color: var(--main-text);
    background: #FFFFFF;

    font-size: 16px;
    font-weight: 800;
    text-align: center;
}


/* =========================================================
   34. SMALL MOBILE
   ========================================================= */

@media (max-width: 359px) {
    .referral-container {
        padding-inline: 10px;
    }

    .referral-hero,
    .referral-invite-section,
    .referral-summary,
    .referral-level-section,
    .referral-members-section,
    .referral-activity-section,
    .referral-rules-section {
        padding: 13px;
    }

    .referral-summary-grid {
        grid-template-columns: 1fr;
    }

    .referral-level-card dl {
        grid-template-columns: 1fr;
    }

    .referral-qr-container {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .referral-qr-code {
        margin-inline: auto;
    }

    .referral-member-row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(84px, auto)
            30px;

        padding-inline: 7px;
    }

    .referral-member-row__identity {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        gap: 7px;
    }

    .referral-member-row__avatar {
        width: 36px;
        height: 36px;
    }

    .referral-activity-row {
        grid-template-columns:
            37px
            minmax(0, 1fr)
            minmax(75px, auto);

        padding-inline: 7px;
    }

    .referral-activity-row__icon {
        width: 37px;
        height: 37px;
    }

    .referral-member-detail-grid {
        grid-template-columns: 1fr;
    }

    .bottom-navigation-item {
        font-size: 8px;
    }

    .bottom-navigation-item svg {
        width: 20px;
        height: 20px;
    }
}


/* =========================================================
   35. TABLET
   ========================================================= */

@media (min-width: 700px) {
    body {
        padding-bottom: 32px;
    }

    .referral-container {
        padding-inline: 20px;
    }

    .referral-main {
        padding-block: 20px 38px;
    }

    .referral-hero {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(300px, 0.7fr);

        align-items: center;

        padding: 24px;
    }

    .referral-hero__status {
        align-self: stretch;
    }

    .referral-invite-section,
    .referral-summary,
    .referral-level-section,
    .referral-members-section,
    .referral-activity-section,
    .referral-rules-section {
        padding: 21px;
    }

    .referral-share-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .referral-summary-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .referral-summary-card {
        min-height: 92px;
    }

    .referral-level-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .referral-member-tools {
        grid-template-columns:
            minmax(260px, 1fr)
            auto
            210px;

        align-items: center;
    }

    .referral-member-row {
        min-height: 82px;

        grid-template-columns:
            minmax(245px, 1.35fr)
            minmax(125px, 0.7fr)
            minmax(85px, 0.45fr)
            minmax(135px, 0.7fr)
            minmax(115px, 0.6fr)
            38px;

        grid-template-areas:
            "identity sponsor level deposit status open";

        gap: 12px;

        padding: 11px 15px;
    }

    .referral-member-row__sponsor,
    .referral-member-row__level,
    .referral-member-row__deposit,
    .referral-member-row__status-column {
        text-align: right;
    }

    .referral-activity-row {
        min-height: 78px;

        grid-template-columns:
            42px
            minmax(260px, 1fr)
            minmax(130px, 0.6fr)
            minmax(130px, 0.6fr);

        grid-template-areas:
            "icon content amount date";

        gap: 12px;

        padding: 11px 15px;
    }

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

    .referral-bottom-navigation {
        position: sticky;

        right: auto;
        bottom: 0;
        left: auto;

        width: min(100%, 680px);

        margin: 22px auto 0;

        border-radius: 22px;
    }

    .referral-member-detail-sheet {
        right: 50%;
        left: auto;

        width: min(
            calc(100% - 40px),
            620px
        );

        border-radius: 24px 24px 0 0;

        transform:
            translate(50%, 105%);
    }

    .referral-member-detail-sheet.is-open {
        transform:
            translate(50%, 0);
    }
}


/* =========================================================
   36. DESKTOP
   ========================================================= */

@media (min-width: 1050px) {
    :root {
        --header-height: 74px;
    }

    body {
        padding-bottom: 0;
    }

    .referral-container {
        padding-inline: 26px;
    }

    .referral-main {
        padding-top: 24px;
    }

    .referral-hero {
        padding: 28px 30px;
    }

    .referral-hero p {
        font-size: 14px;
    }

    .referral-invite-section,
    .referral-summary,
    .referral-level-section,
    .referral-members-section,
    .referral-activity-section,
    .referral-rules-section {
        padding: 22px;
    }

    .referral-invite-card {
        padding: 20px;
    }

    .referral-level-card {
        padding: 18px;
    }

    .referral-rules-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .referral-rules-list article {
        min-height: 135px;
    }

    .referral-bottom-navigation {
        display: none;
    }

    .referral-member-detail-sheet {
        top: 50%;
        right: 50%;
        bottom: auto;

        max-height:
            min(
                86vh,
                860px
            );

        border-radius: 24px;

        opacity: 0;

        transform:
            translate(
                50%,
                calc(-50% + 36px)
            )
            scale(0.965);

        transition:
            opacity var(--transition-normal),
            transform var(--transition-normal);
    }

    .referral-member-detail-sheet.is-open {
        opacity: 1;

        transform:
            translate(50%, -50%)
            scale(1);
    }
}


/* =========================================================
   37. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1320px) {
    .referral-hero {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(360px, 0.5fr);
    }

    .referral-summary-grid,
    .referral-level-grid {
        gap: 12px;
    }

    .referral-summary-card {
        padding: 15px;
    }

    .referral-invite-card {
        padding: 24px;
    }

    .referral-member-row,
    .referral-activity-row {
        min-height: 84px;
    }
}


/* =========================================================
   38. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   39. PRINT
   ========================================================= */

@media print {
    .referral-header,
    .referral-bottom-navigation,
    .referral-member-detail-backdrop,
    .referral-member-detail-sheet,
    .referral-alert,
    .referral-page-loading,
    .referral-share-actions,
    .referral-member-tools,
    .referral-activity-tabs,
    .referral-member-row__open {
        display: none !important;
    }

    body {
        padding: 0;

        background: #FFFFFF;
    }

    .referral-hero,
    .referral-invite-section,
    .referral-summary,
    .referral-level-section,
    .referral-members-section,
    .referral-activity-section,
    .referral-rules-section,
    .referral-security-notice {
        box-shadow: none;
        break-inside: avoid;
    }

    .referral-member-row {
        grid-template-columns:
            minmax(245px, 1.35fr)
            minmax(125px, 0.7fr)
            minmax(85px, 0.45fr)
            minmax(135px, 0.7fr)
            minmax(115px, 0.6fr);

        grid-template-areas:
            "identity sponsor level deposit status";
    }

    .referral-activity-row {
        grid-template-columns:
            42px
            minmax(260px, 1fr)
            minmax(130px, 0.6fr)
            minmax(130px, 0.6fr);

        grid-template-areas:
            "icon content amount date";
    }
}