/* ============================================================
    AFF- PREFIXED CUSTOM STYLES — no overlap with Bootstrap
============================================================ */

/* 1 */

:root {
    --aff-navy:    #234BBF;
    --aff-blue:    #1a56db;
    --aff-blue-lt: #3b82f6;
    --aff-gold:    #ffc107;
    --aff-gold-lt: #fcd34d;
    --aff-off:     #f4f6fb;
    --aff-muted:   #64748b;
    --aff-border:  #e2e8f0;
    --aff-white:   #ffffff;
    --aff-radius:  14px;
}

.aff-body {
    background: var(--aff-white);
}

/* ── HERO ─────────────────────────────────────────────── */
.aff-hero {
    background: linear-gradient(280deg,#4e73df,#224abe);
    position: relative;
    overflow: hidden;
    padding: 72px 0 60px;
}

.aff-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 80% 50%, rgba(26,86,219,.35) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 10% 80%, rgba(245,166,35,.12) 0%, transparent 60%);
    pointer-events: none;
}

.aff-hero__grid {
    position: absolute;
    inset: 0;
    background-size: 48px 48px;
    pointer-events: none;
}

.aff-hero__inner {
    position: relative;
    z-index: 1;
}

.aff-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--aff-font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aff-gold);
    background: rgba(245,166,35,.12);
    border: 1px solid rgba(245,166,35,.3);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 28px;
    cursor: pointer;
}

.aff-hero__eyebrow span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--aff-gold);
    animation: aff-pulse 2s ease-in-out infinite;
}

@keyframes aff-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.4); }
}

.aff-hero__h1 {
    font-family: var(--aff-font-display);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--aff-white);
    margin: 0 0 20px;
    letter-spacing: -.02em;
}

.aff-hero__h1 em {
    font-style: normal;
    color: var(--aff-gold);
    position: relative;
}

.aff-hero__h1 em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 3px;
    background: var(--aff-gold);
    border-radius: 2px;
    opacity: .5;
}

.aff-hero__sub {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
    margin: 0 0 40px;
}

.aff-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--aff-gold);
    color: black !important;
    font-family: var(--aff-font-display);
    font-size: 1rem;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: 100px;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, background .2s;
    box-shadow: 0 8px 32px rgba(245,166,35,.35);
}

.aff-hero__cta:hover {
    background: var(--aff-gold-lt);
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(245,166,35,.45);
}

.aff-hero__cta svg { flex-shrink: 0; }

.aff-hero__stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    flex-wrap: wrap;
}

.aff-hero__stat-val {
    font-family: var(--aff-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--aff-white);
}

.aff-hero__stat-lbl {
    font-size: .8rem;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
    letter-spacing: .04em;
}

/* ── SECTION SHELL ────────────────────────────────────── */
.aff-section {
    padding: 52px 0;
}

.aff-section--alt {
    background: var(--aff-off);
}

.aff-section-label {
    font-family: var(--aff-font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 10px;
}

.aff-section-h2 {
    font-family: var(--aff-font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 28px;
    line-height: 1.2;
}

.aff-section-h2 span {
    color: var(--aff-blue);
}

/* ── BENEFITS GRID ────────────────────────────────────── */
.aff-benefits-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media (max-width: 1100px) {
    .aff-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .aff-benefits-grid {
        grid-template-columns: 1fr;
    }
}

.aff-card {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 32px 28px;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.aff-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aff-blue), var(--aff-blue-lt));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}

.aff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(11,31,58,.1);
    border-color: transparent;
}

.aff-card:hover::before { transform: scaleX(1); }

.aff-card__icon {
    font-size: 2rem;
    margin-bottom: 16px;
    display: block;
}

.aff-card__h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--aff-navy);
    margin: 0 0 10px;
}

.aff-card__p {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--aff-muted);
    margin: 0;
}

/* ── VALUE GRID ───────────────────────────────────────── */
.aff-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.aff-value-item {
    background: var(--aff-white);
    border-radius: var(--aff-radius);
    padding: 28px 24px;
    border: 1px solid var(--aff-border);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.aff-value-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11,31,58,.08);
}

.aff-value-item h3 {
    font-family: var(--aff-font-display);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--aff-navy);
}

.aff-value-item p {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--aff-muted);
    margin: 0;
}

/* ── AUDIENCE ─────────────────────────────────────────── */
.aff-audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.aff-audience-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--aff-navy);
    cursor: pointer;
    transition: background .18s, border-color .18s;
}

.aff-audience-item:hover {
    background: rgba(26,86,219,.05);
    border-color: var(--aff-blue-lt);
}

.aff-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aff-blue), var(--aff-blue-lt));
    color: #fff;
    font-size: .7rem;
    flex-shrink: 0;
}

/* ── STEPS ────────────────────────────────────────────── */
.aff-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    position: relative;
}

.aff-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(12.5% + 28px);
    right: calc(12.5% + 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--aff-blue), var(--aff-blue-lt));
    opacity: .25;
}

.aff-step {
    text-align: center;
    padding: 0 20px 0;
    cursor: pointer;
}

.aff-step__num {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aff-blue), var(--aff-blue-lt));
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(26,86,219,.3);
    transition: transform .2s;
}

.aff-step:hover .aff-step__num {
    transform: scale(1.1);
}

.aff-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--aff-navy);
}

.aff-step p {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--aff-muted);
    margin: 0;
}

/* ── COMMISSION ───────────────────────────────────────── */
.aff-commission {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    border-radius: var(--aff-radius);
    overflow: hidden;
    border: 1px solid var(--aff-border);
    box-shadow: 0 20px 60px rgba(11,31,58,.08);
}

.aff-commission__left {
    background: linear-gradient(160deg, var(--aff-navy) 0%, #234BBF 100%);
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.aff-commission__amt {
    font-size: 4rem;
    font-weight: 800;
    color: var(--aff-gold);
    line-height: 1;
    margin-bottom: 8px;
}

.aff-commission__sub {
    font-size: .875rem;
    color: rgba(255,255,255,.6);
    letter-spacing: .04em;
}

.aff-commission__right {
    background: var(--aff-white);
    padding: 48px 44px;
}

.aff-commission__right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aff-commission__right li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--aff-muted);
}

.aff-commission__right li::before {
    content: '→';
    color: var(--aff-blue);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.aff-commission__right li strong {
    color: var(--aff-navy);
}

/* ── FINAL CTA ────────────────────────────────────────── */
.aff-cta-band {
    background: linear-gradient(135deg, var(--aff-blue) 0%, var(--aff-navy) 100%);
    padding: 56px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.aff-cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(245,166,35,.1) 0%, transparent 70%);
    pointer-events: none;
}

.aff-cta-band h2 {
    font-family: var(--aff-font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--aff-white);
    letter-spacing: -.02em;
    margin: 0 0 14px;
}

.aff-cta-band p {
    font-size: 1.05rem;
    color: rgba(255,255,255,.7);
    margin: 0 0 36px;
}

.aff-cta-band a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--aff-gold);
    color: black !important;
    font-family: var(--aff-font-display);
    font-size: 1rem;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 100px;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    position: relative;
    z-index: 1;
}

.aff-cta-band a:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,.3);
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 768px) {
    .aff-hero { padding: 72px 0 60px; }
    .aff-hero__stats { gap: 24px; }
    .aff-steps::before { display: none; }
    .aff-steps { gap: 32px; }
    .aff-commission {
        grid-template-columns: 1fr;
    }
}

/* 2 */

.aff-detail {
    padding: 40px 0 64px;
}

/* ── BACK LINK ────────────────────────────────────── */
.aff-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .825rem;
    font-weight: 600;
    color: var(--aff-muted);
    text-decoration: none;
    margin-bottom: 24px;
    transition: color .15s;
}

.aff-back:hover { color: var(--aff-navy); }

/* ── HEADER ───────────────────────────────────────── */
.aff-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.aff-detail__code {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 4px;
}

.aff-detail__email {
    font-size: .9rem;
    color: var(--aff-muted);
    margin: 0;
}

/* ── STAT CARDS ───────────────────────────────────── */
.aff-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 900px) { .aff-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .aff-stats { grid-template-columns: repeat(2, 1fr); } }

.aff-stat {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 16px 18px;
}

.aff-stat--gold {
    background: linear-gradient(135deg, var(--aff-navy), #1a3560);
    border-color: transparent;
}

.aff-stat__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aff-muted);
    margin-bottom: 6px;
}

.aff-stat--gold .aff-stat__label { color: rgba(255,255,255,.5); }

.aff-stat__val {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    line-height: 1;
}

.aff-stat--gold .aff-stat__val { color: var(--aff-gold); }

/* ── CARD (extended from §1) ──────────────────────── */
.aff-card__head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--aff-border);
    background: var(--aff-off);
}

.aff-card__title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--aff-navy);
    margin: 0;
}

/* ── INFO GRID ────────────────────────────────────── */
.aff-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px 28px;
    padding: 22px;
}

.aff-info__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aff-muted);
    margin-bottom: 4px;
}

.aff-info__val {
    font-size: .9rem;
    color: var(--aff-navy);
    font-weight: 500;
    word-break: break-word;
}

/* ── BADGE ────────────────────────────────────────── */
.aff-badge {
    display: inline-block;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
}

.aff-badge--active     { background: rgba(25,135,84,.12); color: var(--aff-green); }
.aff-badge--click      { background: rgba(26,86,219,.1);  color: var(--aff-blue); }
.aff-badge--signup     { background: rgba(32,201,151,.1); color: #0f766e; }
.aff-badge--conversion { background: rgba(25,135,84,.12); color: var(--aff-green); }
.aff-badge--secondary  { background: var(--aff-off); color: var(--aff-muted); border: 1px solid var(--aff-border); }
.aff-badge--success    { background: rgba(25,135,84,.12); color: var(--aff-green); }
.aff-badge--pending    { background: #fef3c7; color: #92400e; }
.aff-badge--paid       { background: rgba(25,135,84,.12); color: var(--aff-green); }
.aff-badge--danger     { background: rgba(220,53,69,.1);  color: var(--aff-red); }
/* §8 variant — slightly different padding/font-size */
/* kept as-is since font-size .7rem vs .67rem and padding 3px 9px differ */
/* If you want a single canonical badge, standardize here. Currently unified above. */

/* ── TABLE ────────────────────────────────────────── */
.aff-table-wrap { overflow-x: auto; }

.aff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .845rem;
}

.aff-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--aff-muted);
    border-bottom: 1px solid var(--aff-border);
    white-space: nowrap;
}

.aff-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--aff-border);
    color: var(--aff-navy);
    vertical-align: middle;
}

.aff-table tbody tr:last-child td { border-bottom: none; }
.aff-table tbody tr:hover td { background: var(--aff-off); }

.aff-table td small {
    display: block;
    font-size: .775rem;
    color: var(--aff-muted);
    margin-top: 2px;
}

.aff-table__empty {
    text-align: center;
    color: var(--aff-muted);
    padding: 36px 16px !important;
    font-size: .875rem;
}

.aff-table td a {
    color: var(--aff-blue);
    text-decoration: none;
    font-weight: 600;
}

.aff-table td a:hover { text-decoration: underline; }

.aff-amount {
    font-weight: 700;
    color: var(--aff-green);
}

.aff-muted-val { color: var(--aff-muted); }

/* ── PAGINATION ───────────────────────────────────── */
.aff-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 20px;
    border-top: 1px solid var(--aff-border);
    flex-wrap: wrap;
}

.aff-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: .825rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--aff-border);
    background: var(--aff-white);
    color: var(--aff-navy);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.aff-page-btn:hover {
    background: var(--aff-off);
    border-color: var(--aff-blue-lt);
}

.aff-page-btn--active {
    background: var(--aff-blue);
    border-color: var(--aff-blue);
    color: #fff;
}

.aff-page-btn--disabled {
    color: var(--aff-muted);
    pointer-events: none;
}

.aff-page-dots {
    font-size: .825rem;
    color: var(--aff-muted);
    padding: 0 4px;
}

/* 3 */

/* ── PAGE ─────────────────────────────────────────── */
.aff-analytics {
    padding: 40px 0 64px;
}

.aff-analytics__header {
    margin-bottom: 28px;
}

.aff-analytics__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 6px;
}

.aff-analytics__h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 4px;
}

.aff-analytics__sub {
    font-size: .9rem;
    color: var(--aff-muted);
    margin: 0;
}

/* aff-stats / aff-stat — §2 definition kept above; §3 adds new breakpoints & states */
@media (max-width: 1100px) { .aff-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .aff-stats { grid-template-columns: repeat(2, 1fr); } }

a.aff-stat {
    text-decoration: none;
    display: block;
    transition: border-color .15s, box-shadow .15s;
}

a.aff-stat:hover {
    border-color: var(--aff-blue-lt);
    box-shadow: 0 4px 16px rgba(26,86,219,.08);
}

.aff-stat--active {
    border-color: var(--aff-blue);
    background: rgba(26,86,219,.04);
}

.aff-stat--active .aff-stat__label { color: var(--aff-blue); }
.aff-stat--gold .aff-stat__val { color: var(--aff-gold); }

/* ── TABS ─────────────────────────────────────────── */
.aff-tabs {
    display: flex;
    border-bottom: 1px solid var(--aff-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.aff-tabs::-webkit-scrollbar { display: none; }

.aff-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 18px;
    font-size: .825rem;
    font-weight: 600;
    color: var(--aff-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}

.aff-tab:hover { color: var(--aff-navy); }

.aff-tab--active {
    color: var(--aff-blue);
    border-bottom-color: var(--aff-blue);
}

.aff-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background: rgba(26,86,219,.1);
    color: var(--aff-blue);
    font-size: .65rem;
    font-weight: 700;
    padding: 0 4px;
}

/* ── TAB PANES ────────────────────────────────────── */
.aff-pane { display: none; }
.aff-pane--active { display: block; }

/* ── VIEW ALL FOOTER ──────────────────────────────── */
.aff-view-all {
    padding: 14px 20px;
    border-top: 1px solid var(--aff-border);
    background: var(--aff-off);
}

.aff-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .825rem;
    font-weight: 600;
    color: var(--aff-blue);
    text-decoration: none;
    transition: gap .15s;
}

.aff-view-all-btn:hover { gap: 10px; }

/* ── AFFILIATE ROW clickable ──────────────────────── */
.aff-table tbody tr.aff-row-link { cursor: pointer; }

/* 4 */

.aff-links {
    padding: 44px 0 64px;
}

.aff-links__header {
    margin-bottom: 28px;
}

.aff-links__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 6px;
}

.aff-links__h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 4px;
}

.aff-links__sub {
    font-size: .9rem;
    color: var(--aff-muted);
    margin: 0;
}

/* aff-card — §1 base kept; §4 adds .aff-card__sub */
.aff-card__sub {
    font-size: .8rem;
    color: var(--aff-muted);
    margin: 0 0 16px;
}

/* ── LINK BOX ─────────────────────────────────────── */
.aff-link-box {
    display: flex;
    gap: 8px;
}

.aff-link-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font-size: .85rem;
    color: var(--aff-navy);
    background: var(--aff-off);
    border: 1px solid var(--aff-border);
    border-radius: 8px;
    outline: none;
}

.aff-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--aff-blue);
    color: #fff;
    font-size: .825rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.aff-copy-btn:hover   { background: #1446c0; }
.aff-copy-btn.copied  { background: var(--aff-green); }

/* ── CUSTOM LINK FORM ─────────────────────────────── */
.aff-gen-row {
    display: flex;
    gap: 8px;
}

.aff-gen-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font-size: .875rem;
    color: var(--aff-navy);
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.aff-gen-input:focus {
    border-color: var(--aff-blue);
    box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}

.aff-gen-input::placeholder { color: #b0bac7; }

.aff-gen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--aff-navy);
    color: #fff;
    font-size: .825rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.aff-gen-btn:hover { background: var(--aff-blue); }

/* ── RESULT ───────────────────────────────────────── */
.aff-result {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--aff-border);
    display: none;
}

.aff-result__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 8px;
}

/* ── TIPS ─────────────────────────────────────────── */
.aff-tips-card {
    background: linear-gradient(135deg, var(--aff-navy), #1a3560);
    border-radius: var(--aff-radius);
    padding: 24px 28px;
}

.aff-tips-card__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 14px;
}

.aff-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aff-tips-list li {
    font-size: .85rem;
    color: rgba(255,255,255,.7);
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}

.aff-tips-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--aff-gold);
    font-weight: 700;
    font-size: .75rem;
}

@media (max-width: 560px) {
    .aff-gen-row { flex-direction: column; }
    .aff-link-box { flex-direction: column; }
    .aff-card { padding: 20px 18px; }
}

/* 5 */

/* ── PAGE ─────────────────────────────────────────── */
.aff-apply {
    padding: 44px 0 64px;
}

.aff-apply__header {
    margin-bottom: 32px;
}

.aff-apply__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 6px;
}

.aff-apply__h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 6px;
}

.aff-apply__sub {
    font-size: .95rem;
    color: var(--aff-muted);
    margin: 0;
}

/* ── ALERTS ───────────────────────────────────────── */
.aff-alert {
    border-radius: var(--aff-radius);
    padding: 14px 18px;
    font-size: .9rem;
    margin-bottom: 24px;
    border: 1px solid;
}

.aff-alert--success {
    background: rgba(25,135,84,.07);
    border-color: rgba(25,135,84,.25);
    color: var(--aff-green);
}

.aff-alert--error {
    background: rgba(220,53,69,.07);
    border-color: rgba(220,53,69,.25);
    color: var(--aff-red);
}

.aff-alert--info {
    background: rgba(26,86,219,.06);
    border-color: rgba(26,86,219,.2);
    color: var(--aff-blue);
}

.aff-alert--danger {
    background: rgba(220,53,69,.07);
    border-color: rgba(220,53,69,.25);
    color: var(--aff-red);
}

/* §10 alert extension — close button & flex layout */
.aff-alert--flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aff-alert__close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.aff-alert__close:hover { opacity: 1; }

/* ── LAYOUT ───────────────────────────────────────── */
.aff-apply__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 860px) {
    .aff-apply__layout {
        grid-template-columns: 1fr;
    }
}

/* ── SIDEBAR ──────────────────────────────────────── */
.aff-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.aff-sidebar-card {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 22px 20px;
}

.aff-sidebar-card__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin: 0 0 14px;
}

.aff-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aff-benefit-list li {
    font-size: .875rem;
    font-weight: 500;
    color: var(--aff-navy);
    display: flex;
    align-items: center;
    gap: 8px;
}

.aff-benefit-list li span.aff-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.aff-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aff-rules-list li {
    font-size: .825rem;
    color: var(--aff-muted);
    padding-left: 12px;
    position: relative;
    line-height: 1.4;
}

.aff-rules-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--aff-blue);
    font-weight: 700;
}

.aff-terms-note {
    font-size: .775rem;
    color: var(--aff-muted);
    margin: 0;
}

.aff-terms-note a {
    color: var(--aff-blue);
    text-decoration: none;
    font-weight: 500;
}

/* ── FORM CARD ────────────────────────────────────── */
.aff-form-card {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 32px 36px;
}

@media (max-width: 560px) {
    .aff-form-card { padding: 22px 18px; }
}

.aff-form-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--aff-border);
}

.aff-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.aff-form-section__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin: 0 0 18px;
}

/* ── FORM FIELDS ──────────────────────────────────── */
.aff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .aff-row { grid-template-columns: 1fr; }
}

.aff-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.aff-field:last-child { margin-bottom: 0; }

.aff-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--aff-navy);
}

.aff-label span {
    color: var(--aff-blue);
}

.aff-input,
.aff-textarea,
.aff-select {
    width: 100%;
    padding: 9px 12px;
    font-size: .9rem;
    color: var(--aff-navy);
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.aff-input:focus,
.aff-textarea:focus,
.aff-select:focus {
    border-color: var(--aff-blue);
    box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}

.aff-input::placeholder,
.aff-textarea::placeholder {
    color: #b0bac7;
}

.aff-textarea {
    resize: vertical;
    min-height: 96px;
}

.aff-input-note {
    font-size: .75rem;
    color: var(--aff-muted);
}

/* ── SOCIAL MEDIA FIELDS ──────────────────────────── */
.aff-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .aff-social-grid { grid-template-columns: 1fr; }
}

.aff-social-field {
    display: flex;
    align-items: center;
    border: 1px solid var(--aff-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.aff-social-field:focus-within {
    border-color: var(--aff-blue);
    box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}

.aff-social-prefix {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px 9px 12px;
    background: var(--aff-off);
    border-right: 1px solid var(--aff-border);
    font-size: .8rem;
    font-weight: 600;
    color: var(--aff-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.aff-social-prefix svg {
    flex-shrink: 0;
}

.aff-social-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 9px 12px;
    font-size: .875rem;
    color: var(--aff-navy);
    background: var(--aff-white);
    min-width: 0;
}

.aff-social-input::placeholder { color: #b0bac7; }

/* ── CHECKBOXES ───────────────────────────────────── */
.aff-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aff-checkbox-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--aff-border);
    border-radius: 100px;
    font-size: .825rem;
    font-weight: 500;
    color: var(--aff-navy);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    user-select: none;
}

.aff-checkbox-pill input[type="checkbox"] {
    display: none;
}

.aff-checkbox-pill:has(input:checked) {
    background: rgba(26,86,219,.08);
    border-color: var(--aff-blue);
    color: var(--aff-blue);
}

/* ── TERMS CHECKBOX ───────────────────────────────── */
.aff-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem;
    color: var(--aff-muted);
    cursor: pointer;
}

.aff-agree-label input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--aff-blue);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.aff-agree-label a {
    color: var(--aff-blue);
    font-weight: 500;
    text-decoration: none;
}

/* ── SUBMIT ───────────────────────────────────────── */
.aff-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 36px;
    background: var(--aff-blue);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 20px rgba(26,86,219,.3);
}

.aff-submit-btn:hover {
    background: #1446c0;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(26,86,219,.35);
}

/* ── STATUS CARD ──────────────────────────────────── */
.aff-status-card {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 36px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 680px;
}

.aff-status-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aff-status-icon-wrap--pending  { background: rgba(255,193,7,.12);  color: #b45309; }
.aff-status-icon-wrap--approved { background: rgba(25,135,84,.12);  color: var(--aff-green); }
.aff-status-icon-wrap--rejected { background: rgba(220,53,69,.12);  color: var(--aff-red); }

.aff-status-icon-wrap svg { width: 26px; height: 26px; }

.aff-status-body h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--aff-navy);
}

.aff-status-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.aff-status-badge--pending  { background: rgba(255,193,7,.15);  color: #92400e; }
.aff-status-badge--approved { background: rgba(25,135,84,.12);  color: var(--aff-green); }
.aff-status-badge--rejected { background: rgba(220,53,69,.1);   color: var(--aff-red); }

.aff-status-msg {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--aff-muted);
    margin: 0 0 20px;
}

.aff-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    border-top: 1px solid var(--aff-border);
    padding-top: 18px;
}

.aff-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aff-detail-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aff-muted);
}

.aff-detail-value {
    font-size: .875rem;
    font-weight: 500;
    color: var(--aff-navy);
}

.aff-rejection-reason {
    background: rgba(220,53,69,.06);
    border: 1px solid rgba(220,53,69,.2);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .875rem;
    color: var(--aff-red);
    margin-bottom: 16px;
}

.aff-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--aff-blue);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border-radius: 100px;
    text-decoration: none;
    transition: background .2s;
}

.aff-dashboard-btn:hover { background: #1446c0; color: #fff; }

/* 6 */

.aff-success {
    padding: 56px 0 72px;
}

.aff-success__box {
    max-width: 600px;
    margin: 0 auto;
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 44px 48px;
    text-align: center;
}

@media (max-width: 560px) {
    .aff-success__box { padding: 32px 22px; }
}

/* ── CHECK ICON ───────────────────────────────────── */
.aff-success__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(25,135,84,.1);
    color: var(--aff-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.aff-success__icon svg { width: 32px; height: 32px; }

.aff-success__h1 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 8px;
}

.aff-success__sub {
    font-size: .95rem;
    color: var(--aff-muted);
    margin: 0 0 36px;
}

/* ── STEPS ────────────────────────────────────────── */
.aff-success__steps {
    text-align: left;
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    overflow: hidden;
    margin-bottom: 28px;
}

.aff-success__step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aff-border);
}

.aff-success__step:last-child { border-bottom: none; }

.aff-success__step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aff-blue), var(--aff-blue-lt));
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.aff-success__step h3 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--aff-navy);
    margin: 0 0 3px;
}

.aff-success__step p {
    font-size: .825rem;
    color: var(--aff-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── FOOTER ROW ───────────────────────────────────── */
.aff-success__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.aff-success__contact {
    font-size: .825rem;
    color: var(--aff-muted);
    margin: 0;
}

.aff-success__contact a {
    color: var(--aff-blue);
    font-weight: 500;
    text-decoration: none;
}

.aff-success__contact a:hover { text-decoration: underline; }

.aff-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--aff-navy);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border-radius: 100px;
    text-decoration: none;
    transition: background .2s;
}

.aff-home-btn:hover { background: var(--aff-blue); color: #fff; }

/* 7 */

/* ── PAGE ─────────────────────────────────────────── */
.aff-dash {
    padding: 36px 0 64px;
}

/* ── HEADER ───────────────────────────────────────── */
.aff-dash__header {
    margin-bottom: 28px;
}

.aff-dash__greeting {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 4px;
}

.aff-dash__sub {
    font-size: .9rem;
    color: var(--aff-muted);
    margin: 0;
}

/* aff-stats — §7 adds repeat(4,1fr) grid and extra breakpoints */
@media (max-width: 900px) {
    .aff-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .aff-stats { grid-template-columns: 1fr 1fr; }
}

.aff-stat__sub {
    font-size: .75rem;
    color: var(--aff-muted);
    margin-top: 4px;
}

.aff-stat--gold .aff-stat__sub { color: rgba(255,255,255,.45); }

/* ── LAYOUT ───────────────────────────────────────── */
.aff-dash__layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .aff-dash__layout { grid-template-columns: 1fr; }
}

/* aff-card — §7 uses padding: 22px 24px; already handled by base §1 */
/* aff-link-box / aff-link-input / aff-copy-btn — kept from §4 */

.aff-link-meta {
    font-size: .75rem;
    color: var(--aff-muted);
    margin: 8px 0 0;
}

/* ── ACTIVITY ─────────────────────────────────────── */
.aff-activity-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.aff-activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--aff-border);
    font-size: .85rem;
}

.aff-activity-row:last-child { border-bottom: none; }

.aff-activity-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aff-activity-dot--click       { background: var(--aff-blue-lt); }
.aff-activity-dot--conversion  { background: var(--aff-green); }

.aff-activity-type {
    font-weight: 600;
    color: var(--aff-navy);
    width: 90px;
    flex-shrink: 0;
}

.aff-activity-time {
    color: var(--aff-muted);
    margin-left: auto;
    white-space: nowrap;
    font-size: .775rem;
}

.aff-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--aff-muted);
    font-size: .875rem;
}

.aff-empty svg {
    display: block;
    margin: 0 auto 12px;
    opacity: .3;
}

/* ── CHART ────────────────────────────────────────── */
.aff-chart-wrap {
    position: relative;
    height: 220px;
}

/* ── PROGRESS ─────────────────────────────────────── */
.aff-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--aff-muted);
    margin-bottom: 8px;
}

.aff-progress-row strong { color: var(--aff-navy); }

.aff-progress-track {
    height: 8px;
    background: var(--aff-off);
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid var(--aff-border);
}

.aff-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--aff-blue), var(--aff-blue-lt));
    border-radius: 100px;
    transition: width .4s ease;
}

.aff-progress-meta {
    font-size: .75rem;
    color: var(--aff-muted);
    margin-top: 6px;
}

/* ── QUICK ACTIONS ────────────────────────────────── */
.aff-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aff-action-btn {
    display: block;
    padding: 9px 14px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--aff-navy);
    background: var(--aff-off);
    border: 1px solid var(--aff-border);
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.aff-action-btn:hover {
    background: rgba(26,86,219,.06);
    border-color: var(--aff-blue-lt);
    color: var(--aff-blue);
}

/* ── TIPS ─────────────────────────────────────────── */
.aff-tips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aff-tips li {
    font-size: .825rem;
    color: var(--aff-muted);
    padding-left: 12px;
    position: relative;
    line-height: 1.45;
}

.aff-tips li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--aff-blue);
    font-weight: 700;
    font-size: .75rem;
}

/* 8 */

.aff-payouts {
    padding: 44px 0 64px;
}

/* ── HEADER ───────────────────────────────────────── */
.aff-payouts__header {
    margin-bottom: 28px;
}

.aff-payouts__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 6px;
}

.aff-payouts__h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 4px;
}

.aff-payouts__sub {
    font-size: .9rem;
    color: var(--aff-muted);
    margin: 0;
}

/* ── BALANCE CARDS ────────────────────────────────── */
.aff-balances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 560px) {
    .aff-balances { grid-template-columns: 1fr; }
}

.aff-balance {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 22px 24px;
}

.aff-balance--available {
    background: linear-gradient(135deg, var(--aff-navy), #1a3560);
    border-color: transparent;
}

.aff-balance__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aff-muted);
    margin-bottom: 8px;
}

.aff-balance--available .aff-balance__label {
    color: rgba(255,255,255,.5);
}

.aff-balance__amt {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    line-height: 1;
    margin-bottom: 4px;
}

.aff-balance--available .aff-balance__amt {
    color: var(--aff-gold);
}

.aff-balance__note {
    font-size: .775rem;
    color: var(--aff-muted);
}

.aff-balance--available .aff-balance__note {
    color: rgba(255,255,255,.45);
}

/* aff-card, aff-field, aff-label, aff-input, aff-submit-btn — kept from §5 */

.aff-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 560px) {
    .aff-form-row { grid-template-columns: 1fr; }
}

/* ── INFO BOX ─────────────────────────────────────── */
.aff-info-box {
    background: linear-gradient(135deg, var(--aff-navy), #1a3560);
    border-radius: var(--aff-radius);
    padding: 24px 28px;
}

.aff-info-box__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 14px;
}

.aff-info-item {
    font-size: .85rem;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
}

.aff-info-item strong {
    color: rgba(255,255,255,.9);
    display: block;
    font-size: .775rem;
    letter-spacing: .04em;
    margin-bottom: 1px;
}

/* 9 */

/* ── PAGE WRAPPER ─────────────────────────────────── */
.aff-res {
    padding: 44px 0 64px;
}

.aff-res__header {
    margin-bottom: 36px;
}

.aff-res__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 6px;
}

.aff-res__h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 6px;
    line-height: 1.2;
}

.aff-res__sub {
    font-size: .95rem;
    color: var(--aff-muted);
    margin: 0;
}

/* ── CARD ─────────────────────────────────────────── */
.aff-res-card {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 28px 32px;
    margin-bottom: 20px;
}

.aff-res-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--aff-navy);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--aff-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.aff-res-card__title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(26, 86, 219, .08);
    font-size: .9rem;
    flex-shrink: 0;
}

/* ── STEPS LIST ───────────────────────────────────── */
.aff-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aff-steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--aff-muted);
}

.aff-steps-list li strong { color: var(--aff-navy); }

.aff-steps-list__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aff-blue), var(--aff-blue-lt));
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── TWO-COL GRID ─────────────────────────────────── */
.aff-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 640px) {
    .aff-two-col { grid-template-columns: 1fr; }
    .aff-res-card { padding: 22px 20px; }
}

.aff-block-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin: 0 0 12px;
}

.aff-plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aff-plain-list li {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--aff-muted);
    padding-left: 14px;
    position: relative;
}

.aff-plain-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--aff-blue);
    font-weight: 700;
}

.aff-plain-list li strong { color: var(--aff-navy); }

/* ── TEMPLATES ────────────────────────────────────── */
.aff-template {
    border: 1px solid var(--aff-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.aff-template:last-of-type { margin-bottom: 0; }

.aff-template__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--aff-off);
    border-bottom: 1px solid var(--aff-border);
}

.aff-template__label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--aff-navy);
}

.aff-template__body {
    padding: 16px;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--aff-muted);
}

.aff-template__body p { margin: 0 0 8px; }
.aff-template__body p:last-child { margin: 0; }

.aff-template__body ul {
    margin: 8px 0;
    padding-left: 18px;
}

.aff-template__body ul li { margin-bottom: 4px; }

/* aff-copy-btn — §9 has a different visual style; added as variant */
.aff-copy-btn--outline {
    padding: 5px 12px;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--aff-border);
    background: var(--aff-white);
    color: var(--aff-navy);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.aff-copy-btn--outline:hover {
    background: var(--aff-blue);
    border-color: var(--aff-blue);
    color: #fff;
}

.aff-copy-btn--outline.copied {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

/* ── BANNERS GRID ─────────────────────────────────── */
.aff-banners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .aff-banners-grid { grid-template-columns: repeat(2, 1fr); }
}

.aff-banner-item {
    border: 1px solid var(--aff-border);
    border-radius: 10px;
    overflow: hidden;
}

.aff-banner-preview {
    background: linear-gradient(135deg, var(--aff-off), #dde3f0);
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--aff-muted);
}

.aff-banner-foot {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--aff-border);
}

.aff-banner-foot span {
    font-size: .75rem;
    color: var(--aff-muted);
}

.aff-dl-btn {
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--aff-border);
    background: var(--aff-white);
    color: var(--aff-navy);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.aff-dl-btn:hover {
    background: var(--aff-navy);
    color: #fff;
}

/* ── PRACTICES 4-COL ──────────────────────────────── */
.aff-four-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .aff-four-col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .aff-four-col { grid-template-columns: 1fr; }
}

/* ── HELP BOX ─────────────────────────────────────── */
.aff-help-box {
    background: linear-gradient(135deg, var(--aff-navy), #1a3560);
    border-radius: var(--aff-radius);
    padding: 28px 32px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.aff-help-box__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.aff-help-box__content { flex: 1; min-width: 200px; }

.aff-help-box h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.aff-help-box p {
    font-size: .875rem;
    color: rgba(255,255,255,.65);
    margin: 0 0 14px;
}

.aff-help-box a.aff-mailto {
    color: var(--aff-gold);
    font-weight: 600;
    text-decoration: none;
}

.aff-help-box a.aff-mailto:hover { text-decoration: underline; }

.aff-help-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aff-help-box ul li {
    font-size: .8rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    border-radius: 6px;
    padding: 4px 12px;
}

/* 10 */

/* ── PAGE ─────────────────────────────────────────── */
.aff-admin {
    padding: 40px 0 64px;
}

.aff-admin__header {
    margin-bottom: 28px;
}

.aff-admin__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aff-blue);
    margin-bottom: 6px;
}

.aff-admin__h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aff-navy);
    margin: 0 0 4px;
}

.aff-admin__sub {
    font-size: .9rem;
    color: var(--aff-muted);
    margin: 0;
}

/* aff-alert — §10 adds display:flex variant, kept under .aff-alert--flex above */

/* aff-stats — §10 uses repeat(4,1fr); already set by §2; breakpoints merged above */

.aff-stat__val--pending  { color: #b45309; }
.aff-stat__val--approved { color: var(--aff-green); }
.aff-stat__val--rejected { color: var(--aff-red); }

/* ── FILTER TABS ──────────────────────────────────── */
.aff-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.aff-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: .825rem;
    font-weight: 600;
    border-radius: 100px;
    border: 1px solid var(--aff-border);
    background: var(--aff-white);
    color: var(--aff-muted);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.aff-filter-btn:hover {
    background: var(--aff-off);
    color: var(--aff-navy);
}

.aff-filter-btn--active-all      { background: var(--aff-navy);  border-color: var(--aff-navy);  color: #fff; }
.aff-filter-btn--active-pending  { background: #fef3c7; border-color: #d97706; color: #92400e; }
.aff-filter-btn--active-approved { background: rgba(25,135,84,.1); border-color: var(--aff-green); color: var(--aff-green); }
.aff-filter-btn--active-rejected { background: rgba(220,53,69,.08); border-color: var(--aff-red); color: var(--aff-red); }

.aff-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 100px;
    background: rgba(0,0,0,.08);
    font-size: .68rem;
    font-weight: 700;
    padding: 0 5px;
}

/* ── EMPTY STATE ──────────────────────────────────── */
/* aff-empty base kept from §7; §10 adds border/background */
.aff-empty--card {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    padding: 56px 24px;
    text-align: center;
    color: var(--aff-muted);
}

.aff-empty--card svg { margin-bottom: 14px; opacity: .3; }
.aff-empty--card h5 { font-size: 1rem; font-weight: 700; color: var(--aff-navy); margin-bottom: 6px; }
.aff-empty--card p  { font-size: .875rem; margin: 0; }

/* ── APPLICATION CARD ─────────────────────────────── */
.aff-app {
    background: var(--aff-white);
    border: 1px solid var(--aff-border);
    border-radius: var(--aff-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.aff-app__btn {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: var(--aff-white);
    border: none;
    padding: 18px 22px;
    cursor: pointer;
    color: inherit;
    transition: background .15s;
}

.aff-app__btn:hover { background: var(--aff-off); }

.aff-app__btn:focus-visible {
    outline: 2px solid var(--aff-blue);
    outline-offset: -2px;
}

.aff-app__name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--aff-navy);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.aff-app__type {
    font-size: .75rem;
    font-weight: 500;
    color: var(--aff-muted);
}

.aff-app__meta {
    font-size: .8rem;
    color: var(--aff-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

.aff-app__meta span { margin-right: 8px; }

.aff-app__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Chevron */
.aff-chevron {
    transition: transform .22s ease;
    color: var(--aff-muted);
    flex-shrink: 0;
}

.aff-app__btn[aria-expanded="true"] .aff-chevron {
    transform: rotate(180deg);
}

/* ── COLLAPSE BODY ────────────────────────────────── */
.aff-app__body { display: none; }
.aff-app__body.is-open { display: block; }

.aff-app__detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px 24px;
    padding: 20px 22px;
    border-top: 1px solid var(--aff-border);
}

.aff-detail__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aff-muted);
    margin-bottom: 4px;
}

.aff-detail__val {
    font-size: .875rem;
    color: var(--aff-navy);
    line-height: 1.5;
    word-break: break-word;
}

.aff-detail__val a {
    color: var(--aff-blue);
    text-decoration: none;
    word-break: break-all;
}

.aff-detail__val a:hover { text-decoration: underline; }

.aff-detail--full {
    grid-column: 1 / -1;
}

/* Social pills */
.aff-social-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.aff-social-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--aff-border);
    border-radius: 100px;
    background: var(--aff-off);
    color: var(--aff-navy);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.aff-social-pill:hover {
    background: rgba(26,86,219,.06);
    border-color: var(--aff-blue-lt);
    color: var(--aff-blue);
}

.aff-social-pill__platform {
    color: var(--aff-muted);
    font-size: .72rem;
}

/* Rejection reason box */
.aff-rejection-box {
    margin: 0 22px 20px;
    padding: 12px 16px;
    background: rgba(220,53,69,.06);
    border: 1px solid rgba(220,53,69,.2);
    border-radius: 8px;
    font-size: .875rem;
    color: var(--aff-red);
}

.aff-rejection-box strong { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }

/* Reviewed by */
.aff-reviewed-note {
    font-size: .775rem;
    color: var(--aff-muted);
}

/* ── FOOTER ROW ───────────────────────────────────── */
.aff-app__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 22px;
    background: var(--aff-off);
    border-top: 1px solid var(--aff-border);
}

.aff-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: .825rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
    text-decoration: none;
}

.aff-btn:hover { opacity: .88; transform: translateY(-1px); }

.aff-btn--approve { background: var(--aff-green); color: #fff; }
.aff-btn--reject  { background: var(--aff-red);   color: #fff; }

.aff-btn--cancel {
    background: var(--aff-off);
    color: var(--aff-navy);
    border: 1px solid var(--aff-border);
}

.aff-btn--cancel:hover { background: var(--aff-border); opacity: 1; }

/* ── MODAL ────────────────────────────────────────── */
.aff-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,31,58,.5);
    z-index: 1050;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.aff-modal-overlay.is-open {
    display: flex;
}

.aff-modal {
    background: var(--aff-white);
    border-radius: var(--aff-radius);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 24px 60px rgba(11,31,58,.2);
}

.aff-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--aff-border);
}

.aff-modal__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--aff-navy);
    margin: 0;
}

.aff-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aff-muted);
    padding: 4px;
    line-height: 1;
}

.aff-modal__body {
    padding: 22px 24px;
}

.aff-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--aff-border);
}

.aff-modal-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--aff-navy);
    margin-bottom: 6px;
    display: block;
}

.aff-modal-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: .875rem;
    color: var(--aff-navy);
    border: 1px solid var(--aff-border);
    border-radius: 8px;
    outline: none;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.aff-modal-textarea:focus {
    border-color: var(--aff-blue);
    box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}