.streamers-page {
    background:
        radial-gradient(circle at 15% 35%, rgba(239, 203, 62, .035), transparent 28rem),
        var(--bg-dark);
}

.streamers-page button.hamburger-menu {
    padding: 0;
    border: 0;
    background: transparent;
}

.streamer-hero {
    position: relative;
    min-height: 360px;
    height: 40vh;
    margin-top: 70px;
    display: grid;
    place-items: center;
    overflow: hidden;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(5, 5, 16, .34), rgba(5, 5, 16, .7)),
        url('../images/illu/aventurier_hurlevent.jpg') center 45% / cover no-repeat;
    box-shadow: inset 0 -55px 75px rgba(5, 5, 16, .72);
}

.streamer-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 70% 28%, rgba(77, 149, 208, .16), transparent 31%),
        radial-gradient(ellipse at center, rgba(239, 203, 62, .08), transparent 62%),
        linear-gradient(90deg, rgba(5, 5, 16, .22), transparent 35%, transparent 72%, rgba(5, 5, 16, .28));
}

.streamer-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    padding-block: 3rem;
}

.streamer-kicker,
.section-kicker,
.card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--primary-color);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.streamer-kicker,
.section-kicker {
    padding: .38rem .72rem;
    border: 1px solid rgba(239, 203, 62, .3);
    border-radius: 999px;
    background: rgba(5, 5, 16, .62);
}

.section-kicker {
    display: flex;
    width: max-content;
    margin-inline: auto;
}

.streamer-hero h1 {
    margin: 1rem 0 .4rem;
    color: var(--primary-color);
    font-size: clamp(2.35rem, 4vw, 3.6rem);
    letter-spacing: .045em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px #000, 0 0 30px rgba(239, 203, 62, .25);
}

.streamer-hero .separator {
    width: 120px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    box-shadow: 0 0 10px rgba(239, 203, 62, .45);
}

.streamer-hero p {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, 1.45vw, 1.16rem);
    line-height: 1.75;
    text-shadow: 0 2px 10px #000;
}

.streamer-hero p strong { color: #fff; }

.streamer-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 6rem) 0;
    background: #070914;
}

.streamer-section::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}

.streamer-section::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 8%;
    left: 8%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(239, 203, 62, .44), transparent);
}

.streamer-section > .container {
    position: relative;
    z-index: 1;
}

.program-details-section::before {
    background:
        radial-gradient(circle at 82% 22%, rgba(70, 141, 199, .14), transparent 30%),
        linear-gradient(90deg, rgba(5, 7, 17, .9) 0%, rgba(6, 8, 19, .7) 48%, rgba(5, 7, 16, .5) 100%),
        linear-gradient(180deg, rgba(5, 7, 17, .28), rgba(5, 7, 17, .78)),
        url('../images/illu/chemin.jpg') center 48% / cover no-repeat;
}

.program-details-section {
    border-bottom: 1px solid rgba(239, 203, 62, .14);
}

.account-section::before {
    background:
        radial-gradient(circle at 14% 38%, rgba(117, 79, 190, .16), transparent 30%),
        linear-gradient(90deg, rgba(6, 7, 17, .56) 0%, rgba(6, 7, 17, .72) 52%, rgba(5, 6, 15, .9) 100%),
        linear-gradient(180deg, rgba(6, 7, 17, .28), rgba(5, 6, 15, .8)),
        url('../images/illu/forge.jpg') center 46% / cover no-repeat;
}

.account-section {
    border-bottom: 1px solid rgba(239, 203, 62, .12);
}

.directory-section::before {
    background:
        radial-gradient(circle at 78% 24%, rgba(71, 148, 204, .15), transparent 29%),
        linear-gradient(90deg, rgba(5, 6, 16, .88) 0%, rgba(5, 6, 16, .68) 48%, rgba(5, 6, 16, .48) 100%),
        linear-gradient(180deg, rgba(5, 6, 16, .3), rgba(5, 6, 16, .8)),
        url('../images/illu/aventurier.jpg') center 44% / cover no-repeat;
}

.streamers-page .section-header { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.streamers-page .section-kicker { margin-bottom: 1rem; }
.streamers-page .section-title { margin-bottom: .35rem; }
.streamers-page .section-subtitle { color: rgba(255, 255, 255, .72); line-height: 1.7; }

.program-details-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 1.5rem;
    align-items: stretch;
}

.program-card,
.account-card,
#signed-in-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(239, 203, 62, .3);
    border-radius: 12px;
    background: rgba(5, 5, 16, .78);
    backdrop-filter: blur(5px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .35), 0 0 24px rgba(239, 203, 62, .04);
}

.program-card::before,
.account-card::before,
#signed-in-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.program-card {
    padding: clamp(1.6rem, 3vw, 2.3rem);
}

.eligibility-card {
    display: flex;
    flex-direction: column;
}

.card-eyebrow { margin-bottom: .85rem; }
.program-card h2 { margin: 0 0 .8rem; color: #fff; font-size: clamp(1.45rem, 2.6vw, 2rem); }
.program-intro, .rewards-explanation { color: rgba(255, 255, 255, .68); }
.program-intro { margin-bottom: 1.35rem; }
.rewards-explanation p { margin-bottom: .8rem; }

.eligibility-group + .eligibility-group {
    margin-top: 1.25rem;
}

.eligibility-group h3 {
    margin: 0 0 .72rem;
    padding-bottom: .42rem;
    color: var(--secondary-light);
    border-bottom: 1px solid rgba(146, 115, 230, .16);
    font-family: 'Nunito', sans-serif;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.eligibility-list {
    display: grid;
    gap: .88rem;
    margin: 0;
    padding: 0;
}

.eligibility-list li {
    display: grid;
    grid-template-columns: 1.65rem 1fr;
    align-items: start;
    gap: .72rem;
    line-height: 1.48;
}

.eligibility-list i {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    margin-top: .05rem;
    border: 1px solid rgba(239, 203, 62, .55);
    border-radius: 50%;
    color: var(--text-dark);
    background: var(--primary-color);
    box-shadow: 0 0 12px rgba(239, 203, 62, .18);
    font-size: .7rem;
}

.eligibility-list strong { color: var(--primary-color); }

.eligibility-note {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: .85rem;
    align-items: start;
    margin-top: auto;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(146, 115, 230, .24);
}

.eligibility-note > i {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    color: var(--secondary-light);
    border: 1px solid rgba(146, 115, 230, .34);
    border-radius: 2px;
    background: rgba(146, 115, 230, .08);
}

.eligibility-note strong,
.eligibility-note span {
    display: block;
}

.eligibility-note strong {
    margin-bottom: .18rem;
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.eligibility-note span {
    color: rgba(255, 255, 255, .58);
    font-size: .9rem;
    line-height: 1.5;
}

.rewards-table-wrapper {
    overflow: hidden;
    margin-top: 1.35rem;
    border: 1px solid rgba(239, 203, 62, .28);
    border-radius: 8px;
    background: rgba(0, 0, 0, .2);
}

.rewards-table { width: 100%; border-collapse: collapse; }
.rewards-table th, .rewards-table td { padding: .9rem 1rem; text-align: left; }
.rewards-table th {
    color: rgba(255, 255, 255, .72);
    background: rgba(239, 203, 62, .075);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.rewards-table td { border-top: 1px solid rgba(255, 255, 255, .075); }
.rewards-table td:last-child { color: var(--primary-color); white-space: nowrap; }
.rewards-table tbody tr { transition: background-color .2s ease; }
.rewards-table tbody tr:hover { background: rgba(239, 203, 62, .055); }

.page-message {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    background: rgba(239, 203, 62, .1);
}
.page-message.error { border-color: rgba(255, 91, 91, .5); background: rgba(160, 30, 30, .18); }
.affiliation-system-error {
    color: #ffd7d7;
    font-weight: 800;
    text-align: center;
}

.account-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.6rem, 4vw, 2.5rem);
}
.account-card[hidden], #signed-in-panel[hidden] { display: none; }
.account-card h2 { color: var(--primary-color); }
.account-card p { max-width: 660px; margin: 0; color: rgba(255, 255, 255, .7); }

#signed-in-panel { padding: clamp(1.4rem, 3vw, 2.2rem); }
.provider-button, .small-button, .text-button { border: 0; cursor: pointer; font: inherit; }
.provider-button {
    flex: 0 0 auto;
    padding: .88rem 1.15rem;
    border-radius: var(--border-radius);
    font-weight: 800;
}
.steam-button { color: #fff; background: linear-gradient(120deg, #214b6b, #172c45); }
.steam-button:hover { box-shadow: 0 8px 24px rgba(41, 109, 157, .3); }

.dashboard-heading,
.section-heading-inline {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.dashboard-heading h2, .section-heading-inline h2 { margin: 0; color: var(--primary-color); }
.text-button { color: rgba(255, 255, 255, .68); background: transparent; }
.text-button:hover { color: var(--primary-color); }

.account-grid, .streamer-grid { display: grid; gap: 1.2rem; }
.account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.provider-card {
    min-height: 126px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(239, 203, 62, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
    transition: var(--transition);
}
.provider-card:hover { border-color: rgba(239, 203, 62, .34); background: rgba(239, 203, 62, .035); }
.provider-card.linked { border-color: rgba(69, 198, 129, .32); }
.provider-icon { width: 48px; text-align: center; font-size: 2.45rem; color: #a970ff; }
.provider-card:first-child .provider-icon { color: #67a4d2; }
.provider-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.provider-label { display: block; color: rgba(255, 255, 255, .52); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.provider-card strong, .provider-card small { display: block; overflow-wrap: anywhere; }
.provider-card small { margin-top: .2rem; color: rgba(255, 255, 255, .52); }

.small-button {
    padding: .47rem .72rem;
    border-radius: 999px;
    color: var(--text-dark);
    background: var(--primary-color);
    font-size: .78rem;
    font-weight: 800;
}
.small-button:hover { background: var(--primary-light); }
.steam-profile-button { white-space: nowrap; color: #fff; background: #214b6b; }
.steam-profile-button:hover { background: #2b638d; }
.small-button.danger { color: #ffabab; background: rgba(192, 61, 61, .2); }

.tracking-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 1.2rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(239, 203, 62, .22);
    border-radius: 8px;
    background: rgba(239, 203, 62, .035);
}
.tracking-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: .35rem; }
.tracking-card h3 { margin-bottom: .35rem; color: #fff; font-size: 1.15rem; }
.tracking-heading h3 { margin: 0; }
.tracking-card h3 i { margin-right: .35rem; color: var(--primary-color); }
.tracking-card p { margin: 0; color: rgba(255, 255, 255, .62); }
.tracking-card p.warning { color: #ff7777; font-weight: 700; white-space: pre-line; }
.tracking-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .58rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
}
.tracking-status::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.tracking-status.active { color: #78dca6; background: rgba(69, 198, 129, .1); }
.tracking-status.inactive { color: #ff6f6f; background: rgba(192, 61, 61, .12); }
.tracking-status.banned { color: #ff9b9b; background: rgba(116, 20, 31, .28); }
.tracking-card .cta-button {
    border: 0;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}
.tracking-card .cta-button.tracking-enable { color: #08120d; background: #78dca6; box-shadow: 0 4px 15px rgba(47, 143, 98, .25); }
.tracking-card .cta-button.tracking-enable:hover { background: #91e7b7; transform: none; box-shadow: 0 4px 15px rgba(47, 143, 98, .25); }
.tracking-card .cta-button.tracking-suspend { color: #fff; background: #a95e21; box-shadow: 0 4px 15px rgba(181, 106, 34, .25); }
.tracking-card .cta-button.tracking-suspend:hover { background: #c27029; transform: none; box-shadow: 0 4px 15px rgba(181, 106, 34, .25); }
.tracking-card .cta-button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.tracking-card.banned { border-color: rgba(255, 91, 91, .5); background: rgba(116, 20, 31, .2); }

.live-tracking-panel {
    margin-top: 1.2rem;
    padding: 1.5rem;
    border: 1px solid rgba(130, 183, 250, .26);
    border-radius: 8px;
    background:
        radial-gradient(circle at 92% 0, rgba(93, 156, 236, .11), transparent 30%),
        rgba(5, 5, 16, .72);
}
.live-tracking-header,
.my-live-context,
.my-live-progress > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.live-tracking-header { margin-bottom: 1.2rem; }
.live-tracking-header .card-eyebrow { margin-bottom: .35rem; }
.live-tracking-header h3 { margin: 0; color: #fff; font-size: 1.3rem; }
.my-live-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.my-live-status::before {
    content: '';
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}
.my-live-status.offline { color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); }
.my-live-status.crediting { color: #78dca6; background: rgba(69, 198, 129, .1); }
.my-live-status.ineligible { color: #ff8a8a; background: rgba(192, 61, 61, .12); }
.my-live-status.banned { color: #ff9b9b; background: rgba(116, 20, 31, .28); }
.my-live-status.stale,
.my-live-status.unknown { color: #f0c96c; background: rgba(239, 203, 62, .08); }
.my-live-status.crediting::before { animation: streamer-live-pulse 1.6s ease-in-out infinite; }

.my-live-empty {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 7px;
    background: rgba(255, 255, 255, .02);
}
.my-live-empty > i { color: #a970ff; font-size: 2rem; }
.my-live-empty strong { display: block; color: rgba(255, 255, 255, .86); }
.my-live-empty p { margin: .2rem 0 0; color: rgba(255, 255, 255, .55); }
.my-live-empty[hidden],
.my-live-details[hidden] { display: none; }
.live-tracking-panel.banned {
    border-color: rgba(255, 91, 91, .42);
    background:
        radial-gradient(circle at 92% 0, rgba(192, 61, 61, .13), transparent 30%),
        rgba(48, 8, 16, .34);
}
.live-tracking-panel.banned .my-live-empty { border-color: rgba(255, 111, 111, .2); }
.live-tracking-panel.banned .my-live-empty > i { color: #ff7777; }

.my-live-context {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.my-live-context > div:first-child { min-width: 0; }
.my-live-category {
    display: block;
    margin-bottom: .25rem;
    color: #82b7fa;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.my-live-context > div:first-child strong { display: block; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.my-live-audience { flex: 0 0 auto; color: rgba(255, 255, 255, .58); font-size: .78rem; text-align: right; }
.my-live-audience i { margin-right: .3rem; color: #ff8a8a; }
.my-live-audience strong { color: #fff; font-size: 1rem; }

.my-live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 1rem;
    margin-top: 1rem;
}
.my-live-conditions,
.my-live-metrics {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
}
.my-live-conditions h4 { margin: 0 0 .8rem; color: rgba(255, 255, 255, .82); font-size: .9rem; }
.my-live-conditions ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.my-live-conditions li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; font-size: .82rem; }
.my-live-conditions li[hidden] { display: none; }
.my-live-conditions li i { width: 1rem; text-align: center; }
.my-live-conditions li span { color: rgba(255, 255, 255, .68); }
.my-live-conditions li strong { font-size: .72rem; }
.my-live-conditions li.passed i,
.my-live-conditions li.passed strong { color: #78dca6; }
.my-live-conditions li.failed i,
.my-live-conditions li.failed strong { color: #ff8a8a; }
.my-live-conditions li.pending i,
.my-live-conditions li.pending strong { color: #f0c96c; }

.my-live-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.my-live-metrics div { min-width: 0; }
.my-live-metrics span,
.my-live-metrics strong { display: block; }
.my-live-metrics span { color: rgba(255, 255, 255, .48); font-size: .7rem; line-height: 1.35; text-transform: uppercase; }
.my-live-metrics strong { margin-top: .2rem; color: #fff; font-size: .9rem; overflow-wrap: anywhere; }

.my-live-progress { margin-top: 1rem; }
.my-live-progress > div { margin-bottom: .45rem; color: rgba(255, 255, 255, .65); font-size: .78rem; }
.my-live-progress > div strong { color: #82b7fa; }
.my-live-progress progress {
    width: 100%;
    height: .62rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}
.my-live-progress progress::-webkit-progress-bar { border-radius: 999px; background: rgba(255, 255, 255, .08); }
.my-live-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #477fc5, #82b7fa); }
.my-live-progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #477fc5, #82b7fa); }

.my-live-reasons {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(255, 111, 111, .3);
    border-radius: 7px;
    color: #ff9b9b;
    background: rgba(116, 20, 31, .13);
}
.my-live-reasons[hidden] { display: none; }
.my-live-reasons.refreshing { border-color: rgba(239, 203, 62, .25); color: #f0c96c; background: rgba(239, 203, 62, .05); }
.my-live-reasons strong { display: block; font-size: .82rem; }
.my-live-reasons ul { margin: .3rem 0 0; padding-left: 1.1rem; color: rgba(255, 255, 255, .68); font-size: .78rem; }
.my-live-updated { margin: .8rem 0 0; color: rgba(255, 255, 255, .4); font-size: .72rem; text-align: right; }

@keyframes streamer-live-pulse {
    50% { opacity: .45; box-shadow: 0 0 4px currentColor; }
}

.credits-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.credit-counter {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(239, 203, 62, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.credit-counter-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.received-credits-card .credit-counter-icon { color: #78dca6; background: rgba(69, 198, 129, .12); }
.pending-credits-card .credit-counter-icon { color: var(--primary-color); background: rgba(239, 203, 62, .1); }
.credit-counter-label { display: block; color: rgba(255, 255, 255, .62); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.credit-counter strong { display: block; margin: .15rem 0; color: #fff; font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.1; }
.received-credits-card strong { color: #78dca6; }
.pending-credits-card strong { color: var(--primary-color); }
.credit-counter small { color: rgba(255, 255, 255, .46); }

.daily-credit-notice {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(93, 156, 236, .3);
    border-radius: 8px;
    background: rgba(45, 103, 178, .1);
}

.daily-credit-notice > i { color: #82b7fa; font-size: 1.55rem; }
.daily-credit-notice strong { display: block; color: #a8ceff; font-family: 'Cinzel', serif; font-size: .92rem; }
.daily-credit-notice p { margin: .2rem 0 0; color: rgba(255, 255, 255, .68); }

.streamer-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.streamer-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(239, 203, 62, .24);
    border-radius: 8px;
    background: rgba(5, 5, 16, .78);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .28);
    transition: var(--transition);
}
.streamer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: .65;
}
.streamer-card:hover { border-color: rgba(239, 203, 62, .52); box-shadow: var(--glow-shadow); }
.streamer-card-content { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .95rem; padding: 1.15rem; }
.streamer-card img { width: 56px; height: 56px; border: 1px solid rgba(239, 203, 62, .35); border-radius: 50%; object-fit: cover; background: #17131f; }
.streamer-card strong, .streamer-card small { display: block; }
.streamer-card strong { font-family: 'Cinzel', serif; }
.streamer-card small { color: rgba(255, 255, 255, .54); }
.streamer-card .streamer-followers { margin-top: .3rem; color: var(--primary-color); font-weight: 700; }
.empty-state { margin: 0; padding: 1rem 0; color: rgba(255, 255, 255, .55); }
.empty-state.wide { grid-column: 1 / -1; padding: 2rem; text-align: center; border: 1px dashed rgba(239, 203, 62, .26); border-radius: 8px; background: rgba(5, 5, 16, .48); }

.streamers-page .footer { padding-top: 4rem; border-top: 1px solid rgba(239, 203, 62, .14); background: #050510; }
.streamers-page .footer-column h3 { color: var(--primary-color); }

@media (max-width: 1100px) {
    .streamers-page .social-icons { display: none; }
}

@media (max-width: 800px) {
    .streamer-hero {
        min-height: 390px;
        height: auto;
        background-position: 58% 45%;
    }
    .program-details-section::before { background-position: center, center, center, 62% center; }
    .account-section::before { background-position: center, center, center, 43% center; }
    .directory-section::before { background-position: center, center, center, 58% center; }
    .program-details-grid, .account-grid, .credits-overview, .my-live-grid { grid-template-columns: 1fr; }
    .account-card, .tracking-card, .dashboard-heading { align-items: stretch; flex-direction: column; }
    .provider-button, .tracking-card .cta-button { width: 100%; text-align: center; }
    .streamers-page .section-title { font-size: clamp(1.8rem, 7vw, 2.25rem); }
}

@media (max-width: 520px) {
    .streamer-hero { min-height: 410px; }
    .streamer-hero h1 { font-size: 2.25rem; }
    .streamer-hero-content { padding-inline: .25rem; }
    .program-card { padding: 1.35rem; }
    .provider-card { grid-template-columns: auto 1fr; }
    .provider-card > :last-child { grid-column: 1 / -1; text-align: center; }
    .live-tracking-panel { padding: 1.1rem; }
    .live-tracking-header, .my-live-context { align-items: flex-start; flex-direction: column; }
    .my-live-context > div:first-child strong { white-space: normal; }
    .my-live-audience { text-align: left; }
    .my-live-metrics { grid-template-columns: 1fr; }
    .my-live-conditions li { grid-template-columns: auto 1fr; }
    .my-live-conditions li strong { grid-column: 2; }
    .rewards-table th, .rewards-table td { padding: .78rem .7rem; }
    .streamer-section::before { filter: saturate(.92); }
    .program-details-section::before {
        background:
            linear-gradient(180deg, rgba(5, 7, 17, .66), rgba(5, 7, 17, .86)),
            url('../images/illu/chemin.jpg') 62% center / cover no-repeat;
    }
    .account-section::before {
        background:
            linear-gradient(180deg, rgba(6, 7, 17, .62), rgba(5, 6, 15, .86)),
            url('../images/illu/forge.jpg') 43% center / cover no-repeat;
    }
    .directory-section::before {
        background:
            linear-gradient(180deg, rgba(5, 6, 16, .6), rgba(5, 6, 16, .84)),
            url('../images/illu/aventurier.jpg') 58% center / cover no-repeat;
    }
}

@media (prefers-reduced-motion: reduce) {
    .program-card, .streamer-card { transition: none; }
    .my-live-status.crediting::before { animation: none; }
}