/* An affiliate's portal (3 November 2026): layout.affiliate.master and
 * layout.affiliate.auth. The design system's tokens (tokens.css) and parts
 * (x-stats, x-day-chart, .xc-pay-state, .xc-primary); what is the portal's
 * own is here. Phones first: most affiliates open it on one. Logical
 * properties throughout, so Arabic reads right to left with nothing more. */

/* A page of its own, not the app's shell: the window scrolls to the end of
 * it (base.css holds html and body to the window's height for the shell).
 * The body stays unclipped, so the header sticks to the window. */
html:has(body.xc-pt) { block-size: auto; overflow-x: auto; overflow-y: auto; }
html:has(body.xc-pt) body { block-size: auto; overflow: visible; }

.xc-pt {
    margin: 0;
    min-block-size: 100vh;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
}

.xc-pt-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── the brand ─────────────────────────────────────────────────────────── */
.xc-pt-brand { display: inline-flex; align-items: center; gap: 9px; color: #1C1CD2; text-decoration: none; min-inline-size: 0; }
.xc-pt-brand__name { font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--text); }
.xc-pt-brand__chip {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #1C1CD2, #9A49D6);
    white-space: nowrap;
}

/* ── signed out: one card in the middle ────────────────────────────────── */
.xc-pt-out {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(91, 91, 240, .07), rgba(154, 73, 214, .05) 45%, var(--bg) 75%);
}

.xc-pt-out__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; }
.xc-pt-out__glow--a { inline-size: 340px; block-size: 340px; inset-block-start: -120px; inset-inline-start: -80px; background: rgba(91, 91, 240, .35); }
.xc-pt-out__glow--b { inline-size: 300px; block-size: 300px; inset-block-end: -120px; inset-inline-end: -60px; background: rgba(0, 168, 134, .25); }

.xc-pt-out__col { position: relative; inline-size: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.xc-pt-out__col > .xc-pt-brand { align-self: center; }

.xc-pt-out__card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 18px 50px -24px rgba(28, 28, 110, .35);
}

.xc-pt-langs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.xc-pt-langs a { font-size: 13px; color: rgba(var(--ink), .55); text-decoration: none; padding: 5px 11px; border-radius: 999px; }
.xc-pt-langs a:hover { color: var(--peri); }
.xc-pt-langs a[aria-current] { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ── forms ─────────────────────────────────────────────────────────────── */
.xc-pt-form { display: flex; flex-direction: column; gap: 15px; margin: 0; }
.xc-pt-form--tight { gap: 12px; }
.xc-pt-form__head { display: flex; flex-direction: column; gap: 5px; }
.xc-pt-form__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.01em; text-wrap: balance; }
.xc-pt-form__sub { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(var(--ink), .55); text-wrap: pretty; }

.xc-pt-form__icon {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 6px;
    color: #5B5BF0;
    background: rgba(91, 91, 240, .12);
}

.xc-pt-form__icon--hi { color: #fff; background: linear-gradient(135deg, #1C1CD2, #9A49D6); box-shadow: 0 10px 24px -10px rgba(91, 91, 240, .7); }
.xc-pt-form__icon--warn { color: #b06d00; background: rgba(232, 163, 61, .16); }

.xc-pt-form__go { justify-content: center; text-align: center; text-decoration: none; }
.xc-pt-form__aside { align-self: flex-end; margin-block-start: -6px; font-size: 13.5px; color: var(--peri); }
.xc-pt-form__back { align-self: center; font-size: 13.5px; color: rgba(var(--ink), .55); }
.xc-pt-form__foot { margin: 0; text-align: center; font-size: 13px; color: rgba(var(--ink), .45); }

.xc-pt-field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.xc-pt-field__label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.xc-pt-field__hint { font-size: 12.5px; color: rgba(var(--ink), .5); }
.xc-pt-field__err { font-size: 12.5px; color: #b83636; }

.xc-pt-in {
    appearance: none;
    inline-size: 100%;
    box-sizing: border-box;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--text);
}

.xc-pt-in:focus { outline: none; border-color: rgba(91, 91, 240, .55); box-shadow: 0 0 0 3px rgba(91, 91, 240, .15); }
select.xc-pt-in { padding-inline-end: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select.xc-pt-in { background-position: 13px 52%, 18px 52%; }
.xc-pt-in--code { font-family: 'JetBrains Mono', monospace; font-size: 18px; letter-spacing: .2em; text-align: center; }

.xc-pt-note {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #0a7a63;
    background: rgba(0, 168, 134, .1);
    border: 1px solid rgba(0, 168, 134, .3);
}

.xc-pt-note--warn { color: #8a5a00; background: rgba(232, 163, 61, .12); border-color: rgba(232, 163, 61, .35); }
.xc-pt-note--bad { color: #b83636; background: rgba(214, 69, 69, .08); border-color: rgba(214, 69, 69, .3); }

.xc-pt-who { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.xc-pt-who > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.xc-pt-who dt { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.xc-pt-who dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }

/* ── signed in: the header and its tabs ────────────────────────────────── */
.xc-pt-head { position: sticky; inset-block-start: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--line); }
.xc-pt-head__in { max-inline-size: 1120px; margin-inline: auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xc-pt-head__me { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.xc-pt-head__me form { margin: 0; }

.xc-pt-head__face {
    inline-size: 32px;
    block-size: 32px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, #5B5BF0, #00A886);
}

.xc-pt-head__name { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 22ch; }

.xc-pt-head__out {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: rgba(var(--ink), .7);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.xc-pt-head__out:hover { color: #b83636; border-color: rgba(214, 69, 69, .35); }
[dir="rtl"] .xc-pt-head__out svg { transform: scaleX(-1); }

.xc-pt-nav { border-block-start: 1px solid var(--line); }
.xc-pt-nav__in { max-inline-size: 1120px; margin-inline: auto; padding: 6px 12px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.xc-pt-nav__in::-webkit-scrollbar { display: none; }

.xc-pt-nav__tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 11px;
    font-size: 14px;
    color: rgba(var(--ink), .62);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.xc-pt-nav__tab:hover { color: var(--text); background: rgba(var(--ink), .05); }
.xc-pt-nav__tab[aria-current] { color: #fff; background: linear-gradient(135deg, #1C1CD2, #9A49D6); box-shadow: 0 8px 20px -10px rgba(91, 91, 240, .8); }

.xc-pt-main { flex: 1; inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding: 20px 16px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }

.xc-pt-foot { max-inline-size: 1120px; inline-size: 100%; margin-inline: auto; padding: 14px 16px 22px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 12.5px; color: rgba(var(--ink), .45); }

.xc-pt-flash { margin: 0; padding: 10px 13px; border-radius: 12px; font-size: 14.5px; color: #0a7a63; background: rgba(0, 168, 134, .1); }

/* ── pages ─────────────────────────────────────────────────────────────── */
.xc-pt-pagehead { display: flex; flex-direction: column; gap: 4px; }
.xc-pt-pagehead--row { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.xc-pt-pagehead__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -.015em; }
.xc-pt-pagehead__sub { margin: 0; font-size: 14.5px; color: rgba(var(--ink), .55); text-wrap: pretty; max-inline-size: 70ch; }

.xc-pt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.xc-pt-card--table { padding: 6px 0; }
.xc-pt-block { display: flex; flex-direction: column; gap: 12px; }
.xc-pt-block__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
.xc-pt-muted { font-size: 13px; color: rgba(var(--ink), .5); margin: 0; }
.xc-pt-empty { margin: 0; padding: 26px 16px; text-align: center; font-size: 14.5px; color: rgba(var(--ink), .55); }
.xc-pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }

.xc-pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.xc-pt-btn:hover { border-color: rgba(91, 91, 240, .45); color: #3d3dd8; }
.xc-pt-btn::-webkit-details-marker { display: none; }

/* The hello: their rate, and their link to copy. */
.xc-pt-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #1C1CD2 0%, #5B3FD8 55%, #9A49D6 100%);
    box-shadow: 0 22px 50px -28px rgba(28, 28, 210, .7);
}

.xc-pt-hero::after { content: ''; position: absolute; inline-size: 260px; block-size: 260px; inset-block-start: -120px; inset-inline-end: -80px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.xc-pt-hero__text { position: relative; display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.xc-pt-hero__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -.015em; }
.xc-pt-hero__sub { margin: 0; font-size: 14.5px; opacity: .88; }
.xc-pt-hero .xc-pt-copy { position: relative; flex: 1 1 320px; max-inline-size: 520px; }
.xc-pt-hero .xc-pt-copy__label { color: rgba(255, 255, 255, .75); }
.xc-pt-hero .xc-pt-copy__row { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.xc-pt-hero .xc-pt-copy__value { color: #fff; }
.xc-pt-hero .xc-pt-copy__btn { color: #1C1CD2; background: #fff; }

/* A link or a code, with Copy beside it. */
.xc-pt-copy { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.xc-pt-copy__label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.xc-pt-copy__row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-inline-size: 0; }
[dir="rtl"] .xc-pt-copy__row { padding: 6px 12px 6px 6px; }
.xc-pt-copy__value { flex: 1; min-inline-size: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

.xc-pt-copy__btn {
    flex: none;
    padding: 7px 12px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #1C1CD2, #5B5BF0);
}

/* This month, three months, all time; and a list's filter. */
.xc-pt-periods { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(var(--ink), .05); align-self: flex-start; max-inline-size: 100%; }
.xc-pt-periods a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; font-size: 13.5px; color: rgba(var(--ink), .62); text-decoration: none; }
.xc-pt-periods a[aria-current] { color: var(--text); background: var(--surface); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .25); }
.xc-pt-count { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--ink), .08); }

/* Total earned. */
.xc-pt-total {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 168, 134, .14), rgba(91, 91, 240, .1));
    border: 1px solid rgba(0, 168, 134, .28);
}

.xc-pt-total__label { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #0a7a63; }
.xc-pt-total__value { font-family: Poppins, sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.xc-pt-total__sub { font-size: 13px; color: rgba(var(--ink), .55); }

/* My links & coupons. */
.xc-pt-reflink { flex-direction: row; align-items: flex-start; gap: 14px; }
.xc-pt-reflink__icon { flex: none; inline-size: 42px; block-size: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #5B5BF0, #00A886); }
.xc-pt-reflink__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; }

.xc-pt-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.xc-pt-ticket { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 36px -26px rgba(214, 69, 122, .55); }
.xc-pt-ticket__top { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, #E8A33D, #D6457A 60%, #9A49D6); }
.xc-pt-ticket__label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.xc-pt-ticket__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xc-pt-ticket__code { font-family: 'JetBrains Mono', monospace; font-size: 22px; letter-spacing: .08em; overflow-wrap: anywhere; }
.xc-pt-ticket__copy { flex: none; padding: 6px 11px; border: 0; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #b8355f; background: #fff; }
.xc-pt-ticket__offer { font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.xc-pt-ticket__tear { block-size: 0; border-block-start: 2px dashed rgba(var(--ink), .15); margin-inline: 14px; }
.xc-pt-ticket__facts { margin: 0; padding: 14px 18px 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.xc-pt-ticket__facts dt { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.xc-pt-ticket__facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; }
.xc-pt-ticket__wide { grid-column: 1 / -1; }
.xc-pt-ticket__share { padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 6px; }

/* Tables: rows on a laptop, cards on a phone. */
.xc-pt-table { inline-size: 100%; border-collapse: collapse; font-size: 14.5px; }
.xc-pt-table th { padding: 10px 16px; text-align: start; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(var(--ink), .5); border-block-end: 1px solid var(--line); }
.xc-pt-table td { padding: 12px 16px; border-block-end: 1px solid var(--line); vertical-align: top; }
.xc-pt-table tr:last-child td { border-block-end: 0; }
.xc-pt-cell { display: inline-flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.xc-pt-cell--end { align-items: flex-end; }
.xc-pt-table tr[aria-current] td { background: rgba(91, 91, 240, .06); }
.xc-pt-table a { color: var(--peri); }
.xc-pt-num { text-align: end; }
.xc-pt-table th.xc-pt-num { text-align: end; }
.xc-pt-masked { font-weight: 600; letter-spacing: .02em; }
.xc-pt-adjust { font-size: 12.5px; color: #8a5a00; }
.xc-pt-adjust--owe { color: #b83636; }

.xc-pt-pager { padding: 10px 16px 6px; }
.xc-pt-pages { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; }
.xc-pt-pages a { color: var(--peri); }
.xc-pt-pages [aria-disabled] { color: rgba(var(--ink), .35); }
.xc-pt-pages__at { color: rgba(var(--ink), .55); }

.xc-pt-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.xc-pt-filters .xc-pt-field { flex: 1 1 170px; }

.xc-pt-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.xc-pt-lines li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--line); }
.xc-pt-lines li:last-child { border-block-end: 0; }
.xc-pt-lines li > span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.xc-pt-lines__amount { font-weight: 600; }

/* Profile. */
.xc-pt-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; }
.xc-pt-inline .xc-pt-field { flex: 1 1 180px; }
.xc-pt-ask { display: flex; flex-direction: column; gap: 12px; }
.xc-pt-ask > summary { align-self: flex-start; }
.xc-pt-ask[open] > summary { margin-block-end: 4px; }
.xc-pt-qr { align-self: center; padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.xc-pt-qr svg { display: block; inline-size: 190px; block-size: 190px; }
.xc-pt-secret { margin: 0; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: .08em; color: rgba(var(--ink), .7); overflow-wrap: anywhere; }
.xc-pt-codes { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text); }
.xc-pt-on { margin: 0; }

/* ── a phone ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .xc-pt-head__name { display: none; }
    .xc-pt-head__out span { display: none; }
    .xc-pt-head__out { padding: 8px; }
    .xc-pt-hero { padding: 18px; }
    .xc-pt-hero__title { font-size: 21px; }
    .xc-pt-pagehead__title { font-size: 21px; }
    .xc-pt-out__card { padding: 20px; border-radius: 18px; }

    .xc-pt-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .xc-pt-table, .xc-pt-table tbody, .xc-pt-table tr, .xc-pt-table td { display: block; inline-size: 100%; box-sizing: border-box; }
    .xc-pt-table tr { padding: 12px 16px; border-block-end: 1px solid var(--line); }
    .xc-pt-table tr:last-child { border-block-end: 0; }
    .xc-pt-table td { padding: 4px 0; border: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: end; }
    .xc-pt-table td::before { content: attr(data-label); flex: none; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: rgba(var(--ink), .5); text-align: start; }
    .xc-pt-table td > * { margin-inline-start: auto; }
    .xc-pt-cell { align-items: flex-end; text-align: end; }
    .xc-pt-num { text-align: end; }
}