html,
body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: #0b0b10;
    color: #f7f7fb;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

button,
input {
    font: inherit;
}

.tf-app-shell {
    min-height: 100dvh;
    background: #0b0b10;
    color: #f7f7fb;
    display: flex;
    flex-direction: column;
}

.tf-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 68px;
    flex: 0 0 68px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(11,11,16,.96);
}

.tf-brand {
    color: #f7f7fb;
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.tf-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tf-account-link {
    color: #f7f7fb;
    text-decoration: none;
    font-weight: 600;
}


.tf-header-account-nav {
    min-width: 58px;
    padding: 0;
    color: #d2d3da;
    font-size: .75rem;
}

.tf-header-account-nav:hover,
.tf-header-account-nav:focus {
    color: #f0f0f4;
}

.tf-header-account-nav.active {
    color: #ffd84d;
    text-shadow: 0 0 12px rgba(255, 216, 77, .42);
}

.tf-account-nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-account-nav-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tf-main {
    flex: 1;
    min-height: 0;
}

.tf-screen {
    min-height: 100%;
}

.tf-bottom-nav {
    min-height: 70px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(11,11,16,.98);
}


.tf-header-logo {
    display: block;
    width: auto;
    height: 50px;
    object-fit: contain;
}

.tf-header-logo-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}


.tf-nav-item {
    min-width: 70px;
    color: #d2d3da;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: .75rem;
}

.tf-nav-item.active {
    color: #ffd84d;
    text-shadow: 0 0 12px rgba(255, 216, 77, .42);
}

.tf-nav-icon {
    font-size: 1.35rem;
    line-height: 1;
}

.tf-route-page {
    animation: tf-route-slide-in .24s cubic-bezier(.2,.8,.2,1);
}

@keyframes tf-route-slide-in {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.home-image-page {
    width: 100%;
    min-height: calc(100dvh - 138px);
    background: #05060b;
}

.home-discovery-image-link {
    display: block;
    width: min(100%, 851px);
    margin: 0 auto;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.home-discovery-image-link img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.home-discovery-image-link:focus-visible {
    outline: 2px solid #9d56ff;
    outline-offset: -2px;
}

@media (min-width: 900px) {
    .home-image-page {
        min-height: calc(100dvh - 68px);
    }
}

.discovery-host {
    position: relative;
    height: calc(100dvh - 138px);
    min-height: 0;
    overflow: hidden;
    background: #0b0b10;
}

.discovery-count-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(18,18,25,.97);
    box-shadow: 0 5px 16px rgba(0,0,0,.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.discovery-count-number,
.discovery-count-label {
    color: #ffd54a;
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1;
}

.discovery-count-label {
    letter-spacing: .04em;
}

.discovery-scroll {
    position: absolute;
    inset: 44px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.filters-view {
    width: 100%;
    max-width: 1180px;
    min-width: 0;
    min-height: 100%;
    margin: 0 auto;
    padding: 30px 22px 110px;
}

.filters-heading {
    display: block;
    margin-bottom: 14px;
}

.filters-heading h1 {
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.filters-heading p {
    margin: 10px 0 0;
    color: #a9abb5;
}

.filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.filter-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    background: #14141b;
}

.full-width {
    grid-column: 1 / -1;
}

.filter-label,
.search-label,
.tf-multi-select-label {
    display: block;
    margin-bottom: 14px;
    font-size: .95rem;
    font-weight: 750;
}

.creator-search-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    outline: none;
    background: #0f0f15;
    color: #ffffff;
    font-size: 1rem;
}

.creator-search-input:focus {
    border-color: rgba(255,255,255,.45);
}

.creator-search-input::placeholder {
    color: #686a75;
}

.tf-option-row,
.tf-multi-select-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tf-option,
.tf-multi-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: transparent;
    color: #b8bac4;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.tf-option:hover,
.tf-multi-option:hover {
    border-color: rgba(255,255,255,.30);
    transform: translateY(-1px);
}

.tf-option.selected,
.tf-multi-option.selected {
    border-color: #ffffff;
    background: #ffffff;
    color: #0b0b10;
    font-weight: 750;
}

.tf-more-options {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #d7d8df;
    font-size: .9rem;
    font-weight: 750;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tf-more-options:hover {
    color: #ffffff;
}

.tf-check {
    display: inline-flex;
    width: 15px;
    min-width: 15px;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.tf-range-slider {
    width: 100%;
    min-width: 0;
    padding: 8px 0 4px;
}

.tf-range-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin-bottom: 18px;
}

.tf-range-label {
    min-width: 0;
    font-size: .95rem;
    font-weight: 750;
}

.tf-range-value {
    flex-shrink: 0;
    color: #d9d9e2;
    font-size: .9rem;
    font-weight: 700;
}

.tf-range-track-container {
    position: relative;
    height: 28px;
}

.tf-range-track,
.tf-range-selected {
    position: absolute;
    top: 12px;
    height: 4px;
    border-radius: 999px;
}

.tf-range-track {
    left: 0;
    right: 0;
    background: rgba(255,255,255,.13);
}

.tf-range-selected {
    background: #ffffff;
}

.tf-range-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.tf-range-input::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

.tf-range-input::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -9px;
    border: 3px solid #0b0b10;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.tf-range-input::-moz-range-track {
    height: 4px;
    background: transparent;
}

.tf-range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #0b0b10;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    pointer-events: auto;
}

.tf-range-minmax {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    color: #777985;
    font-size: .75rem;
}

.discovery-show-creators-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 16px 12px;
    background: linear-gradient(
        to top,
        rgba(11,11,16,1) 0%,
        rgba(11,11,16,.99) 76%,
        rgba(11,11,16,.88) 100%
    );
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 -8px 24px rgba(0,0,0,.28);
}

.discovery-show-creators-button {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #0b0b10;
    font-size: .95rem;
    font-weight: 850;
    cursor: pointer;
}

@media (min-width: 800px) {
    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .tf-app-shell {
        padding-left: 92px;
    }

    .tf-bottom-nav {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 92px;
        min-height: 100vh;
        padding: 84px 8px 18px;
        flex-direction: column;
        justify-content: flex-start;
        gap: 18px;
        border-top: 0;
        border-right: 1px solid rgba(255,255,255,.08);
    }

    .tf-nav-item {
        width: 100%;
        min-height: 58px;
    }

    .home-page {
        min-height: calc(100dvh - 68px);
        padding: 70px;
    }

    .discovery-host {
        height: calc(100dvh - 68px);
    }
}

@media (max-width: 620px) {
    .filters-view {
        padding-left: 14px;
        padding-right: 14px;
    }

    .filter-card {
        padding: 16px;
    }

    .discovery-count-overlay {
        padding-left: 20px;
        padding-right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tf-route-page {
        animation: none;
    }
}


.hidden-antiforgery {
    display: none;
}

.discovery-count-loading {
    margin-left: auto;
    color: #7f818d;
    font-size: .78rem;
    font-weight: 650;
}

.api-error-box {
    padding: 18px;
    border: 1px solid rgba(255, 106, 106, .35);
    border-radius: 16px;
    background: rgba(255, 106, 106, .08);
    color: #ffb4b4;
    line-height: 1.5;
}

.paid-filter-region {
    display: contents;
}

.paid-filter-region[hidden] {
    display: none;
}

.results-view {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 22px 14px;
}

.results-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0;
    margin: -26px -22px 12px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(11,11,16,.97);
    box-shadow: 0 5px 16px rgba(0,0,0,.20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.back-button,
.secondary-button {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: transparent;
    color: #f7f7fb;
    padding: 10px 15px;
    font-weight: 750;
    cursor: pointer;
}


.results-header .back-button {
    padding: 8px 12px;
    font-size: .86rem;
}

.results-heading-copy h1 {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    letter-spacing: -.03em;
}

.results-subtitle {
    margin-top: 5px;
    color: #90929d;
    font-size: .9rem;
}

.results-status {
    min-height: 24px;
    margin-bottom: 14px;
    color: #9da0aa;
}

.creator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.creator-card {
    min-width: 0;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 18px;
    background: #181820;
    cursor: pointer;
    transition:
        transform .15s ease,
        border-color .15s ease;
}

.creator-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.34);
}

.creator-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #20212a;
}

.creator-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f818d;
    font-size: 2.2rem;
    font-weight: 850;
}

.creator-badges {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.creator-badge {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(12,12,17,.78);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.creator-badge.free {
    background: rgba(22,122,73,.9);
}

.creator-badge.paid {
    background: rgba(12,12,17,.82);
}

.creator-info {
    padding: 10px 12px 8px;
}

.creator-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.creator-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.creator-chevron {
    color: #7c7e89;
    font-size: 1.3rem;
}

.creator-username {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b9bac3;
    font-size: .83rem;
}

.creator-meta {
    margin-top: 8px;
    color: #c0b47a;
    font-size: .77rem;
    line-height: 1.4;
}

.results-load-more {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

@media (min-width: 680px) {
    .creator-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .creator-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* =========================================================
   CREATOR PROFILE
   Prototype 03 - adapted from current TotallyFansV2
   ========================================================= */

.creator-detail-view {
    width: 100%;
    max-width: 760px;
    min-height: calc(100dvh - 138px);
    margin: 0 auto;
    padding: 14px 12px 82px;
    box-sizing: border-box;
}

.detail-topbar {
    position: -webkit-sticky;
    position: sticky;
    top: 68px;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 42px;
    margin: -14px -12px 12px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(11,11,16,.96);
    backdrop-filter: blur(10px);
}

.detail-topbar .back-button {
    justify-self: start;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 800;
}

.detail-topbar-title {
    justify-self: center;
    color: #8e909b;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.profile-hero {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background: #14141b;
}

.profile-hero-main {
    position: relative;
    aspect-ratio: 4 / 4.6;
    overflow: hidden;
    background: #1b1b24;
}

.profile-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 18%;
}

.profile-hero-gradient {
    position: absolute;
    inset: auto 0 0;
    height: 44%;
    background: linear-gradient(
        to top,
        rgba(8,8,12,.95),
        rgba(8,8,12,0)
    );
}

.profile-hero-name {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
}

.profile-name-line {
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
}

.verified-mark {
    color: #ffd54a;
    font-size: 1rem;
    vertical-align: middle;
}

.profile-handle {
    margin-top: 5px;
    color: #d0d1d7;
    font-size: .76rem;
}

.profile-thumbnails {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    padding: 5px;
}

.profile-thumbnail {
    min-width: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color .14s ease,
        transform .14s ease,
        box-shadow .14s ease;
}

.profile-thumbnail:hover {
    transform: translateY(-1px);
}

.profile-thumbnail.selected {
    border-color: #ffd54a;
    box-shadow:
        0 0 0 1px rgba(255,213,74,.22),
        0 4px 12px rgba(0,0,0,.24);
}

.profile-thumbnail img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    border-radius: 9px;
}

.profile-section {
    margin-top: 12px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: #14141b;
}

.profile-load-state {
    color: #a9abb5;
    text-align: center;
    padding-top: 28px;
    padding-bottom: 28px;
}

.section-label {
    margin-bottom: 11px;
    color: #b7a96f;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .15em;
}

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

.summary-name {
    margin: 0;
    font-size: 1.23rem;
    font-weight: 900;
}

.summary-location {
    margin-top: 3px;
    color: #9698a3;
    font-size: .73rem;
}

.free-pill {
    padding: 6px 9px;
    border-radius: 999px;
    background: #ffd54a;
    color: #0b0b10;
    font-size: .63rem;
    font-weight: 900;
}

.summary-quick-line {
    margin-top: 9px;
    color: #c2c3ca;
    font-size: .77rem;
}

.profile-description {
    margin-top: 13px;
    color: #b9bac3;
    font-size: .82rem;
    line-height: 1.6;
    white-space: pre-line;
}

.platform-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.platform-name {
    font-weight: 900;
}

.platform-subtitle {
    margin-top: 3px;
    color: #8e909b;
    font-size: .72rem;
}

.platform-button {
    flex-shrink: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #0b0b10;
    text-decoration: none;
    font-size: .71rem;
    font-weight: 900;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    margin-top: 14px;
}

.stat-card {
    padding: 10px 6px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: #0f0f15;
    text-align: center;
}

.stat-card strong,
.stat-card span {
    display: block;
}

.stat-card strong {
    font-size: .9rem;
}

.stat-card span {
    margin-top: 2px;
    color: #b7a96f;
    font-size: .59rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
}

.detail-item {
    padding: 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: #0f0f15;
}

.detail-item span,
.detail-item strong {
    display: block;
}

.detail-item span {
    color: #b7a96f;
    font-size: .61rem;
}

.detail-item strong {
    margin-top: 4px;
    font-size: .76rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag {
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: #101016;
    color: #c9cad0;
    font-size: .67rem;
}

.feature-list {
    display: grid;
    gap: 0;
}

.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 38px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: .73rem;
}

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

.feature-row span {
    color: #b7a96f;
}

.feature-row strong {
    color: #ffffff;
    font-weight: 800;
}

@media (min-width:700px) {

    .creator-detail-view {
        padding-left: 20px;
        padding-right: 20px;
    }

    .profile-hero-main {
        aspect-ratio: 16 / 10;
    }

    .profile-thumbnail img {
        aspect-ratio: 16 / 9;
    }

    .detail-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (min-width:900px) {

    .creator-detail-view {
        min-height: calc(100dvh - 68px);
    }
}

/* Keep the primary bottom navigation pinned to the viewport on phone/tablet
   pages whose content is taller than the screen (for example Creator). */
@media (max-width: 899px) {
    .tf-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        width: 100%;
    }
}

/* =========================================================
   Anonymous creator Lists: Like / Maybe / Pass
   ========================================================= */

.creator-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.creator-list-actions,
.profile-list-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.creator-list-actions {
    padding: 0 8px 8px;
    gap: 5px;
}

.creator-list-actions button,
.profile-list-actions button {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: #0f0f15;
    color: #d8d9df;
    padding: 6px 2px;
    font-size: .62rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.creator-list-actions button.is-like,
.profile-list-actions button.is-like {
    border-color: rgba(62, 211, 111, .92);
    background: rgba(32, 154, 76, .28);
    color: #6cf09c;
    box-shadow: inset 0 0 0 1px rgba(62, 211, 111, .16);
}

.creator-list-actions button.is-maybe,
.profile-list-actions button.is-maybe {
    border-color: rgba(224, 177, 53, .95);
    background: rgba(166, 119, 18, .28);
    color: #f1c95e;
    box-shadow: inset 0 0 0 1px rgba(224, 177, 53, .14);
}

.creator-list-actions button.is-pass,
.profile-list-actions button.is-pass {
    border-color: rgba(173, 61, 74, .96);
    background: rgba(115, 27, 39, .38);
    color: #f0808f;
    box-shadow: inset 0 0 0 1px rgba(173, 61, 74, .16);
}

.creator-list-actions button:hover,
.profile-list-actions button:hover {
    border-color: rgba(255,213,74,.58);
    background: rgba(255,213,74,.08);
    color: #ffd54a;
    transform: translateY(-1px);
}

.profile-list-actions {
    margin-top: 13px;
}

.profile-list-actions button {
    padding: 9px 8px;
    font-size: .73rem;
}

.profile-list-message {
    margin-top: 9px;
    color: #ffd54a;
    font-size: .72rem;
    line-height: 1.4;
}

.lists-view {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 22px 18px;
}

.lists-heading .eyebrow {
    color: #ffd54a;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.lists-heading h1 {
    margin: 5px 0 0;
    font-size: clamp(1.8rem, 5vw, 2.7rem);
    letter-spacing: -.04em;
}

.lists-heading p {
    margin: 8px 0 0;
    color: #8f919c;
    font-size: .86rem;
}

.lists-tabs {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 42;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 18px -22px 12px;
    padding: 9px 22px;
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(11,11,16,.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lists-tab {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: #14141b;
    color: #a6a8b1;
    padding: 9px 6px;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
}

.lists-tab span {
    margin-left: 3px;
    color: #777a84;
}

.lists-tab.selected {
    border-color: #ffd54a;
    background: #ffd54a;
    color: #0b0b10;
}

.lists-tab.selected span {
    color: #0b0b10;
}

.lists-status {
    min-height: 24px;
    margin-bottom: 12px;
    color: #8f919c;
    font-size: .8rem;
}

@media (min-width: 760px) {
    .creator-list-actions button {
        font-size: .72rem;
    }
}

/* ============================================================
   Fan access / TotallyFans+ entitlements
   ============================================================ */

.tf-access-locked {
    position: relative;
    overflow: hidden;
}

.tf-access-locked > :not(.tf-filter-lock) {
    opacity: .48;
    filter: saturate(.7);
}

.tf-filter-lock {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: inherit;
    background: rgba(11, 11, 16, .26);
    color: #f2c84b;
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .02em;
    cursor: pointer;
    backdrop-filter: blur(1.2px);
    -webkit-backdrop-filter: blur(1.2px);
}

.tf-filter-lock:hover {
    background: rgba(11, 11, 16, .38);
}

.tf-lock-icon {
    font-size: .88rem;
}

.tf-access-dialog[hidden] {
    display: none !important;
}

.tf-access-dialog {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.tf-access-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 2, 5, .84);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.tf-access-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    border: 1px solid rgba(255, 213, 74, .30);
    border-radius: 24px;
    padding: 28px 24px 24px;
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 213, 74, .17), transparent 42%),
        #121218;
    box-shadow: 0 24px 90px rgba(0, 0, 0, .62);
    text-align: center;
}

.tf-access-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.78);
    border-radius: 50%;
    background: #5f626b;
    color: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.38);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}



.tf-access-close:hover,
.tf-access-close:focus-visible {
    border-color: #fff;
    background: #777b85;
    transform: scale(1.06);
    outline: none;
}

.tf-access-logo {
    color: #ffd54a;
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -.04em;
}


.tf-access-plus-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 2px;
    padding: 0 30px;
}

.tf-access-plus-logo {
    display: block;
    width: min(100%, 245px);
    height: auto;
    object-fit: contain;
}

.tf-access-kicker {
    margin-top: 13px;
    color: #a8aab4;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.tf-access-panel h2 {
    margin: 8px 0 0;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.tf-access-copy {
    margin: 13px auto 0;
    max-width: 350px;
    color: #b7b9c2;
    font-size: .88rem;
    line-height: 1.55;
}

.tf-access-benefits {
    display: grid;
    gap: 9px;
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;
    background: rgba(255,255,255,.025);
    color: #f1f1f4;
    text-align: left;
    font-size: .82rem;
    font-weight: 750;
}

.tf-access-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    color: #fff;
}

.tf-access-price strong {
    color: #ffd54a;
    font-size: 2.25rem;
    line-height: 1;
}

.tf-access-price span {
    color: #a5a7b0;
    font-size: .85rem;
}

.tf-access-primary,
.tf-access-secondary {
    display: block;
    text-decoration: none;
}

.tf-access-primary {
    margin-top: 18px;
    border-radius: 999px;
    padding: 13px 18px;
    background: #ffd54a;
    color: #0b0b10;
    font-size: .85rem;
    font-weight: 950;
}

.tf-access-secondary {
    margin-top: 13px;
    color: #c8cad1;
    font-size: .78rem;
    font-weight: 750;
}

.tf-access-footnote {
    margin: 10px 0 0;
    color: #777a84;
    font-size: .7rem;
}

.tf-access-dialog.blocking .tf-access-panel {
    border-color: rgba(255,255,255,.14);
}

.tf-premium-stat-locked {
    cursor: pointer;
    border-color: rgba(255, 213, 74, .25) !important;
}

.tf-premium-stat-locked strong {
    color: #ffd54a;
}

.tf-premium-stat-locked span::after {
    content: "  TotallyFans+";
    color: #b69228;
    font-size: .62rem;
}

/* ================================================================
   FAN REGISTRATION / SIGN-IN
   ================================================================ */

.tf-header-signout-form {
    margin: 0;
    padding: 0;
}

.tf-account-button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.tf-auth-page {
    display: flex;
    justify-content: center;
    padding: 28px 16px 120px;
}

.tf-auth-card {
    width: min(100%, 430px);
    padding: 24px 20px;
    border: 1px solid #32323b;
    border-radius: 24px;
    background: #15151c;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.tf-auth-eyebrow {
    margin-bottom: 8px;
    color: #ffd449;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.tf-auth-card h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 7vw, 2.25rem);
    line-height: 1.05;
}

.tf-auth-intro {
    margin: 12px 0 22px;
    color: #bfc0c9;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tf-auth-form {
    display: grid;
    gap: 14px;
}

.tf-auth-field {
    display: grid;
    gap: 7px;
}

.tf-auth-field > span {
    color: #d9bd67;
    font-size: 0.78rem;
    font-weight: 800;
}

.tf-auth-field input {
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    border: 1px solid #34343e;
    border-radius: 15px;
    outline: none;
    background: #0f0f15;
    color: #fff;
    padding: 0 15px;
    font: inherit;
}

.tf-auth-field input:focus {
    border-color: #ffd449;
    box-shadow: 0 0 0 2px rgba(255, 212, 73, 0.12);
}

.tf-auth-password-note {
    margin-top: -5px;
    color: #8f909b;
    font-size: 0.72rem;
}

.tf-auth-primary {
    min-height: 50px;
    margin-top: 4px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #09090d;
    font-size: 0.92rem;
    font-weight: 950;
    cursor: pointer;
}

.tf-auth-primary:hover {
    background: #ffd449;
}

.tf-auth-switch {
    margin-top: 4px;
    color: #9c9da7;
    text-align: center;
    font-size: 0.82rem;
}

.tf-auth-switch a {
    color: #fff;
    font-weight: 850;
    text-decoration: none;
}

.tf-auth-error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #6d3039;
    border-radius: 14px;
    background: #2a1519;
    color: #ffd9de;
    font-size: 0.84rem;
    line-height: 1.4;
}

.tf-auth-creator-note {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #292932;
    color: #777884;
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: center;
}

/* =============================================================
   FAN EMAIL VERIFICATION
   ============================================================= */

.tf-verify-card {
    text-align: center;
}

.tf-verify-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 4px auto 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    font-size: 30px;
    line-height: 1;
}

.tf-verify-success {
    border-color: rgba(85, 214, 125, 0.55);
    background: rgba(85, 214, 125, 0.12);
}

.tf-auth-success {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid rgba(85, 214, 125, 0.45);
    border-radius: 12px;
    background: rgba(85, 214, 125, 0.10);
    color: #d8ffe3;
    font-size: 0.92rem;
}

.tf-verify-actions,
.tf-verify-signout {
    margin-top: 12px;
}

.tf-auth-link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.tf-auth-secondary-button {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    padding: 12px 16px;
    font: inherit;
    cursor: pointer;
}

.tf-verify-note {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.82rem;
}

/* =============================================================
   FAN ACCOUNT
   ============================================================= */
.tf-account-page {
    display: flex;
    justify-content: center;
    padding: 28px 16px 120px;
}

.tf-account-card {
    width: min(100%, 430px);
    padding: 24px 20px;
    border: 1px solid #32323b;
    border-radius: 24px;
    background: #15151c;
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.tf-account-card h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 7vw, 2.25rem);
    line-height: 1.05;
}

.tf-account-details {
    overflow: hidden;
    border: 1px solid #2e2e37;
    border-radius: 18px;
    background: #101016;
}

.tf-account-row {
    padding: 15px 16px;
    border-bottom: 1px solid #292932;
}

.tf-account-row:last-child { border-bottom: 0; }
.tf-account-label { color: #8f909b; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tf-account-value { margin-top: 5px; color: #f5f5f7; font-size: .96rem; font-weight: 800; overflow-wrap: anywhere; }
.tf-account-verified { color: #8fe0a7; }
.tf-account-subvalue { margin-top: 5px; color: #d9bd67; font-size: .78rem; }

.tf-account-upgrade,
.tf-account-signout {
    width: 100%;
    min-height: 50px;
    border-radius: 999px;
    font: inherit;
    font-size: .9rem;
    font-weight: 950;
    cursor: pointer;
}

.tf-account-upgrade {
    margin-top: 18px;
    border: 0;
    background: #ffd54a;
    color: #0b0b10;
}

.tf-account-signout-form { margin-top: 12px; }
.tf-account-signout { border: 1px solid #3a3a44; background: transparent; color: #e7e7eb; }
.tf-account-action-link{display:inline-block;margin-top:.45rem;color:#d8b45a;text-decoration:none;font-weight:700}.tf-account-action-link:hover{text-decoration:underline}.tf-auth-success{margin:1rem 0;padding:.85rem 1rem;border:1px solid rgba(95,190,125,.45);border-radius:10px;background:rgba(95,190,125,.08);color:#c9f4d5}.tf-auth-forgot{text-align:right;margin-top:-.35rem;margin-bottom:.25rem}

/* TotallyFans+ configurable one-time access options */
.tf-access-purchase-options {
    display: grid;
    gap: 10px;
    margin: 18px 0 12px;
}

.tf-access-purchase-option {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.tf-access-purchase-option:hover {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .08);
}

.tf-access-purchase-option.featured {
    border-color: #c9a227;
    background: rgba(201, 162, 39, .10);
}

/* The selected access term is intentionally the only green pricing card. */
.tf-access-purchase-option.selected,
.tf-access-purchase-option.selected:hover,
.tf-access-purchase-option.featured.selected {
    border-color: #2fbf63;
    background: linear-gradient(180deg, rgba(22, 110, 52, .42), rgba(10, 67, 31, .34));
    box-shadow: 0 0 0 1px rgba(47, 191, 99, .16), 0 0 18px rgba(47, 191, 99, .16);
}

.tf-access-purchase-option.selected strong {
    color: #73e69a;
}

.tf-access-purchase-option strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 1.25rem;
    color: #e3c65a;
}

.tf-access-purchase-option > span:last-child {
    font-size: .78rem;
    opacity: .72;
}

.tf-access-purchase-name {
    font-weight: 800;
}

.tf-access-purchase-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #c9a227;
    color: #111;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .05em;
}

/* ================================================================
   TOTALLYFANS+ MOBILE BENEFITS HERO
   ================================================================ */
.tf-access-panel {
    width: min(100%, 460px);
    padding: 10px 10px 18px;
}

.tf-access-hero-wrap {
    margin: -1px -1px 0;
    overflow: hidden;
    border-radius: 18px 18px 12px 12px;
    background: #000;
}

.tf-access-hero-mobile {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

.tf-access-purchase-heading {
    margin: 18px 0 2px;
    color: #f5d269;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-align: center;
}

.tf-access-purchase-options {
    margin-top: 13px;
}

.tf-access-close {
    z-index: 3;
    top: 10px;
    right: 10px;
    border-color: rgba(255,255,255,.78);
    background: #5f626b;
    color: #fff;
    box-shadow: 0 3px 15px rgba(0,0,0,.45);
}

@media (max-width: 520px) {
    .tf-access-dialog {
        align-items: start;
        padding: 8px;
    }

    .tf-access-panel {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
        padding: 7px 7px 16px;
    }

    .tf-access-hero-wrap {
        border-radius: 13px 13px 10px 10px;
    }

    .tf-access-purchase-option {
        padding: 13px 14px;
    }
}

/* ================================================================
   TOTALLYFANS+ 9:16 NO-SCROLL UPGRADE LAYOUT
   Keep the full benefits graphic + configurable purchase choices
   visible together on a phone-sized 9:16 canvas.
   ================================================================ */
@media (max-width: 620px) {
    .tf-access-dialog {
        place-items: center;
        padding: 6px;
        overflow: hidden;
    }

    .tf-access-panel {
        display: flex;
        flex-direction: column;
        width: min(calc(100vw - 12px), calc((100dvh - 12px) * 9 / 16));
        height: min(calc(100dvh - 12px), calc((100vw - 12px) * 16 / 9));
        max-width: none;
        max-height: none;
        overflow: hidden;
        padding: 5px 5px 7px;
        border-radius: 16px;
    }

    .tf-access-hero-wrap {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        border-radius: 12px 12px 8px 8px;
        overflow: hidden;
    }

    .tf-access-hero-mobile {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .tf-access-purchase-heading {
        flex: 0 0 auto;
        margin: 5px 0 3px;
        font-size: .61rem;
        line-height: 1;
        letter-spacing: .11em;
    }

    .tf-access-purchase-options {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin: 0;
    }

    .tf-access-purchase-option {
        display: flex;
        min-width: 0;
        min-height: 58px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 6px 3px 5px;
        border-radius: 9px;
        text-align: center;
        line-height: 1.02;
    }

    .tf-access-purchase-name {
        font-size: .70rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    .tf-access-purchase-option strong {
        grid-row: auto;
        grid-column: auto;
        font-size: .92rem;
        line-height: 1.05;
    }

    .tf-access-purchase-option > span:last-child {
        font-size: .47rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    .tf-access-purchase-badge {
        top: -6px;
        right: 50%;
        transform: translateX(50%);
        padding: 1px 5px;
        font-size: .44rem;
        white-space: nowrap;
    }

    .tf-access-footnote {
        flex: 0 0 auto;
        margin: 4px 0 0;
        font-size: .54rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .tf-access-close {
        top: 8px;
        right: 8px;
        width: 46px;
        height: 46px;
        font-size: 2rem;
    }
}

/* On very short 9:16-ish devices, preserve the no-scroll contract by
   making the purchase strip slightly tighter rather than scrolling. */
@media (max-width: 620px) and (max-height: 700px) {
    .tf-access-purchase-option {
        min-height: 51px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .tf-access-purchase-heading {
        margin-top: 3px;
    }

    .tf-access-footnote {
        margin-top: 2px;
    }
}

/* ================================================================
   TOTALLYFANS+ BENEFITS: 2x2 CARD MATRIX IN 9:16 VIEW
   The benefits artwork is cropped to hero + four cards only. The
   configurable HTML purchase choices remain below it.
   ================================================================ */
@media (max-width: 620px) {
    .tf-access-hero-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
    }

    .tf-access-hero-mobile {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
    }
}

/* ================================================================
   TOTALLYFANS+ PURCHASE CTA + TRUST STRIP
   ================================================================ */
.tf-access-trust-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(225,183,55,.55);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(23,20,13,.96), rgba(7,7,9,.98));
    box-shadow: inset 0 0 18px rgba(225,183,55,.06);
}
.tf-access-trust-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 5px;
    border-right: 1px solid rgba(255,255,255,.08);
    color: #f3e6b0;
}
.tf-access-trust-item:last-child { border-right: 0; }
.tf-access-trust-icon { flex: 0 0 auto; color: #e7bb3a; font-size: 1rem; line-height: 1; }
.tf-access-trust-item span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tf-access-trust-item strong { font-size: .56rem; line-height: 1.05; color: #fff; white-space: nowrap; }
.tf-access-trust-item small { font-size: .48rem; line-height: 1.05; color: #d6bf78; white-space: nowrap; }

@media (max-width: 620px) {
    .tf-access-purchase-heading { margin: 4px 0; font-size: .67rem; }
    .tf-access-purchase-options { gap: 6px; }
    .tf-access-purchase-option {
        min-height: 69px;
        padding: 7px 4px 6px;
        border-width: 1px;
        box-shadow: 0 2px 10px rgba(0,0,0,.28);
    }
    .tf-access-purchase-name { font-size: .78rem; }
    .tf-access-purchase-option strong { font-size: 1.08rem; }
    .tf-access-purchase-option > span:last-child { font-size: .53rem; }
    .tf-access-trust-strip {
        flex: 0 0 auto;
        gap: 2px;
        margin-top: 6px;
        padding: 6px 4px;
        border-radius: 9px;
    }
    .tf-access-trust-item {
        gap: 2px;
        padding: 0 2px;
        flex-direction: column;
        text-align: center;
    }
    .tf-access-trust-icon { font-size: .8rem; }
    .tf-access-trust-item strong { font-size: .38rem; line-height: 1; }
    .tf-access-trust-item small { display: none; }
}
@media (max-width: 620px) and (max-height: 760px) {
    .tf-access-purchase-option { min-height: 61px; }
    .tf-access-trust-strip { margin-top: 4px; padding-top: 4px; padding-bottom: 4px; }
}

/* ================================================================
   EXACT PAYMENT TRUST IMAGE BELOW PRICING
   Uses the supplied artwork literally rather than recreating it in HTML.
   ================================================================ */
.tf-access-trust-strip { display: none !important; }
.tf-access-trust-image-wrap {
    flex: 0 0 auto;
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
}
.tf-access-trust-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 620px) {
    .tf-access-purchase-heading {
        margin: 5px 0 5px;
        font-size: .70rem;
    }
    .tf-access-purchase-options {
        gap: 7px;
    }
    .tf-access-purchase-option {
        min-height: 73px;
        padding: 8px 4px 7px;
    }
    .tf-access-purchase-name { font-size: .80rem; }
    .tf-access-purchase-option strong { font-size: 1.12rem; }
    .tf-access-purchase-option > span:last-child { font-size: .54rem; }

    .tf-access-trust-image-wrap {
        margin-top: 9px;
        padding: 0 1px;
    }
    .tf-access-trust-image {
        width: 100%;
        max-height: 58px;
        object-fit: contain;
    }

    /* Reserve a little more visual weight for pricing + supplied trust strip
       while keeping the complete upgrade experience inside the 9:16 panel. */
    .tf-access-hero-wrap {
        flex: 1 1 auto;
        min-height: 0;
    }
}

@media (max-width: 620px) and (max-height: 760px) {
    .tf-access-purchase-option { min-height: 65px; }
    .tf-access-trust-image-wrap { margin-top: 6px; }
    .tf-access-trust-image { max-height: 50px; }
}

.tf-paypal-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    margin: 12px 0 4px;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

/* PayPal Web SDK v6 renders these as web components.  Keep the component
   itself full-width and let PayPal own all of its internal rendering. */
.tf-paypal-buttons paypal-button,
.tf-paypal-buttons paypal-pay-later-button,
.tf-paypal-v6-button {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}



/* =========================================================
   LOOK-ALIKE
   ========================================================= */

.lookalike-view {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 18px 120px;
}

.lookalike-heading {
    margin-bottom: 22px;
}

.lookalike-heading h1,
.lookalike-section-heading h2,
.lookalike-source-card h2,
.lookalike-picker-header h2 {
    margin: 4px 0 8px;
}

.lookalike-heading p,
.lookalike-source-card p,
.lookalike-filter-note {
    color: var(--tf-muted, #6b7280);
}

.lookalike-source-card,
.lookalike-refine-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .07);
    padding: 22px;
    margin-bottom: 18px;
}

.lookalike-source-empty {
    text-align: center;
    padding: 22px 10px;
}

.lookalike-source-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-size: 38px;
    background: #f3f4f6;
}

.lookalike-source-selected {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    align-items: center;
}

.lookalike-source-selected[hidden] {
    display: none;
}

.lookalike-source-image-wrap {
    width: 150px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 18px;
    background: #f3f4f6;
}

.lookalike-source-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lookalike-source-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.lookalike-source-actions.compact {
    justify-content: flex-start;
}

.lookalike-primary-button,
.lookalike-secondary-button,
.lookalike-find-button,
.lookalike-choice {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.lookalike-primary-button,
.lookalike-find-button {
    background: #111827;
    color: #fff;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 800;
}

.lookalike-secondary-button {
    background: #f3f4f6;
    color: #111827;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
}

.lookalike-filter-block {
    padding: 18px 0;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.lookalike-filter-label {
    font-weight: 850;
    margin-bottom: 10px;
}

.lookalike-choice-row,
.lookalike-body-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lookalike-choice {
    padding: 10px 15px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 750;
    border: 1px solid transparent;
}

.lookalike-choice.selected {
    background: #111827;
    color: #fff;
}

.lookalike-choice.disabled {
    opacity: .42;
}

.lookalike-filter-note {
    margin-top: 9px;
    font-size: .9rem;
}

.lookalike-find-button {
    width: 100%;
    margin-top: 12px;
    padding: 15px 20px;
    font-size: 1rem;
}

.lookalike-find-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.lookalike-coming-next {
    text-align: center;
    margin-top: 10px;
    color: #6b7280;
    font-size: .92rem;
}

.lookalike-picker {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.lookalike-picker[hidden] {
    display: none;
}

.lookalike-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.lookalike-picker-panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(760px, 100%);
    max-height: 82vh;
    overflow: auto;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 20px;
}

.lookalike-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.lookalike-picker-close {
    border: 0;
    background: #f3f4f6;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
}

.lookalike-picker-tabs {
    display: flex;
    gap: 8px;
    margin: 12px 0 16px;
}

.lookalike-picker-tabs button {
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    font-weight: 750;
}

.lookalike-picker-tabs button.selected {
    background: #111827;
    color: #fff;
}

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

.lookalike-picker-item {
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    font-weight: 750;
}

.lookalike-picker-item img,
.lookalike-picker-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    background: #f3f4f6;
    display: grid;
    place-items: center;
    margin-bottom: 7px;
}

.creator-lookalike-profile-action {
    text-decoration: none;
    color: inherit;
}

@media (max-width: 640px) {

    .lookalike-source-selected {
        grid-template-columns: 104px 1fr;
        gap: 14px;
    }

    .lookalike-source-image-wrap {
        width: 104px;
    }

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

    .creator-list-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .creator-list-actions button {
        padding-left: 4px;
        padding-right: 4px;
        font-size: .76rem;
    }
}


/* =========================================================
   LOOK-ALIKE PHASE 2 MOBILE POLISH
   ========================================================= */

.lookalike-view {
    padding-top: 16px;
}

.lookalike-heading {
    margin-bottom: 12px;
}

.lookalike-heading h1 {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
    line-height: 1.05;
    margin: 2px 0 4px;
}

.lookalike-heading p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.3;
}

.lookalike-source-card,
.lookalike-refine-card {
    color: #111827;
}

.lookalike-source-card h2,
.lookalike-refine-card h2,
.lookalike-filter-label,
.lookalike-source-details h2,
.lookalike-section-heading h2 {
    color: #111827 !important;
}

.lookalike-source-card p,
.lookalike-refine-card p,
.lookalike-filter-note,
.lookalike-source-details p {
    color: #6b7280 !important;
}

.lookalike-source-card .eyebrow,
.lookalike-refine-card .eyebrow {
    color: #7c8799 !important;
}

.lookalike-source-card {
    padding: 14px;
    border-radius: 18px;
}

.lookalike-source-selected {
    grid-template-columns: 82px 1fr;
    gap: 12px;
}

.lookalike-source-image-wrap {
    width: 82px;
    border-radius: 14px;
}

.lookalike-source-details h2 {
    margin: 0 0 2px;
    font-size: 1rem;
    line-height: 1.1;
}

.lookalike-source-details p {
    margin: 0 0 8px;
    font-size: .82rem;
}

.lookalike-source-actions.compact {
    margin-top: 6px;
    gap: 6px;
}

.lookalike-source-actions.compact .lookalike-secondary-button {
    padding: 8px 11px;
    font-size: .78rem;
}

.lookalike-source-empty {
    padding: 14px 8px;
}

.lookalike-source-empty h2 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.lookalike-source-empty p {
    font-size: .85rem;
    margin-bottom: 8px;
}

.lookalike-source-icon {
    width: 48px;
    height: 48px;
    font-size: 26px;
    margin-bottom: 8px;
}

.lookalike-refine-card {
    padding: 14px;
    border-radius: 18px;
}

.lookalike-section-heading h2 {
    font-size: 1rem;
    margin: 2px 0 6px;
}

.lookalike-filter-block {
    padding: 13px 0;
}

.lookalike-filter-label {
    font-size: .86rem;
    margin-bottom: 8px;
}

.lookalike-choice {
    padding: 8px 12px;
    font-size: .8rem;
}

.lookalike-filter-note {
    font-size: .78rem;
    line-height: 1.3;
}

/* Four actions: 2 x 2 everywhere on mobile */
.creator-list-actions,
.creator-profile-list-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.creator-list-actions button,
.creator-list-actions [data-lookalike-action],
.creator-profile-list-actions button,
.creator-profile-list-actions .creator-lookalike-profile-action {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    font-size: .78rem !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.creator-profile-list-actions .creator-lookalike-profile-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: inherit;
}

@media (max-width: 640px) {

    .lookalike-view {
        padding-left: 14px;
        padding-right: 14px;
    }

    .lookalike-heading {
        margin-bottom: 10px;
    }

    .lookalike-source-card,
    .lookalike-refine-card {
        margin-bottom: 14px;
    }

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


/* =========================================================
   LOOK-ALIKE PHASE 3
   ========================================================= */

/* Creator result cards remain 2 x 2 so labels stay readable. */
.creator-list-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

/* Full creator profile has more horizontal room: keep all four on one row. */
.profile-list-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.profile-list-actions button,
.profile-list-actions .creator-lookalike-profile-action {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 3px !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

.profile-list-actions .creator-lookalike-profile-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: transparent !important;
    color: inherit !important;
}

/* The menu-entry state needs to be shorter on phone-height screens. */
.lookalike-source-empty {
    padding-top: 7px !important;
    padding-bottom: 8px !important;
}

.lookalike-source-empty .lookalike-source-icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 4px !important;
    font-size: 21px !important;
}

.lookalike-source-empty h2 {
    margin: 2px 0 4px !important;
    font-size: .92rem !important;
}

.lookalike-source-empty p {
    margin: 0 auto 7px !important;
    max-width: 290px;
    font-size: .75rem !important;
    line-height: 1.2 !important;
}

.lookalike-source-empty .lookalike-source-actions {
    margin-top: 7px !important;
    gap: 6px !important;
}

.lookalike-source-empty .lookalike-primary-button,
.lookalike-source-empty .lookalike-secondary-button {
    padding: 9px 14px !important;
    font-size: .78rem !important;
}

/* Tighten refine card slightly to reduce scrolling. */
.lookalike-refine-card {
    padding-bottom: 10px !important;
}

.lookalike-filter-block {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.lookalike-choice {
    padding: 7px 11px !important;
}

/* Keep the CTA reachable above the persistent bottom nav. */
.lookalike-find-sticky {
    position: sticky;
    bottom: 58px;
    z-index: 20;
    background: #fff;
    padding-top: 8px;
    padding-bottom: 2px;
}

.lookalike-find-sticky::before {
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: -10px;
    height: 12px;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,1)
    );
    pointer-events: none;
}

.lookalike-find-button {
    margin-top: 0 !important;
}

@media (max-width: 640px) {

    .lookalike-heading h1 {
        font-size: 1.15rem !important;
    }

    .lookalike-heading p {
        font-size: .76rem !important;
    }

    .lookalike-refine-card {
        margin-bottom: 6px !important;
    }
}


/* =========================================================
   LOOK-ALIKE PHASE 4
   ========================================================= */

/* Show the complete source image centered instead of cropping it. */
.lookalike-source-image {
    object-fit: contain !important;
    object-position: center center !important;
    background: #f3f4f6 !important;
}

/*
   The second action column needs a little more room because
   "Look-Alikes" is longer than Like/Maybe/Pass.
*/
.creator-list-actions {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr) !important;
}

.creator-list-actions button,
.creator-list-actions [data-lookalike-action] {
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
}

.creator-list-actions [data-lookalike-action] {
    font-size: .71rem !important;
}

/* Keep all four full-profile actions on the same row. */
.profile-list-actions .creator-lookalike-profile-action {
    font-size: .66rem !important;
    white-space: nowrap !important;
}


/* =========================================================
   LOOK-ALIKE SEARCH RESULTS - PHASE 1
   ========================================================= */

.lookalike-results[hidden] {
    display: none !important;
}

.lookalike-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lookalike-results-header h2 {
    margin: 2px 0 0;
    color: #fff;
    font-size: 1.35rem;
    text-transform: uppercase;
}

.lookalike-results-header .lookalike-secondary-button {
    flex: 0 0 auto;
    padding: 8px 12px;
}

.lookalike-results-grid {
    margin-top: 0;
}

.lookalike-load-more {
    width: 100%;
    margin: 16px 0 6px;
}

.lookalike-results-status {
    text-align: center;
    color: #9ca3af;
    padding: 8px 0 20px;
    font-size: .85rem;
}

.lookalike-results .creator-meta {
    color: #f2cf59;
}


/* =========================================================
   LOOK-ALIKE PRETTY MESSAGE MODAL
   ========================================================= */

.lookalike-modal-open {
    overflow: hidden;
}

.lookalike-message-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.lookalike-message-modal[hidden] {
    display: none !important;
}

.lookalike-message-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 14, .76);
    backdrop-filter: blur(4px);
}

.lookalike-message-card {
    position: relative;
    width: min(360px, 100%);
    border-radius: 22px;
    background: #fff;
    color: #111827;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
    text-align: center;
    animation: lookalikeMessageIn .16s ease-out;
}

.lookalike-message-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #111827;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}

.lookalike-message-modal[data-message-type="indexing"]
.lookalike-message-icon {
    background: #f2cf59;
    color: #111827;
}

.lookalike-message-modal[data-message-type="error"]
.lookalike-message-icon {
    background: #b42318;
    color: #fff;
}

.lookalike-message-card h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.15rem;
}

.lookalike-message-card p {
    margin: 0;
    color: #5f6878;
    line-height: 1.45;
    font-size: .92rem;
}

.lookalike-message-actions {
    margin-top: 18px;
}

.lookalike-message-actions .lookalike-primary-button {
    min-width: 120px;
}

@keyframes lookalikeMessageIn {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   LOOK-ALIKE SEARCH LOADING
   ========================================================= */

.lookalike-search-loading {
    overflow: hidden;
}

.lookalike-loading {
    position: fixed;
    inset: 0;
    z-index: 3900;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 7, 14, .72);
    backdrop-filter: blur(4px);
}

.lookalike-loading[hidden] {
    display: none !important;
}

.lookalike-loading-card {
    width: min(340px, 100%);
    border-radius: 22px;
    background: #ffffff;
    color: #111827;
    padding: 28px 22px 24px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.lookalike-loading-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 7px solid #e5e7eb;
    border-top-color: #111827;
    animation: lookalikeSpinner .8s linear infinite;
}

.lookalike-loading-title {
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 900;
    color: #111827;
}

.lookalike-loading-text {
    margin-top: 8px;
    color: #667085;
    font-size: .88rem;
    line-height: 1.4;
}

.lookalike-control-disabled {
    pointer-events: none !important;
}

@keyframes lookalikeSpinner {

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .lookalike-loading-spinner {
        animation-duration: 1.8s;
    }
}


/* =========================================================
   LISTS - MOBILE BOTTOM NAV CLEARANCE
   ========================================================= */

@media (max-width: 899px) {

    .lists-view {
        padding-bottom: calc(95px + env(safe-area-inset-bottom));
    }
}

/* =========================================================
   LOOK-ALIKE RESULTS - FIXED REFINE HEADER
   ========================================================= */

/*
   Use fixed positioning instead of position:sticky.
   This avoids parent/scroll-container interactions and keeps
   the result count + Refine control always reachable.
*/
.lookalike-results:not([hidden]) {
    padding-top: 72px;
}

.lookalike-results:not([hidden]) .lookalike-results-header {
    position: fixed !important;
    top: 68px !important;
    left: 50% !important;
    right: auto !important;
    width: min(980px, 100%) !important;
    transform: translateX(-50%) !important;
    z-index: 95 !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    min-height: 64px;
    background: rgba(11, 11, 16, .99) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 899px) {
    .lookalike-results:not([hidden]) {
        padding-top: 66px;
    }

    .lookalike-results:not([hidden]) .lookalike-results-header {
        top: 68px !important;
        width: 100% !important;
        padding: 9px 14px !important;
        min-height: 60px;
    }
}


/* =========================================================
   CREATOR PROFILE CLAIM - PHASE 1
   ========================================================= */

.creator-claim-page {
    min-height: calc(100vh - 68px);
    padding: 22px 16px 110px;
}

.creator-claim-shell {
    width: min(620px, 100%);
    margin: 0 auto;
}

.creator-claim-heading {
    margin-bottom: 16px;
}

.creator-claim-heading h1 {
    margin: 3px 0 7px;
    font-size: clamp(1.55rem, 6vw, 2.2rem);
    line-height: 1.05;
}

.creator-claim-heading p {
    margin: 0;
    color: #aeb7c6;
    line-height: 1.45;
}

.creator-claim-search-card,
.creator-claim-result-card,
.creator-claim-not-found,
.creator-claim-complete-card {
    background: #fff;
    color: #111827;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
    margin-bottom: 16px;
}

.creator-claim-field {
    display: block;
}

.creator-claim-field span {
    display: block;
    margin-bottom: 7px;
    font-size: .84rem;
    font-weight: 850;
}

.creator-claim-field input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d6dae1;
    border-radius: 12px;
    padding: 12px 13px;
    font: inherit;
    color: #111827;
    background: #fff;
    outline: none;
}

.creator-claim-field input:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
}

.creator-claim-example {
    margin: 7px 0 13px;
    color: #717b8b;
    font-size: .76rem;
    line-height: 1.35;
}

.creator-claim-primary,
.creator-claim-secondary {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 850;
    font-size: .9rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.creator-claim-primary {
    width: 100%;
    background: #111827;
    color: #fff;
}

.creator-claim-secondary {
    width: 100%;
    background: #f0f2f5;
    color: #111827;
}

.creator-claim-message {
    border-radius: 14px;
    padding: 11px 13px;
    margin-bottom: 14px;
    font-size: .86rem;
    line-height: 1.4;
}

.creator-claim-message.error {
    background: #fff1f0;
    color: #8f1d16;
}

.creator-claim-message.success {
    background: #eefaf1;
    color: #17632b;
}

.creator-claim-result-card {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: start;
}

.creator-claim-result-image {
    width: 92px;
    height: 112px;
    border-radius: 14px;
    overflow: hidden;
    background: #eef0f3;
}

.creator-claim-result-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.creator-claim-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: #7b8492;
}

.creator-claim-result-info h2 {
    margin: 2px 0 2px;
    color: #111827;
    font-size: 1.15rem;
}

.creator-claim-result-info .eyebrow {
    color: #7b8492;
}

.creator-claim-username {
    color: #4d5664;
    font-weight: 800;
}

.creator-claim-canonical {
    color: #7b8492;
    font-size: .76rem;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.creator-claim-result-copy,
.creator-claim-state {
    grid-column: 1 / -1;
    color: #4f5968;
    line-height: 1.45;
    font-size: .87rem;
}

.creator-claim-result-card form {
    grid-column: 1 / -1;
}

.creator-claim-state {
    border-radius: 12px;
    padding: 11px 12px;
}

.creator-claim-state.pending {
    background: #fff8df;
    color: #6f5915;
}

.creator-claim-state.claimed {
    background: #f0f2f5;
    color: #4a5360;
}

.creator-claim-not-found h2,
.creator-claim-complete-card h2 {
    margin: 0 0 7px;
    color: #111827;
}

.creator-claim-not-found p,
.creator-claim-complete-card p {
    color: #5e6877;
    margin: 0;
    line-height: 1.45;
}

.creator-claim-complete-card {
    text-align: center;
}

.creator-claim-complete-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    background: #111827;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
}

.creator-claim-complete-card .creator-claim-primary {
    margin-top: 16px;
}

.creator-claim-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.creator-claim-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 12, .78);
    backdrop-filter: blur(4px);
}

.creator-claim-modal-card {
    position: relative;
    width: min(390px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: #fff;
    color: #111827;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
}

.creator-claim-modal-card h2 {
    margin: 4px 0 8px;
    font-size: 1.18rem;
}

.creator-claim-modal-card p {
    color: #606a79;
    line-height: 1.42;
}

.creator-claim-modal-card .eyebrow {
    color: #7b8492;
}

.creator-claim-modal-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 12px;
}

.creator-claim-steps {
    display: grid;
    gap: 10px;
    background: #f6f7f9;
    border-radius: 14px;
    padding: 13px;
    margin: 14px 0;
    color: #4f5867;
    line-height: 1.4;
    font-size: .86rem;
}

.creator-claim-modal-card form {
    margin-top: 9px;
}

.creator-claim-modal-cancel {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: #616b79;
    font-size: .83rem;
    text-decoration: none;
}

.tf-auth-creator-note a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
}

@media (max-width: 500px) {

    .creator-claim-page {
        padding-top: 15px;
    }

    .creator-claim-result-card {
        grid-template-columns: 78px 1fr;
    }

    .creator-claim-result-image {
        width: 78px;
        height: 96px;
    }
}


/* =========================================================
   REGISTRATION - FAN + CREATOR DELINEATION
   ========================================================= */
.tf-auth-card { width: min(460px, calc(100% - 28px)); }
.tf-auth-card h1 { font-size: clamp(1.75rem, 6vw, 2.45rem); }
.tf-auth-primary { min-height:52px; font-size:1rem; font-weight:900; }
.tf-auth-creator-choice { margin-top:4px; padding:14px; border:1px solid #343741; border-radius:16px; background:rgba(255,255,255,.025); }
.tf-auth-creator-choice-title { color:#f5f5f7; font-size:.95rem; font-weight:900; }
.tf-auth-creator-choice-copy { margin-top:3px; color:#9297a4; font-size:.76rem; line-height:1.35; }
.tf-auth-creator-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px; }
.tf-auth-creator-option { position:relative; cursor:pointer; }
.tf-auth-creator-option input { position:absolute; opacity:0; pointer-events:none; }
.tf-auth-creator-option > span { min-height:68px; display:flex; flex-direction:column; justify-content:center; border:1px solid #3b3e48; border-radius:13px; padding:10px 11px; background:#18191e; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.tf-auth-creator-option strong { color:#f6f6f8; font-size:.9rem; }
.tf-auth-creator-option small { display:block; margin-top:3px; color:#979ba7; line-height:1.25; font-size:.7rem; }
.tf-auth-creator-option input:checked + span { border-color:#d7b65e; background:rgba(215,182,94,.12); box-shadow:0 0 0 2px rgba(215,182,94,.1); }
.tf-auth-creator-option:active > span { transform:scale(.985); }

/* =========================================================
   ACCOUNT - CREATOR STATUS
   ========================================================= */
.tf-account-creator-section { margin-top:18px; padding-top:18px; border-top:1px solid #343640; }
.tf-account-section-heading { margin-bottom:10px; color:#8f909b; font-size:.72rem; font-weight:850; letter-spacing:.09em; }
.tf-account-creator-status { display:flex; flex-direction:column; gap:4px; padding:13px 14px; border-radius:14px; background:#1c1d22; border:1px solid #343640; }
.tf-account-creator-status strong { color:#f5f5f7; font-size:.9rem; }
.tf-account-creator-status span { color:#989da8; font-size:.78rem; line-height:1.4; }
.tf-account-creator-status.verified strong { color:#8fe0a7; }
.tf-account-creator-action,.tf-account-creator-secondary { width:100%; min-height:46px; box-sizing:border-box; margin-top:10px; border-radius:999px; display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; font-weight:850; font-size:.86rem; cursor:pointer; }
.tf-account-creator-action { border:0; background:#d7b65e; color:#17181c; }
.tf-account-creator-secondary { border:1px solid #3a3c46; background:transparent; color:#b9bdc6; }
.tf-account-creator-secondary-form { margin:0; }
@media (max-width:440px) { .tf-auth-creator-options { grid-template-columns:1fr; } .tf-auth-creator-option > span { min-height:54px; } }


/* =========================================================
   SIGN IN - PROMINENT CREATE FREE ACCOUNT
   ========================================================= */

.tf-auth-create-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 11px;
    color: #8e93a0;
    font-size: .75rem;
    text-align: center;
}

.tf-auth-create-divider::before,
.tf-auth-create-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #343741;
}

.tf-auth-create-account {
    min-height: 58px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #d7b65e;
    border-radius: 999px;
    padding: 10px 16px;
    color: #f7df96;
    background: rgba(215, 182, 94, .08);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 950;
    text-decoration: none;
}

.tf-auth-create-account small {
    margin-top: 4px;
    color: #a9aeb9;
    font-size: .66rem;
    line-height: 1.2;
    font-weight: 600;
}


/* =========================================================
   CREATOR CLAIM - MODAL UX FIX
   ========================================================= */

.creator-claim-modal[hidden] {
    display: none !important;
}

.creator-claim-modal-open {
    overflow: hidden;
}

.creator-claim-modal-backdrop {
    border: 0;
    padding: 0;
    cursor: default;
}

.creator-claim-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f0f2f5;
    color: #343a46;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.creator-claim-modal-cancel {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.creator-claim-result-card > .creator-claim-secondary {
    grid-column: 1 / -1;
}


/* =========================================================
   CREATOR CLAIM - 24 HOUR / TOTALLYFANSADMIN POLISH
   ========================================================= */

.creator-claim-expiration-note {
    margin: 12px 0 14px;
    border-radius: 12px;
    padding: 11px 12px;
    background: #fff8df;
    color: #6f5915;
    font-size: .8rem;
    line-height: 1.4;
}

.creator-claim-expiration-note strong {
    display: block;
    margin-bottom: 2px;
    color: #5d490d;
}

/* =========================================================
   CREATOR PROFILE MANAGEMENT
   ========================================================= */
.creator-manage-page{min-height:calc(100vh - 68px);padding:18px 14px 120px}.creator-manage-shell{width:min(760px,100%);margin:0 auto}.creator-manage-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.creator-manage-heading h1{margin:2px 0 0;font-size:clamp(1.55rem,5vw,2.2rem)}.creator-manage-back{flex:0 0 auto;color:#c9cbd2;text-decoration:none;font-size:.82rem;font-weight:800;padding-top:7px}.creator-manage-required-note,.creator-manage-error{border-radius:14px;padding:11px 13px;margin-bottom:12px;font-size:.82rem;line-height:1.4}.creator-manage-required-note{background:#fff8df;color:#6f5915}.creator-manage-error{background:#fff1f0;color:#8f1d16}.creator-manage-card{margin-bottom:13px;border-radius:18px;padding:17px;background:#fff;color:#111827;box-shadow:0 12px 34px rgba(0,0,0,.18)}.creator-manage-card h2{margin:3px 0 12px;font-size:1.12rem;color:#111827}.creator-manage-card .eyebrow{color:#7d8490}.creator-manage-section-title{display:flex;justify-content:space-between;gap:12px;align-items:center}.creator-manage-small-action,.creator-manage-save,.creator-manage-secondary{appearance:none;border:0;border-radius:999px;min-height:42px;padding:0 16px;font-weight:850;cursor:pointer}.creator-manage-small-action,.creator-manage-save{background:#111827;color:#fff}.creator-manage-secondary{background:#eceef2;color:#111827}.creator-manage-help{margin:4px 0 12px;color:#6e7785;font-size:.78rem;line-height:1.4}.creator-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.creator-manage-field{min-width:0}.creator-manage-field.wide{grid-column:1/-1}.creator-manage-field>span{display:block;margin-bottom:6px;color:#303744;font-size:.78rem;font-weight:850}.creator-manage-field input,.creator-manage-field textarea,.creator-manage-field select{width:100%;box-sizing:border-box;border:1px solid #d7dbe2;border-radius:11px;padding:10px 11px;background:#fff;color:#111827;font:inherit;outline:none}.creator-manage-field textarea{resize:vertical}.creator-manage-field input:focus,.creator-manage-field textarea:focus,.creator-manage-field select:focus{border-color:#111827;box-shadow:0 0 0 3px rgba(17,24,39,.08)}.creator-manage-field.missing input,.creator-manage-field.missing textarea,.creator-manage-field.missing select,.creator-manage-field.missing .creator-manage-choice-grid,.creator-manage-field.missing .creator-manage-bool{border-color:#c0372b;box-shadow:0 0 0 2px rgba(192,55,43,.1)}.creator-manage-username{display:flex;align-items:center;border:1px solid #d7dbe2;border-radius:11px;overflow:hidden}.creator-manage-username>span{padding-left:11px;color:#7b8492;font-weight:800}.creator-manage-username input{border:0;box-shadow:none!important}.creator-manage-field small{display:block;margin-top:4px;color:#838a96;font-size:.68rem;overflow-wrap:anywhere}.creator-manage-choice-grid{display:flex;flex-wrap:wrap;gap:7px;min-height:42px;padding:3px;border:1px solid transparent;border-radius:10px}.creator-manage-choice{border:1px solid #d5d9e0;border-radius:999px;background:#f6f7f9;color:#444c59;padding:7px 11px;font-size:.75rem;font-weight:800;cursor:pointer}.creator-manage-choice.selected{background:#111827;border-color:#111827;color:#fff}.creator-manage-bool{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:3px;border:1px solid transparent;border-radius:10px}.creator-manage-bool button{border:1px solid #d5d9e0;border-radius:10px;background:#f5f6f8;color:#4b5360;min-height:39px;font-weight:850;cursor:pointer}.creator-manage-bool button.selected{background:#111827;border-color:#111827;color:#fff}.creator-harvested-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:17px}.creator-harvested-stats>div{border-radius:11px;padding:9px 5px;background:#f3f4f6;text-align:center}.creator-harvested-stats strong,.creator-harvested-stats span{display:block}.creator-harvested-stats strong{color:#111827;font-size:.9rem}.creator-harvested-stats span{margin-top:2px;color:#737b88;font-size:.64rem}.creator-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.creator-photo-tile{position:relative;aspect-ratio:400/472;overflow:hidden;border-radius:12px;background:#eceff3;touch-action:pan-y}.creator-photo-tile img{width:100%;height:100%;display:block;object-fit:cover}.creator-photo-drag{position:absolute;z-index:4;top:6px;left:6px;min-width:30px;min-height:28px;border-radius:999px;background:rgba(0,0,0,.68);color:#fff;display:grid;place-items:center;cursor:grab;font-weight:900}.creator-photo-main{position:absolute;z-index:3;left:7px;bottom:7px;border-radius:999px;padding:4px 7px;background:rgba(17,24,39,.86);color:#fff;font-size:.58rem;font-weight:900;letter-spacing:.04em}.creator-photo-delete{position:absolute;z-index:4;top:6px;right:6px;width:29px;height:29px;border:0;border-radius:50%;background:rgba(143,29,22,.9);color:#fff;font-size:1.15rem;line-height:1;cursor:pointer}.creator-manage-savebar{position:sticky;bottom:calc(78px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px;border-radius:16px;background:rgba(11,11,16,.95);backdrop-filter:blur(8px)}.creator-manage-savebar .creator-manage-save{min-width:150px}.creator-manage-save-status{color:#b8bdc8;font-size:.76rem}.creator-photo-modal{position:fixed;inset:0;z-index:5200;display:grid;place-items:center;padding:15px}.creator-photo-modal[hidden]{display:none!important}.creator-photo-modal-open{overflow:hidden}.creator-photo-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(3,6,12,.82);backdrop-filter:blur(4px)}.creator-photo-modal-card{position:relative;width:min(430px,100%);max-height:calc(100vh - 30px);overflow-y:auto;border-radius:20px;padding:16px;background:#fff;color:#111827;box-shadow:0 25px 80px rgba(0,0,0,.5)}.creator-photo-modal-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.creator-photo-modal-heading h2{margin:2px 0 10px}.creator-photo-modal-close{width:36px;height:36px;border:0;border-radius:50%;background:#eef0f3;color:#333a46;font-size:1.4rem;cursor:pointer}.creator-crop-host{width:min(350px,100%);aspect-ratio:400/472;margin:0 auto;overflow:hidden;background:#111;border-radius:12px}.creator-crop-host img{display:block;max-width:100%}.creator-crop-controls,.creator-photo-modal-actions{display:flex;justify-content:center;gap:9px;margin-top:11px}.creator-crop-controls button{border:1px solid #d5d9e0;border-radius:999px;padding:8px 13px;background:#f5f6f8;color:#333b48;font-weight:800;cursor:pointer}.creator-photo-modal-actions>*{flex:1}@media(max-width:600px){.creator-manage-grid{grid-template-columns:1fr}.creator-manage-field.wide{grid-column:auto}.creator-harvested-stats{grid-template-columns:repeat(3,1fr)}.creator-photo-grid{grid-template-columns:repeat(3,1fr)}}


/* =========================================================
   MULTI-CREATOR PROFILE MANAGEMENT
   ========================================================= */

.tf-account-creator-profiles-button {
    min-height: 52px;
    font-size: 1rem;
    font-weight: 950;
}

.creator-profiles-page {
    min-height: calc(100vh - 68px);
    padding: 18px 14px 115px;
}

.creator-profiles-shell {
    width: min(680px, 100%);
    margin: 0 auto;
}

.creator-profiles-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.creator-profiles-heading h1 {
    margin: 2px 0 4px;
    font-size: clamp(1.55rem, 5vw, 2.1rem);
}

.creator-profiles-heading p {
    margin: 0;
    color: #a7adba;
    font-size: .82rem;
}

.creator-profiles-back {
    flex: 0 0 auto;
    padding-top: 7px;
    color: #c9cbd2;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800;
}

.creator-profiles-list {
    display: grid;
    gap: 12px;
}

.creator-profiles-card,
.creator-profiles-empty {
    border-radius: 18px;
    padding: 14px;
    background: #fff;
    color: #111827;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

.creator-profiles-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 13px;
    align-items: center;
}

.creator-profiles-image {
    width: 82px;
    aspect-ratio: 400 / 472;
    overflow: hidden;
    border-radius: 12px;
    background: #edf0f3;
}

.creator-profiles-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.creator-profiles-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #798290;
    font-size: 28px;
}

.creator-profiles-info h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
}

.creator-profiles-username {
    margin-top: 2px;
    color: #66707e;
    font-size: .8rem;
    font-weight: 750;
}

.creator-profiles-status {
    margin-top: 6px;
    color: #188443;
    font-size: .72rem;
    font-weight: 850;
}

.creator-profiles-card .creator-profiles-primary {
    grid-column: 1 / -1;
}

.creator-profiles-primary,
.creator-profiles-add {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
    font-weight: 900;
}

.creator-profiles-primary {
    background: #111827;
    color: #fff;
}

.creator-profiles-add {
    margin-top: 13px;
    border: 1px solid #3a3d47;
    color: #f0f1f4;
    background: #17181d;
}

.creator-profiles-empty h2 {
    margin: 0 0 5px;
}

.creator-profiles-empty p {
    margin: 0 0 14px;
    color: #65707e;
    line-height: 1.4;
    font-size: .84rem;
}


/* =========================================================
   CREATOR MANAGEMENT - SCHEMA UX TYPES
   ========================================================= */

.creator-schema-slider {
    border: 1px solid #d7dbe2;
    border-radius: 12px;
    padding: 12px;
    background: #f7f8fa;
}

.creator-schema-slider input[type="range"] {
    width: 100%;
    margin: 0;
}

.creator-schema-slider-value {
    margin-top: 7px;
    text-align: center;
    color: #111827;
    font-size: .85rem;
    font-weight: 900;
}

.creator-manage-field.missing .creator-schema-slider {
    border-color: #c0372b;
    box-shadow: 0 0 0 2px rgba(192, 55, 43, .1);
}


/* =========================================================
   CREATOR PROFILE FILTER-ORDER POLISH
   ========================================================= */

.creator-manage-expand {
    margin-top: 7px;
    border: 0;
    padding: 5px 2px;
    background: transparent;
    color: #243047;
    font-size: .76rem;
    font-weight: 900;
    text-decoration: underline;
    cursor: pointer;
}


/* =========================================================
   CREATOR PROFILE - COUNTRY EXPAND BUTTON
   ========================================================= */

.creator-manage-expand-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 10px;
}

.creator-manage-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #c9ced8;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .08);
}

.creator-manage-expand:hover,
.creator-manage-expand:focus-visible {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.creator-manage-expand-icon {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
}


/* =========================================================
   CREATOR PROFILE - STICKY WARNING + SAVE CTA POLISH
   ========================================================= */

/* Keep title/back navigation visible while editing. */
.creator-manage-heading {
    position: sticky;
    top: var(--tf-header-height, 50px);
    z-index: 86;
    margin: -18px -14px 0;
    padding: 18px 14px 10px;
    background: rgba(10, 10, 15, .98);
    backdrop-filter: blur(10px);
}

/* Keep the required-profile message immediately beneath the title. */
.creator-manage-required-note {
    position: sticky;
    top: calc(var(--tf-header-height, 50px) + 68px);
    z-index: 85;
    margin: 0 -14px 12px;
    padding: 11px 14px;
    border: 1px solid #d4a0a6;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: #fff3f4;
    color: #7f1d2d;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
}

.creator-manage-required-note strong {
    color: #7f1d2d;
}

/* Warning, not success. */
.creator-manage-warning-icon {
    background: #8d2637 !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
}

/* Distinguish the sticky action bar from the dark page. */
.creator-manage-savebar {
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(24, 25, 31, .98);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .38);
}

/* High-contrast, centered Save Changes CTA. */
.creator-manage-savebar .creator-manage-save {
    min-width: 200px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0 26px;
    border: 1px solid #efcf67;
    background: #e4bf4f;
    color: #17181d;
    font-size: .94rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    box-shadow: 0 3px 14px rgba(228, 191, 79, .28);
}

.creator-manage-savebar .creator-manage-save:hover,
.creator-manage-savebar .creator-manage-save:focus-visible {
    background: #f0ce63;
}

.creator-manage-savebar .creator-manage-save:disabled {
    opacity: .72;
    cursor: wait;
}

/* Status text must not push the button away from center. */
.creator-manage-save-status {
    position: absolute;
    left: 14px;
    max-width: calc(50% - 120px);
}

@media (max-width: 520px) {

    .creator-manage-required-note {
        top: calc(var(--tf-header-height, 50px) + 64px);
    }

    .creator-manage-savebar {
        flex-direction: column;
    }

    .creator-manage-save-status {
        position: static;
        max-width: none;
    }

    .creator-manage-savebar .creator-manage-save {
        width: 100%;
        max-width: 320px;
    }
}


/* =========================================================
   CREATOR PROFILE - STICKY ALIGNMENT + BOTTOM NAV FLUSH FIX
   ========================================================= */

/*
   The sticky title block is approximately 84px tall on mobile.
   Place the required-profile warning immediately beneath it so
   it cannot slide under and get clipped while scrolling.
*/
.creator-manage-required-note {
    top: calc(var(--tf-header-height, 50px) + 84px);
}

/*
   Keep a little breathing room between the sticky warning and
   the first white profile card while the page is scrolling.
*/
.creator-manage-required-note + .creator-manage-card {
    margin-top: 12px;
}

/*
   The bottom navigation is fixed and approximately 58px tall.
   Dock the save bar directly to its top edge instead of leaving
   the previous visual gap.
*/
.creator-manage-savebar {
    bottom: calc(58px + env(safe-area-inset-bottom));
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/*
   Remove any page/background strip that can show between the
   sticky save bar and the fixed bottom navigation.
*/
.creator-manage-page {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

@media (max-width: 520px) {

    .creator-manage-required-note {
        top: calc(var(--tf-header-height, 50px) + 82px);
    }

    .creator-manage-savebar {
        bottom: calc(58px + env(safe-area-inset-bottom));
    }
}


/* =========================================================
   CREATOR MANAGEMENT - SUCCESS VS WARNING MODAL ICON
   ========================================================= */

.creator-manage-success-icon {
    background: #23864a !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: 950 !important;
}

.creator-manage-warning-icon {
    background: #8d2637 !important;
    color: #ffffff !important;
}


/* =========================================================
   ADMIN CREATOR CLAIMS
   ========================================================= */

.tf-header-admin-nav {
    color: #e4bf4f;
}

.tf-admin-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 14px 90px;
}

.tf-admin-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.tf-admin-heading h1 {
    margin: 4px 0;
}

.tf-admin-heading p {
    margin: 0;
    color: #aaaab3;
}

.tf-admin-count {
    padding: 7px 11px;
    border: 1px solid rgba(228, 191, 79, .45);
    border-radius: 999px;
    color: #e4bf4f;
    font-weight: 900;
    white-space: nowrap;
}

.tf-admin-status,
.tf-admin-empty {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 12px;
}

.tf-admin-status.success,
.tf-admin-empty {
    background: rgba(35, 134, 74, .12);
    border: 1px solid rgba(35, 134, 74, .4);
}

.tf-admin-status.warning {
    background: rgba(141, 38, 55, .14);
    border: 1px solid rgba(141, 38, 55, .5);
}

.tf-admin-empty {
    display: grid;
    gap: 5px;
}

.tf-admin-claims {
    display: grid;
    gap: 14px;
}

.tf-admin-claim-card {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 14px;
    background: #17181d;
}

.tf-admin-claim-title,
.tf-admin-claim-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tf-admin-claim-title h2 {
    margin: 0 0 3px;
}

.tf-admin-claim-title a {
    color: #e4bf4f;
    text-decoration: none;
}

.tf-admin-awaiting {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(228, 191, 79, .13);
    color: #e4bf4f;
    font-size: .78rem;
    font-weight: 900;
}

.tf-admin-claim-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.tf-admin-claim-grid div {
    padding: 10px;
    border-radius: 9px;
    background: #101116;
}

.tf-admin-claim-grid span,
.tf-admin-claim-grid strong {
    display: block;
}

.tf-admin-claim-grid span {
    margin-bottom: 4px;
    color: #8f9099;
    font-size: .75rem;
    text-transform: uppercase;
}

.tf-admin-claim-grid strong {
    overflow-wrap: anywhere;
    font-size: .86rem;
}

.tf-admin-claim-actions {
    justify-content: flex-start;
}

.tf-admin-secondary-button,
.tf-admin-approve-button,
.tf-admin-reject-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 9px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.tf-admin-secondary-button {
    border: 1px solid rgba(255, 255, 255, .18);
    background: #22232a;
    color: #fff;
}

.tf-admin-approve-button {
    border: 1px solid #efcf67;
    background: #e4bf4f;
    color: #17181d;
}

.tf-admin-reject-panel {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-top: 12px;
}

.tf-admin-reject-panel summary {
    color: #d8a3aa;
    cursor: pointer;
    font-weight: 850;
}

.tf-admin-reject-panel form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.tf-admin-reject-panel label {
    display: grid;
    gap: 5px;
    color: #c6c7ce;
    font-size: .84rem;
    font-weight: 800;
}

.tf-admin-reject-panel textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    background: #0f1015;
    color: #fff;
    resize: vertical;
}

.tf-admin-reject-button {
    justify-self: start;
    border: 1px solid #a63d4e;
    background: #8d2637;
    color: #fff;
}

/* =========================================================
   USER NOTIFICATION POPUP
   ========================================================= */

.tf-user-notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(5px);
}

.tf-user-notification-card {
    width: min(430px, 100%);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: #17181d;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .48);
    text-align: center;
}

.tf-user-notification-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #23864a;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 950;
}

.tf-user-notification-card h2 {
    margin: 0 0 8px;
}

.tf-user-notification-card p {
    margin: 0;
    color: #c7c8cf;
    line-height: 1.5;
}

.tf-user-notification-actions {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
}

.tf-user-notification-primary,
.tf-user-notification-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border-radius: 9px;
    font-weight: 900;
    text-decoration: none;
}

.tf-user-notification-primary {
    border: 1px solid #efcf67;
    background: #e4bf4f;
    color: #17181d;
}

.tf-user-notification-secondary {
    border: 1px solid rgba(255, 255, 255, .18);
    background: #25262d;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 650px) {
    .tf-admin-claim-grid {
        grid-template-columns: 1fr;
    }

    .tf-admin-heading,
    .tf-admin-claim-title {
        align-items: flex-start;
    }

    .tf-admin-claim-actions,
    .tf-user-notification-actions {
        flex-wrap: wrap;
    }
}


.discovery-sort-wrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.discovery-sort-wrap label {
    color: #a9aab1;
    font-size: .82rem;
    font-weight: 800;
}

.discovery-sort-select {
    min-height: 40px;
    max-width: 285px;
    padding: 0 34px 0 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    background: #17181d;
    color: #fff;
    font-weight: 800;
}

.discovery-sort-select option:disabled {
    color: #777982;
}

@media (max-width: 560px) {
    .results-header {
        gap: 8px;
    }

    .discovery-sort-wrap label {
        display: none;
    }

    .discovery-sort-select {
        max-width: 210px;
        font-size: .78rem;
    }
}


/* =========================================================
   DISCOVERY RESULTS LOADING SPINNER
   ========================================================= */

.results-status.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 34px;
}

.results-status.loading::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    box-sizing: border-box;
    border: 3px solid rgba(255, 255, 255, .20);
    border-top-color: #e4bf4f;
    border-radius: 50%;
    animation: discovery-results-spin .75s linear infinite;
}

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


/* TotallyFans+ locked sort choices remain selectable so clicking one can
   open the upgrade modal. Chromium honors option text color in the dropdown. */
.discovery-sort-select option.tf-sort-option-locked {
    color: #777a84;
}


/* =========================================================
   DISCOVERY CUSTOM SORT MENU / PREMIUM LOCKS
   ========================================================= */
.discovery-sort-native-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.discovery-sort-custom {
    position: relative;
    min-width: min(285px, 58vw);
}

.discovery-sort-trigger {
    width: 100%;
    min-height: 40px;
    padding: 8px 34px 8px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    background: #17181d;
    color: #fff;
    text-align: left;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}

.discovery-sort-trigger::after {
    content: "▾";
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #a9aab1;
}

.discovery-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    width: max(100%, 285px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: #17181d;
    box-shadow: 0 16px 40px rgba(0,0,0,.50);
}

.discovery-sort-menu[hidden] {
    display: none;
}

.discovery-sort-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: transparent;
    color: #e7e8ed;
    text-align: left;
    font: inherit;
    font-size: .80rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.discovery-sort-item:last-child {
    border-bottom: 0;
}

.discovery-sort-item:hover,
.discovery-sort-item.selected {
    background: rgba(255,255,255,.07);
}

.discovery-sort-item.locked {
    color: #686b74;
}

.discovery-sort-item::after {
    content: "";
    display: block;
    width: 22px;
    text-align: center;
}

.discovery-sort-item.locked::after {
    content: "🔒";
    color: #b69228;
    justify-self: end;
    width: 22px;
    min-width: 22px;
    text-align: center;
    line-height: 1;
}

.discovery-sort-item.locked:hover {
    background: rgba(255,213,74,.06);
    color: #8b8e97;
}

.tf-access-notice-panel {
    max-width: 420px;
    padding: 30px 24px 24px;
}

.tf-access-notice-lock {
    margin: 4px 0 8px;
    font-size: 2.25rem;
}

.tf-access-notice-upgrade {
    width: 100%;
    border: 0;
    cursor: pointer;
}

@media (max-width: 560px) {
    .discovery-sort-custom {
        min-width: min(205px, 57vw);
    }

    .discovery-sort-menu {
        width: min(285px, 88vw);
    }
}


/* Exact locked-sort layout fix: keep all labels on one line. */
.discovery-sort-menu {
    min-width: 315px;
}

@media (max-width: 560px) {
    .discovery-sort-menu {
        min-width: min(315px, 92vw);
    }
}


/* ============================================================
   DISCOVERY - CLEAR FILTERS
   ============================================================ */

.filters-heading-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.clear-filters-button {
    appearance: none;
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 213, 74, .50);
    border-radius: 999px;
    background: rgba(255, 213, 74, .08);
    color: #ffd54a;
    font: inherit;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.clear-filters-button:hover {
    border-color: rgba(255, 213, 74, .82);
    background: rgba(255, 213, 74, .15);
}

.clear-filters-button:active {
    transform: translateY(1px);
}


/* ============================================================
   DISCOVERY - COMPACT FILTER HEADER
   ============================================================ */
.filters-heading.filters-heading-compact {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
}

.filters-heading-compact .filters-heading-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.filters-heading-compact h1 {
    margin: 0 !important;
    line-height: 1.05;
}

.filters-heading-compact p {
    margin: 3px 0 0 0 !important;
    line-height: 1.15;
}

.filters-heading-compact .clear-filters-button {
    flex: 0 0 auto;
    min-height: 30px;
    margin: 0 !important;
    padding: 5px 11px;
}

@media (max-width: 420px) {
    .filters-heading-compact .filters-heading-title-row {
        gap: 7px;
    }

    .filters-heading-compact .clear-filters-button {
        padding-left: 9px;
        padding-right: 9px;
        font-size: .70rem;
    }
}


/* ============================================================
   FEATURED CREATOR
   Uses the existing creator-badge container/layout.
   ============================================================ */

.creator-badge.featured {
    border-color: rgba(255, 213, 74, .78);
    background: rgba(20, 16, 5, .90);
    color: #ffd54a;
    font-weight: 900;
    letter-spacing: .045em;
}


/* ============================================================
   DISCOVERY RESULTS - INITIAL SEARCH LOADING POLISH
   ============================================================ */

#results-status.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    margin: 10px 0 18px;
    font-size: 1.05rem;
    font-weight: 850;
    text-align: center;
}

#results-status.loading::before {
    width: 38px;
    height: 38px;
    border-width: 4px;
}


/* ============================================================
   SUPPORT
   ============================================================ */

.tf-header-support-nav {
    min-width: 58px;
    padding: 0;
    color: #d2d3da;
    font-size: .75rem;
}

.tf-header-support-nav:hover,
.tf-header-support-nav:focus {
    color: #f0f0f4;
}

.tf-header-support-nav.active {
    color: #ffd84d;
    text-shadow: 0 0 12px rgba(255, 216, 77, .42);
}

.tf-support-nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-support-nav-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tf-support-nav-icon svg circle:last-child {
    fill: currentColor;
    stroke: none;
}

.tf-support-page {
    min-height: calc(100dvh - 138px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18px 14px 28px;
}

.tf-support-image {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 520px) {
    .tf-header-actions {
        gap: 8px;
    }

    .tf-header-support-nav,
    .tf-header-account-nav {
        min-width: 54px;
    }

    .tf-support-page {
        padding: 10px 8px 22px;
    }
}