:root {
    color-scheme: dark;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #000;
    color: #f3f3f4;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #000;
}

body {
    overflow-x: hidden;
}

button,
a {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}


/* ==========================================================
   3-COLUMN SHELL
   ========================================================== */

.site-layout {
    display: grid;

    grid-template-columns:
        250px
        600px
        330px;

    gap: 0 18px;

    width: 1236px;
    max-width: 100%;

    margin: 0 auto;
}


/* ==========================================================
   LEFT SIDEBAR
   ========================================================== */

.left-inner {
    position: sticky;
    top: 0;

    height: 100vh;

    padding: 16px;
}

.main-brand {
    display: flex;
    align-items: center;

    width: fit-content;

    gap: 11px;

    margin-bottom: 22px;

    text-decoration: none;
}

.main-brand img {
    width: 44px;
    height: 44px;

    object-fit: contain;

    border-radius: 13px;
}

.main-brand strong,
.main-brand small {
    display: block;
}

.main-brand strong {
    font-size: 20px;
    line-height: 1;
}

.main-brand small {
    margin-top: 4px;

    color: #71717a;

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

    letter-spacing: .14em;
    text-transform: uppercase;
}

.primary-nav {
    display: grid;
    gap: 4px;
}

.primary-nav a {
    display: flex;
    align-items: center;

    width: fit-content;

    gap: 17px;

    padding: 12px 16px;

    border-radius: 999px;

    color: #e7e7e9;

    text-decoration: none;

    font-size: 19px;
}

.primary-nav a span {
    display: inline-grid;
    place-items: center;

    width: 25px;

    font-size: 22px;
}

.primary-nav a:hover,
.primary-nav a.active {
    background: #171719;
}

.new-pod-button {
    width: 210px;

    margin-top: 22px;

    padding: 14px 20px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            100deg,
            #ff2d95,
            #a855f7
        );

    color: white;

    font-weight: 800;
}


/* ==========================================================
   CENTER FEED — EXACTLY 600PX DESKTOP
   ========================================================== */

.feed-column {
    width: 600px;
    min-height: 100vh;

    border-left:
        1px solid #252529;

    border-right:
        1px solid #252529;
}

.feed-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 54px;
    border-bottom: 1px solid #252529;
    background: rgb(0 0 0 / 14%);
    backdrop-filter: blur(18px);
}

.feed-tab {
    position: relative;

    border: 0;

    background: transparent;
    color: #777780;

    font-weight: 600;
}

.feed-tab:hover {
    background: #0e0e10;
}

.feed-tab.active {
    color: #f4f4f5;
}

.feed-tab.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 48px;
    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ff2d95,
            #a855f7
        );

    transform:
        translateX(-50%);
}

.loading {
    padding: 60px 20px;

    color: #777780;

    text-align: center;
}


/* ==========================================================
   POD CARD
   ========================================================== */

.pod-card {
    position: relative;

    overflow: hidden;

    padding:
        18px
        18px
        17px;

    border-bottom:
        1px solid #252529;

    background:
        #050506;
}

.pod-card::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: -175px;
    right: -170px;

    width: 420px;
    height: 420px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255, 45, 149, .15),
            rgba(168, 85, 247, .08) 38%,
            rgba(56, 189, 248, .025) 60%,
            transparent 72%
        );

    filter: blur(10px);
}

.pod-card.is-active::after {
    content: "";

    position: absolute;

    z-index: 4;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            #ff2d95,
            #a855f7,
            #38bdf8
        );
}

.pod-head {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 10px;
}

.avatar {
    display: grid;
    place-items: center;

    flex:
        0 0 42px;

    width: 42px;
    height: 42px;

    overflow: hidden;

    border-radius: 50%;

    background: #292930;

    color: white;

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

    text-decoration: none;
}

.avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.author {
    min-width: 0;
}

.author strong,
.author span {
    display: block;
}

.author strong {
    overflow: hidden;

    color: #f5f5f5;

    font-size: 14px;

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

.author span {
    margin-top: 2px;

    color: #74747d;

    font-size: 12px;
}

.follow-button {
    margin-left: auto;

    padding:
        7px
        12px;

    border:
        1px solid #34343a;

    border-radius: 999px;

    background: transparent;
    color: #dddde0;

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

.pod-copy {
    position: relative;
    z-index: 2;

    margin-top: 15px;
}



.topic-row {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 10px;
}

.topic {
    padding:
        4px
        8px;

    border:
        1px solid #2d2d34;

    border-radius: 999px;

    color: #909099;

    font-size: 10px;
}


/* ==========================================================
   PLAYER — NORMAL FLOW, NO DESCRIPTION OVERLAP
   ========================================================== */

.player {
    position: relative;
    z-index: 2;

    margin-top: 15px;

    padding:
        12px
        13px;

    border:
        1px solid #2b2b31;

    border-radius: 16px;

    background:
        rgba(0, 0, 0, .82);
}

.player-top {
    display: flex;
    align-items: center;

    gap: 10px;
}

.play {
    display: grid;
    place-items: center;

    flex:
        0 0 40px;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 50%;

    background: #f5f5f6;
    color: #050506;

    font-weight: 900;
}

.waveform {
    --progress: 0%;

    position: relative;

    flex: 1;

    height: 52px;

    cursor: pointer;
}

.waveform::before,
.waveform-fill {
    content: "";

    position: absolute;

    inset: 0;


}

.waveform::before {
    background: #36363f;
}

.waveform-fill {
    width: var(--progress);

    right: auto;

    background:
        linear-gradient(
            180deg,
            #ff4ca0 5%,
            #c24dff 48%,
            #38bdf8 95%
        );
}

.waveform.no-wave {
    height: 44px;

    border-radius: 8px;

    background:
        repeating-linear-gradient(
            90deg,
            #34343b 0 3px,
            transparent 3px 7px
        );
}

.waveform.no-wave::before,
.waveform.no-wave .waveform-fill {
    display: none;
}

.player-time {
    min-width: 42px;

    color: #82828b;

    font-size: 10px;

    text-align: right;
}

.player-meta {
    display: flex;
    justify-content: space-between;

    margin-top: 6px;

    color: #6f6f78;

    font-size: 10px;
}

.preview-status.full {
    color: #ff72b5;
}

.pod-actions {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 21px;

    margin-top: 12px;
}

.pod-actions button,
.source-link {
    border: 0;

    padding: 0;

    background: transparent;
    color: #777780;

    font-size: 12px;

    text-decoration: none;
}

.pod-actions button:hover,
.source-link:hover {
    color: #ff4ca0;
}


/* ==========================================================
   RIGHT SIDEBAR
   ========================================================== */

.right-inner {
    position: sticky;
    top: 0;

    display: grid;

    gap: 14px;

    max-height: 100vh;

    padding:
        10px
        0
        30px;

    overflow-y: auto;
}

.search-box {
    display: flex;
    align-items: center;

    gap: 9px;

    height: 44px;

    padding:
        0
        15px;

    border:
        1px solid #303036;

    border-radius: 999px;

    background: #070708;
    color: #707079;

    font-size: 13px;
}

.side-card {
    padding:
        14px
        15px;

    border:
        1px solid #2b2b31;

    border-radius: 16px;

    background: #050506;
}

.side-card h2 {
    margin:
        0
        0
        11px;

    font-size: 18px;
}

.side-card p {
    margin: 0;

    color: #92929a;

    font-size: 13px;
    line-height: 1.45;
}

.side-signup {
    width: 100%;

    margin-top: 13px;

    padding:
        10px
        14px;

    border: 0;
    border-radius: 999px;

    background: #f4f4f5;
    color: #080809;

    font-weight: 800;
}

.trend {
    padding:
        9px
        0;

    border-top:
        1px solid #18181b;
}

.trend:first-child {
    border-top: 0;
}

.trend small,
.trend strong {
    display: block;
}

.trend small {
    color: #66666f;

    font-size: 10px;
}

.trend strong {
    margin-top: 3px;

    font-size: 13px;
}

.side-footer {
    padding:
        0
        7px;

    color: #5e5e67;

    font-size: 10px;
}

.side-footer a {
    color: #92929a;
}


/* ==========================================================
   SIGNUP / SIGN-IN POPUP
   ========================================================== */

.auth-overlay {
    position: fixed;

    z-index: 1000;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, .65);

    backdrop-filter:
        blur(8px);

    transition:
        opacity .18s ease;
}

.auth-overlay.hidden {
    display: none;
}

.auth-modal {
    position: relative;

    width: min(
        100%,
        430px
    );

    padding:
        31px
        30px
        24px;

    border:
        1px solid #323239;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(255, 45, 149, .14),
            rgba(168, 85, 247, .055) 35%,
            #0c0c0e 65%
        );

    box-shadow:
        0
        30px
        90px
        rgba(0, 0, 0, .72);
}

.auth-close {
    position: absolute;

    right: 15px;
    top: 13px;

    width: 35px;
    height: 35px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #85858e;

    font-size: 25px;
}

.auth-close:hover {
    background: #1d1d21;
    color: white;
}

.auth-logo {
    width: 54px;
    height: 54px;

    margin-bottom: 18px;
}

.auth-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 15px;
}

.auth-modal h2 {
    margin: 0;

    font-size: 29px;

    letter-spacing: -.035em;
}

.auth-modal > p {
    margin:
        9px
        0
        21px;

    color: #9c9ca5;

    font-size: 14px;
    line-height: 1.5;
}

.auth-actions {
    display: grid;

    gap: 9px;
}

.auth-primary,
.auth-secondary {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;

    border-radius: 999px;

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

    text-decoration: none;
}

.auth-primary {
    background:
        linear-gradient(
            100deg,
            #ff2d95,
            #a855f7
        );

    color: white;
}

.auth-secondary {
    border:
        1px solid #3a3a42;

    background: #111114;
    color: white;
}

.continue-listening {
    width: 100%;

    margin-top: 12px;

    border: 0;

    background: transparent;
    color: #92929b;

    font-size: 12px;

    text-decoration: underline;
}

.auth-modal > small {
    display: block;

    margin-top: 13px;

    color: #606069;

    font-size: 10px;

    text-align: center;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1120px) {

    .site-layout {
        grid-template-columns:
            88px
            600px;

        width: 688px;
    }

    .right-rail {
        display: none;
    }

    .main-brand div {
        display: none;
    }

    .primary-nav a {
        width: 54px;

        overflow: hidden;

        padding:
            12px
            14px;

        font-size: 0;
    }

    .primary-nav a span {
        font-size: 23px;
    }

    .new-pod-button {
        width: 52px;
        height: 52px;

        overflow: hidden;

        padding: 0;

        font-size: 0;
    }

    .new-pod-button::after {
        content: "+";

        font-size: 24px;
    }

}


@media (max-width: 720px) {

    .site-layout {
        display: block;

        width: 100%;
    }

    .left-rail,
    .right-rail {
        display: none;
    }

    .feed-column {
        width: 100%;

        border: 0;
    }

    .pod-card {
        padding:
            17px
            15px;
    }


}


.auth-status {
    margin-top: 12px;

    padding:
        10px
        12px;

    border:
        1px solid #34343b;

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .035);

    color: #aaaab3;

    font-size: 11px;
    line-height: 1.4;

    text-align: center;
}

.auth-status[hidden] {
    display: none;
}

button.auth-primary,
button.auth-secondary {
    width: 100%;
    cursor: pointer;
}

button.auth-primary {
    border: 0;
}

/* BEGIN TAPPODS V4I WAVEFORM + ORB */

/* Make feed cards capable of hosting the animated orb */
.feed-card,
.feed-item,
.post-card,
.pod-card,
article {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Keep actual content above the orb glow */
.feed-card > *,
.feed-item > *,
.post-card > *,
.pod-card > *,
article > * {
    position: relative;
    z-index: 1;
}

/* Animated radial-gradient orb behind the pod card */
.feed-card::before,
.feed-item::before,
.post-card::before,
.pod-card::before,
article::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -90px;
    top: -80px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    filter: blur(68px) saturate(125%);
    border-radius: 999px;
    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255, 45, 149, 0.52) 0%,
            rgba(202, 70, 255, 0.32) 38%,
            rgba(67, 81, 255, 0.14) 68%,
            rgba(0, 0, 0, 0) 100%
        );
    transform: translate3d(0, 0, 0) scale(1);
    animation: tappodsOrbFloat 18s ease-in-out infinite alternate;
}

/* Slightly stronger motion/brightness on hover */
.feed-card:hover::before,
.feed-item:hover::before,
.post-card:hover::before,
.pod-card:hover::before,
article:hover::before {
    opacity: 0.28;
    animation-duration: 10s;
}

/* Bigger waveform region */
.waveform,
.audio-waveform,
.pod-waveform,
[data-waveform],
.waveform-wrap,
.player-waveform {
    min-height: 56px !important;
    height: 56px !important;
    display: flex;
    align-items: center;
}

/* If waveform is rendered into canvas/svg, force more visual height */
.waveform canvas,
.audio-waveform canvas,
.pod-waveform canvas,
[data-waveform] canvas,
.waveform-wrap canvas,
.player-waveform canvas,
.waveform svg,
.audio-waveform svg,
.pod-waveform svg,
[data-waveform] svg,
.waveform-wrap svg,
.player-waveform svg {
    height: 56px !important;
    min-height: 56px !important;
    width: 100% !important;
    opacity: 1 !important;
}

/* Give the whole audio player more breathing room */
.audio-player,
.pod-player,
.player,
.feed-player,
[data-player] {
    min-height: 88px !important;
}

/* Make the playhead/progress area feel easier to read */
.audio-player,
.pod-player,
.player,
.feed-player,
[data-player] {
    border-radius: 18px;
}

/* Slight emphasis for timing/labels */
.player-time,
.audio-time,
.waveform-time,
.preview-label,
.full-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
    opacity: 0.96 !important;
}

/* Orb animation path */
@keyframes tappodsOrbFloat {
    0% {
        transform: translate3d(-18px, -12px, 0) scale(0.96);
    }
    18% {
        transform: translate3d(36px, -26px, 0) scale(1.04);
    }
    38% {
        transform: translate3d(78px, 12px, 0) scale(1.10);
    }
    58% {
        transform: translate3d(20px, 58px, 0) scale(1.03);
    }
    78% {
        transform: translate3d(-30px, 26px, 0) scale(0.98);
    }
    100% {
        transform: translate3d(54px, -8px, 0) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feed-card::before,
    .feed-item::before,
    .post-card::before,
    .pod-card::before,
    article::before {
        animation: none !important;
    }
}

/* END TAPPODS V4I WAVEFORM + ORB */


/* BEGIN TAPPODS V4J BRAND */

.main-brand img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
    border-radius: 13px;

}

/* END TAPPODS V4J BRAND */


/* BEGIN TAPPODS V4J DESCRIPTION */

.pod-description:empty {
    display: none !important;
}


/* END TAPPODS V4J DESCRIPTION */


/* BEGIN TAPPODS V4J WAVEFORM */

.waveform {
    min-height: 82px !important;
    height: 82px !important;
}

.player {
    padding-top: 14px !important;
    padding-bottom: 13px !important;
}

.player-top {
    min-height: 82px;
}

.waveform::before,
.waveform-fill {
    background-size: 100% 100%;
}

.play {
    flex: 0 0 44px !important;

    width: 44px !important;
    height: 44px !important;
}

/*
 * The darker unplayed waveform needs to remain visible,
 * not disappear into the player background.
 */
.waveform::before {
    background: #4b4b55 !important;
    opacity: .82;
}

.waveform-fill {
    background:
        linear-gradient(
            180deg,
            #ff4ca0 0%,
            #ff2f9d 28%,
            #c24dff 62%,
            #38bdf8 100%
        ) !important;

    filter:
        saturate(1.12)
        drop-shadow(
            0 0 5px
            rgba(255, 45, 149, .22)
        );
}

/* END TAPPODS V4J WAVEFORM */


/* BEGIN TAPPODS V4J ORB */

.pod-card::before {
    width: 460px !important;
    height: 460px !important;

    top: -190px !important;
    left: -125px !important;
    right: auto !important;

    opacity: .26 !important;

    filter:
        blur(72px)
        saturate(140%) !important;

    background:
        radial-gradient(
            circle at 42% 42%,
            rgba(255, 39, 151, .48) 0%,
            rgba(205, 63, 255, .29) 31%,
            rgba(100, 75, 255, .15) 53%,
            rgba(36, 184, 255, .07) 69%,
            transparent 78%
        ) !important;

    animation:
        tappodsOrbTravel
        8.5s
        cubic-bezier(.45, 0, .55, 1)
        infinite
        alternate !important;

    will-change:
        transform;
}


@keyframes tappodsOrbTravel {

    0% {
        transform:
            translate3d(
                -35px,
                -10px,
                0
            )
            scale(.94);
    }

    25% {
        transform:
            translate3d(
                105px,
                22px,
                0
            )
            scale(1.06);
    }

    50% {
        transform:
            translate3d(
                205px,
                105px,
                0
            )
            scale(1.13);
    }

    75% {
        transform:
            translate3d(
                90px,
                165px,
                0
            )
            scale(1.02);
    }

    100% {
        transform:
            translate3d(
                -10px,
                70px,
                0
            )
            scale(.97);
    }

}

/* END TAPPODS V4J ORB */


/* BEGIN TAPPODS V4L AUTH LOGO */

.auth-logo {
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    filter: invert(1);
}

/* END TAPPODS V4L AUTH LOGO */

.pod-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 0;
    color: #dfdfdf;
    font-size: 15px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/* BEGIN TAPPODS V5B TIMED TRANSCRIPT CARD */

.pod-card {
    height: 80dvh !important;
    box-sizing: border-box;

    display: flex !important;
    flex-direction: column;

    overflow: hidden;
}

.pod-card > .pod-head {
    flex: 0 0 auto;
}

.pod-card > .pod-copy {
    position: relative;

    z-index: 2;

    flex: 1 1 auto;

    min-height: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.transcript-stage {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    overflow: hidden;

    display: flex;
    align-items: center;

    margin:
        10px
        -2px
        8px;

    padding:
        8px
        14px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
}

.transcript-track {
    position: relative;

    width: 100%;

    will-change: transform;

    transition:
        transform
        .52s
        cubic-bezier(
            .22,
            .72,
            .2,
            1
        );
}


.transcript-section.is-near {
    color:
        rgba(
            226,
            226,
            234,
            .47
        );

    transform:
        scale(.98);
}

.transcript-section.is-current {
    color:
        #e8e8ed;

    transform:
        scale(1);
}

.transcript-section.is-past:not(
    .is-near
) {
    color:
        rgba(
            205,
            205,
            215,
            .18
        );
}

.transcript-word {
    position: relative;

    display: inline;

    border-radius: 5px;

    transition:
        color .09s linear,
        background .09s linear,
        box-shadow .09s linear;
}

.transcript-word + .transcript-word::before {
    content: " ";
}

.transcript-word.is-current {
    color: #fff;

    background:
        rgba(
            255,
            45,
            149,
            .22
        );

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            45,
            149,
            .12
        );

    text-shadow:
        0 0 16px
        rgba(
            255,
            76,
            160,
            .38
        );
}

.transcript-stage.has-timed
.pod-description {
    display: none !important;
}

.transcript-stage:not(
    .has-timed
)
.pod-description {
    display: block;

    width: min(
        92%,
        520px
    );

    margin: auto;

    overflow: hidden;

    color: #d8d8de;

    font-size:
        clamp(
            19px,
            3vw,
            25px
        );

    font-weight: 520;

    line-height: 1.45;

    text-align: center;

    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}

.pod-card > .player {
    position: relative;

    z-index: 2;

    flex: 0 0 auto;

    margin-top: 3px;
}

.player > .topic-row {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin:
        0 0
        8px;
}

.pod-card > .pod-actions {
    position: relative;

    z-index: 2;

    flex: 0 0 auto;

    margin-top: auto;

    padding-top: 11px;
}

@media (
    max-width: 720px
) {
    .pod-card {
        height: 80dvh !important;
    }

    .transcript-stage {
        margin-top: 5px;

        padding:
            5px
            5px;
    }

}

/* END TAPPODS V5B TIMED TRANSCRIPT CARD */

/* BEGIN TAPPODS V5C2 TRANSCRIPT SEEK SYNC */

.transcript-track {
    transition:
        transform
        .24s
        cubic-bezier(
            .22,
            .72,
            .2,
            1
        ) !important;
}

/* END TAPPODS V5C2 TRANSCRIPT SEEK SYNC */


/* BEGIN TAPPODS V5C3 TRANSCRIPT ORIGIN FIX */

/*
 * The JS transcript positioning code calculates section.offsetTop
 * from the top of the transcript track.
 *
 * Do not flex-center the entire track vertically. A long track
 * would otherwise begin hundreds of pixels above the viewport,
 * making the visible words much later than audio.currentTime.
 */
.transcript-stage {
    display: block !important;
    position: relative !important;
}

/*
 * Give the transcript track a stable 0,0 layout origin.
 * centerTranscriptSection() then moves this track solely with
 * translate3d().
 */
.transcript-stage.has-timed .transcript-track {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    margin: 0 !important;
}

/*
 * Preserve vertical centering of the short preview/fallback text
 * while a full timed transcript is unavailable.
 */
.transcript-stage:not(.has-timed) .pod-description {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(
        92%,
        520px
    );

    margin: 0 !important;

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

/* END TAPPODS V5C3 TRANSCRIPT ORIGIN FIX */


/* ==========================================================
   BEGIN TAPPODS V5G PLAYER SEEK CONTROLS
   ========================================================== */

.player {
    padding:
        16px
        18px
        14px !important;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        18px !important;

    background:
        linear-gradient(
            180deg,
            rgba(9,9,12,.98),
            rgba(5,5,7,.98)
        );

    min-height:
        0 !important;
}

.player-seek {
    width: 100%;
}

.player .waveform {
    --seek-progress: 0%;

    display: flex !important;
    align-items: center;

    width: 100%;

    min-height:
        38px !important;

    height:
        38px !important;

    cursor: default;
}

.player .waveform::before,
.player .waveform-fill {
    display:
        none !important;
}

.seek-slider {
    --seek-progress: 0%;

    display: block;

    width: 100%;
    height: 38px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;

    touch-action: pan-y;

    outline: none;
}

.seek-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ff2d95 0%,
            #c24dff var(--seek-progress),
            #3b3b44 var(--seek-progress),
            #3b3b44 100%
        );
}

.seek-slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;

    margin-top: -6px;

    border:
        2px solid
        #f9f9fb;

    border-radius: 50%;

    appearance: none;
    -webkit-appearance: none;

    background:
        #ff2d95;

    box-shadow:
        0 0 0 4px
        rgba(255,45,149,.14),
        0 3px 10px
        rgba(0,0,0,.5);
}

.seek-slider::-moz-range-track {
    width: 100%;
    height: 6px;

    border: 0;
    border-radius: 999px;

    background:
        #3b3b44;
}

.seek-slider::-moz-range-progress {
    height: 6px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ff2d95,
            #c24dff
        );
}

.seek-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;

    border:
        2px solid
        #f9f9fb;

    border-radius: 50%;

    background:
        #ff2d95;

    box-shadow:
        0 0 0 4px
        rgba(255,45,149,.14),
        0 3px 10px
        rgba(0,0,0,.5);
}

.seek-slider:focus-visible::-webkit-slider-thumb {
    box-shadow:
        0 0 0 5px
        rgba(255,45,149,.28),
        0 3px 10px
        rgba(0,0,0,.5);
}

.seek-slider:focus-visible::-moz-range-thumb {
    box-shadow:
        0 0 0 5px
        rgba(255,45,149,.28),
        0 3px 10px
        rgba(0,0,0,.5);
}





.player-controls {
    display: flex;

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

    gap: 34px;

    margin-top: 10px;
}

.player-controls button {
    -webkit-tap-highlight-color:
        transparent;
}

.skip-control {
    position: relative;

    display: inline-flex;

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

    flex:
        0 0 50px;

    width: 50px;
    height: 50px;

    padding: 0;

    border:
        1.5px solid
        #8d8d96;

    border-radius:
        50%;

    background:
        transparent;

    color:
        #f4f4f6;

    cursor:
        pointer;

    transition:
        transform .12s ease,
        background .12s ease,
        border-color .12s ease;
}

.skip-control:hover {
    border-color:
        #f4f4f6;

    background:
        rgba(255,255,255,.06);
}

.skip-control:active {
    transform:
        scale(.94);
}

.skip-arrow {
    position: absolute;

    top: -4px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        0 3px;

    background:
        #070709;

    color:
        #d9d9df;

    font-size:
        20px;

    line-height:
        1;
}

.skip-number {
    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1;
}

.player-controls .play {
    display: inline-flex;

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

    flex:
        0 0 58px !important;

    width:
        58px !important;

    height:
        58px !important;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #20232c,
            #11131a
        );

    color:
        #ffffff;

    font-size:
        19px;

    font-weight:
        900;

    line-height: 1;

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.38),
        inset 0 1px 0
        rgba(255,255,255,.07);

    cursor:
        pointer;

    transition:
        transform .12s ease,
        border-color .12s ease,
        box-shadow .12s ease;
}

.player-controls .play:hover {
    border-color:
        rgba(255,45,149,.48);

    box-shadow:
        0 7px 24px
        rgba(0,0,0,.42),
        0 0 0 3px
        rgba(255,45,149,.08);
}

.player-controls .play:active {
    transform:
        scale(.95);
}

.player-controls button:focus-visible {
    outline:
        2px solid
        #ff2d95;

    outline-offset:
        3px;
}

.player-meta {
    justify-content:
        flex-start !important;

    min-height: 14px;

    margin-top:
        8px !important;

    font-size:
        10px !important;
}

.player-meta .preview-status {
    color:
        #8d8d96;
}

.player-meta .preview-status.full {
    color:
        #ff72b5;
}

@media (max-width: 640px) {

    .player {
        padding:
            14px
            14px
            12px !important;
    }

    .player-controls {
        gap: 26px;
    }

    .skip-control {
        flex:
            0 0 48px;

        width: 48px;
        height: 48px;
    }

    .player-controls .play {
        flex:
            0 0 56px !important;

        width:
            56px !important;

        height:
            56px !important;
    }



}

/* ==========================================================
   END TAPPODS V5G PLAYER SEEK CONTROLS
   ========================================================== */

/* =========================================================
   TAPPODS V5G2 FEED ERROR / EMPTY / RETRY STATES
   ========================================================= */

.feed-state {
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin: 32px 16px;
    padding: 28px 24px;
    border: 1px solid #292932;
    border-radius: 18px;
    background: #0b0b0e;
    color: #f7f7fb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    min-height: 190px;
}

.feed-state__icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid #3a3a46;
    background: #141419;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d8d8e1;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.feed-state__copy {
    max-width: 430px;
}

.feed-state__title {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.feed-state__message {
    margin: 8px 0 0;
    color: #9797a7;
    font-size: 14px;
    line-height: 1.5;
}

.feed-state__retry {
    min-width: 118px;
    min-height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #f42da8,
        #a747ee
    );
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.feed-state__retry:hover {
    filter: brightness(1.08);
}

.feed-state__retry:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.feed-state__retry:disabled {
    opacity: .65;
    cursor: default;
}

.feed-state--error .feed-state__icon {
    border-color: rgba(244, 45, 168, .5);
    color: #ff58b9;
}

.feed-state--warning {
    min-height: 0;
    margin-top: 14px;
    margin-bottom: 22px;
    padding: 18px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
}

.feed-state--warning .feed-state__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 15px;
}

.feed-state--warning .feed-state__copy {
    flex: 1 1 auto;
    max-width: none;
}

.feed-state--warning .feed-state__title {
    font-size: 14px;
}

.feed-state--warning .feed-state__message {
    margin-top: 3px;
    font-size: 13px;
}

.feed-state--warning .feed-state__retry {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.feed-state--loading .feed-state__icon {
    animation:
        tappods-feed-pulse
        1.1s
        ease-in-out
        infinite;
}

@keyframes tappods-feed-pulse {
    0%,
    100% {
        opacity: .45;
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .feed-state {
        width: calc(100% - 24px);
        margin: 22px 12px;
        padding: 24px 18px;
    }

    .feed-state--warning {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .feed-state--warning .feed-state__retry {
        margin-left: 48px;
    }
}

/* END TAPPODS V5G2 FEED STATES */

/* ==========================================================
   TAPPODS PLAYER CANONICAL CSS V1

   This is the single source of truth for:
   - flat player
   - 7px seek rail
   - transcript word highlight
   - player footer
   - supplied SVG icons
   - play/pause position

   Do not append another player override generation below this.
   ========================================================== */

:root {
    --tp-player-pink: #f625a6;
    --tp-player-purple: #bc46ed;
    --tp-player-track: #4a4a55;
    --tp-player-icon: #f4f4f6;
    --tp-player-muted: #90909b;
}


/* ==========================================================
   PLAYER SHELL
   ========================================================== */



/* ==========================================================
   TOPICS

   Plain pink labels, not pills.
   ========================================================== */


.pod-card .topic-row > *,
.pod-card .topic-chip {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: var(--tp-player-pink) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    text-decoration: none !important;
}


/* ==========================================================
   ONE SEEK RAIL

   waveform wrapper = gray 7px rail
   waveform-fill    = pink/purple 7px played rail
   range input      = transparent hit target over same rail

   There is intentionally only ONE visible rail.
   ========================================================== */

.pod-card .player .waveform,
.pod-card .v5g5-player .waveform,
.pod-card .waveform {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: visible !important;

    background: var(--tp-player-track) !important;

    box-shadow: none !important;
}


/* Kill every waveform decoration. */

.pod-card .waveform::before,
.pod-card .waveform::after,
.pod-card .waveform-fill::before,
.pod-card .waveform-fill::after {
    content: none !important;
    display: none !important;
}


/* Played amount. Width remains controlled by existing JS. */

.pod-card .player .waveform-fill,
.pod-card .v5g5-player .waveform-fill,
.pod-card .waveform-fill {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            90deg,
            var(--tp-player-pink) 0%,
            var(--tp-player-purple) 100%
        ) !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;
}


/*
 * Keep a large click/drag target while the visible rail
 * remains exactly 7px.
 */

.pod-card .player .seek-slider,
.pod-card .v5g5-player .seek-slider,
.pod-card .seek-slider {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    top: 50% !important;

    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;

    z-index: 3 !important;
}


/* Chromium / Safari */

.pod-card .seek-slider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 7px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}

.pod-card .seek-slider::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;

    margin-top: -6.5px !important;

    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

    background: var(--tp-player-pink) !important;

    box-shadow:
        0 0 0 2px rgba(246, 37, 166, .20),
        0 2px 8px rgba(0, 0, 0, .45) !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}


/* Firefox */

.pod-card .seek-slider::-moz-range-track {
    width: 100% !important;
    height: 7px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
}

.pod-card .seek-slider::-moz-range-progress {
    height: 7px !important;

    border: 0 !important;

    background: transparent !important;
}

.pod-card .seek-slider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;

    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

    background: var(--tp-player-pink) !important;

    box-shadow:
        0 0 0 2px rgba(246, 37, 166, .20),
        0 2px 8px rgba(0, 0, 0, .45) !important;
}


/* ==========================================================
   PLAYER TIMES
   ========================================================== */


.pod-card .player-elapsed,
.pod-card .player-time {
    justify-self: start !important;
    text-align: left !important;
}




/* ==========================================================
   UNUSED VISIBLE PLAYER CONTROLS

   Keep existing JS/DOM contract but do not show the
   older 30-second controls or preview label.
   ========================================================== */

.pod-card .skip-back,
.pod-card .skip-forward,
.pod-card .preview-status {
    display: none !important;
}


/* ==========================================================
   ORIGINAL SOCIAL ACTION ROW

   The enhanced footer is now canonical.
   ========================================================== */

.pod-card > .pod-actions.v5g5-original-actions {
    display: none !important;
}


/* ==========================================================
   FOOTER ROOT

   Three actual regions:
       LEFT | TRUE CENTER | RIGHT

   No absolute positioning.
   No descendant :not() hiding selector.
   ========================================================== */



/* LEFT: like, comment, save */

.pod-card .tp-v5g12-left,
.pod-card .v5g11-actions-left {
    position: relative !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    justify-self: stretch !important;

    gap: 20px !important;

    min-width: 0 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* CENTER: play/pause */

.pod-card .tp-v5g12-center,
.pod-card .v5g11-actions-center {
    position: relative !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    justify-self: center !important;
    align-self: center !important;

    /*
     * Deliberately slightly above icon baseline,
     * matching the requested reference layout.
     */
    transform: translateY(-10px) !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 2 !important;
}


/* RIGHT: share */

.pod-card .tp-v5g12-right,
.pod-card .v5g11-actions-right {
    position: relative !important;

    grid-column: 3 !important;
    grid-row: 1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    justify-self: stretch !important;

    gap: 20px !important;

    min-width: 0 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ==========================================================
   ACTION BUTTON RESET
   ========================================================== */

.pod-card .tp-v5g12-left > button,
.pod-card .tp-v5g12-left > a,
.pod-card .tp-v5g12-right > button,
.pod-card .tp-v5g12-right > a,
.pod-card .v5g11-actions-left > button,
.pod-card .v5g11-actions-left > a,
.pod-card .v5g11-actions-right > button,
.pod-card .v5g11-actions-right > a {
    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: var(--tp-player-icon) !important;

    opacity: 1 !important;
    visibility: visible !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;

    transform: none !important;
}

.pod-card .tp-v5g12-left > button:hover,
.pod-card .tp-v5g12-left > a:hover,
.pod-card .tp-v5g12-right > button:hover,
.pod-card .tp-v5g12-right > a:hover {
    color: #ffffff !important;
}


/* ==========================================================
   USER-SUPPLIED SVG ICONS

   Do not apply a generic stroke to the whole SVG.
   These exact supplied path geometries are filled paths.
   ========================================================== */

.pod-card .tp-v5g15-icon,
.pod-card .tp-v5g12-icon {
    display: block !important;

    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;
    min-height: 28px !important;

    overflow: visible !important;

    color: inherit !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;
}

.pod-card .tp-v5g15-icon g,
.pod-card .tp-v5g15-icon path,
.pod-card .tp-v5g12-icon g,
.pod-card .tp-v5g12-icon path {
    opacity: 1 !important;
    visibility: visible !important;
}


/* Exact visible geometry supplied by user. */



/* These two paths are intentionally empty when inactive. */



/* Active Like */

.pod-card [data-action="like"].is-active, .pod-card [data-action="like"][aria-pressed="true"] {
    color: #ff005e !important;
}



/* Active Save */

.pod-card [data-action="save"].is-active,
.pod-card [data-action="save"][aria-pressed="true"] {
    color: var(--tp-player-pink) !important;
}



/* ==========================================================
   PLAY / PAUSE

   Grid provides true horizontal centering.
   No left:50%, no absolute positioning, no stacked transforms.
   ========================================================== */

.pod-card .tp-v5g12-center > button,
.pod-card .v5g11-actions-center > button,
.pod-card .v5g5-main-play {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;

    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #575762 !important;
    border-radius: 50% !important;

    outline: 0 !important;

    background: #3c3c43 !important;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .35) !important;

    color: #ffffff !important;

    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;
}

.pod-card .tp-v5g12-center > button:hover,
.pod-card .v5g11-actions-center > button:hover {
    background: #45454d !important;
}

.pod-card .tp-v5g12-center > button:focus,
.pod-card .v5g11-actions-center > button:focus {
    outline: 0 !important;
}

.pod-card .tp-v5g12-center > button:focus-visible,
.pod-card .v5g11-actions-center > button:focus-visible {
    outline: 2px solid rgba(246, 37, 166, .72) !important;
    outline-offset: 3px !important;
}


/* ==========================================================
   TRANSCRIPT ACTIVE WORD

   IMPORTANT:
   Nothing here is allowed to alter text geometry.

   No:
   - padding
   - border
   - font-size changes
   - font-weight changes
   - line-height changes
   - transforms

   Background and box-shadow do not consume layout space.
   ========================================================== */

.transcript-stage .transcript-word,
.transcript-track .transcript-word {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;

    transform: none !important;
}


/* Current word */

.transcript-stage .transcript-word.is-current,
.transcript-stage .transcript-word.is-active,
.transcript-stage .transcript-word.active,
.transcript-stage .transcript-word.current,
.transcript-stage .transcript-word[aria-current="true"],
.transcript-stage .transcript-word[data-active="true"],
.transcript-stage .transcript-word[data-current="true"],
.transcript-track [data-word].is-current,
.transcript-track [data-word].is-active,
.transcript-track [data-transcript-word].is-current,
.transcript-track [data-transcript-word].is-active {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: .16em !important;

    background:
        rgba(246, 37, 166, .34) !important;

    box-shadow:
        0 0 0 1px rgba(246, 37, 166, .42),
        0 0 12px rgba(246, 37, 166, .28) !important;

    color: #ffffff !important;

    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;

    vertical-align: baseline !important;

    transform: none !important;

    text-shadow:
        0 0 8px rgba(255, 255, 255, .08) !important;
}


/*
 * Do not create active-word decorations that consume space.
 * We intentionally do NOT disable the normal word-spacing
 * pseudo-element from the original transcript renderer.
 */

.transcript-word.is-current::after,
.transcript-word.is-active::after,
.transcript-word.active::after,
.transcript-word.current::after,
.transcript-word[aria-current="true"]::after,
.transcript-word[data-active="true"]::after,
.transcript-word[data-current="true"]::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 640px) {


    .pod-card .tp-v5g12-left,
    .pod-card .v5g11-actions-left,
    .pod-card .tp-v5g12-right,
    .pod-card .v5g11-actions-right {
        gap: 14px !important;
    }

    .pod-card .tp-v5g12-center > button,
    .pod-card .v5g11-actions-center > button {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }
}

/* END TAPPODS PLAYER CANONICAL CSS V1 */

/*
============================================================
TAPPODS PLAYER CANONICAL CSS V2

LIVE PLAYER CONTRACT
- one straight 7px seek rail
- elapsed left
- remaining true center
- duration right
- like/comment/save left
- play true center and vertically raised
- share right
- stable active-word highlight with zero metric changes
============================================================
*/


/* ---------------------------------------------------------
   SEEK RAIL
   --------------------------------------------------------- */

.pod-card .player-seek {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


.pod-card .player .waveform,
.pod-card .v5g5-player .waveform,
.pod-card .waveform {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #4a4a56 !important;

    box-shadow: none !important;

    opacity: 1 !important;
}


.pod-card .waveform::before,
.pod-card .waveform::after {
    content: none !important;
    display: none !important;
}


.pod-card .player .waveform-fill,
.pod-card .v5g5-player .waveform-fill,
.pod-card .waveform-fill {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            #ff2a9d 0%,
            #be3fe8 100%
        ) !important;

    background-image:
        linear-gradient(
            90deg,
            #ff2a9d 0%,
            #be3fe8 100%
        ) !important;

    box-shadow: none !important;

    transform: none !important;

    opacity: 1 !important;

    z-index: 1 !important;

    pointer-events: none !important;
}


.pod-card .player .seek-slider,
.pod-card .v5g5-player .seek-slider,
.pod-card .seek-slider {
    -webkit-appearance: none !important;
    appearance: none !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;

    width: 100% !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    opacity: 1 !important;

    cursor: pointer !important;

    z-index: 2 !important;
}


.pod-card .seek-slider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 7px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: transparent !important;

    box-shadow: none !important;
}


.pod-card .seek-slider::-moz-range-track {
    width: 100% !important;
    height: 7px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: transparent !important;

    box-shadow: none !important;
}


.pod-card .seek-slider::-moz-range-progress {
    height: 7px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: transparent !important;
}


.pod-card .seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 18px !important;
    height: 18px !important;

    margin-top: -5.5px !important;

    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

    background: #f7259b !important;

    box-shadow:
        0 0 0 2px rgba(247, 37, 155, 0.30) !important;

    cursor: pointer !important;
}


.pod-card .seek-slider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;

    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

    background: #f7259b !important;

    box-shadow:
        0 0 0 2px rgba(247, 37, 155, 0.30) !important;

    cursor: pointer !important;
}


/* ---------------------------------------------------------
   TIME ROW

   IMPORTANT:
   The video showed all three values stacked at the left.
   Explicitly remove every old absolute/inset/transform rule.
   --------------------------------------------------------- */





.pod-card .tp-v5g12-left,
.pod-card .tp-v5g12-center,
.pod-card .tp-v5g12-right {
    position: static !important;

    inset: auto !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
}


.pod-card .tp-v5g12-left {
    grid-column: 1 !important;

    justify-self: start !important;

    display: flex !important;

    align-items: center !important;

    gap: 24px !important;

    transform: none !important;
}


.pod-card .tp-v5g12-center {
    grid-column: 2 !important;

    justify-self: center !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    transform: translateY(-12px) !important;

    z-index: 3 !important;
}


.pod-card .tp-v5g12-right {
    grid-column: 3 !important;

    justify-self: end !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 24px !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   ACTION BUTTONS / SVG

   The supplied SVG uses filled geometry for the visible
   stroke paths. Do not globally apply fill:none to the SVG.
   --------------------------------------------------------- */

.pod-card .tp-v5g12-left > button,
.pod-card .tp-v5g12-left > a,
.pod-card .tp-v5g12-right > button,
.pod-card .tp-v5g12-right > a {
    -webkit-appearance: none !important;
    appearance: none !important;

    position: static !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #f4f4f6 !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    cursor: pointer !important;
}




/*
 * These two paths in the supplied SVG are intentionally
 * transparent helper/fill shapes.
 */



/*
 * These are the actual visible geometry paths from the
 * SVG supplied by the user.
 */



/* ---------------------------------------------------------
   PLAY / PAUSE

   True horizontal center, but intentionally raised.
   --------------------------------------------------------- */



.pod-card .tp-v5g12-center > button:focus,
.pod-card .tp-v5g12-center > button:focus-visible,
.pod-card .tp-v5g12-center > button:active {
    outline: 0 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   TRANSCRIPT WORD

   Active and inactive words have exactly identical layout
   metrics. The highlight is paint only.
   --------------------------------------------------------- */

.pod-card .transcript-word,
.pod-card .transcript-stage .transcript-word,
.pod-card .transcript-track .transcript-word {
    display: inline !important;

    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    font: inherit !important;

    font-size: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;

    line-height: inherit !important;

    letter-spacing: inherit !important;

    vertical-align: baseline !important;

    text-decoration: none !important;

    transform: none !important;

    translate: none !important;

    background: transparent !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    transition:
        background-color 80ms linear,
        box-shadow 80ms linear,
        color 80ms linear !important;
}


.pod-card .transcript-word.is-current,
.pod-card .transcript-word.is-active,
.pod-card .transcript-word.active,
.pod-card [data-word].is-current,
.pod-card [data-word].is-active {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    font: inherit !important;

    font-size: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;

    line-height: inherit !important;

    letter-spacing: inherit !important;

    vertical-align: baseline !important;

    transform: none !important;

    translate: none !important;

    color: #ffffff !important;

    background:
        rgba(174, 20, 108, 0.82) !important;

    box-shadow:
        0 0 0 3px rgba(174, 20, 108, 0.82) !important;

    border-radius: 4px !important;
}


/* ---------------------------------------------------------
   SMALL SCREEN
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .pod-card .tp-v5g12-left {
        gap: 18px !important;
    }

    .pod-card .tp-v5g12-right {
        gap: 18px !important;
    }

    .pod-card .tp-v5g12-center {
        transform:
            translateY(-10px) !important;
    }


}

/* ------------------------------------------------------------
   USER-APPROVED TIME ROW + SVG VALUES
   ------------------------------------------------------------ */






/* Footer SVG geometry */

.pod-card .tp-v5g12-left svg, .pod-card .tp-v5g12-right svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    overflow: visible !important;
    color: currentColor !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Exact supplied SVG paint model */

.pod-card #tp-like-stroke,
.pod-card #tp-comment,
.pod-card #tp-save-stroke,
.pod-card #tp-share {
    fill: currentColor !important;
    stroke: none !important;
}

.pod-card #tp-like-fill,
.pod-card #tp-save-fill {
    fill: transparent !important;
    stroke: none !important;
}


/* Active Like */

.pod-card [data-action="like"].is-active #tp-like-fill,
.pod-card [data-action="like"][aria-pressed="true"] #tp-like-fill {
    fill: currentColor !important;
}


/* Active Save */

.pod-card [data-action="save"].is-active #tp-save-fill,
.pod-card [data-action="save"][aria-pressed="true"] #tp-save-fill {
    fill: currentColor !important;
}


/* END USER-APPROVED TIME ROW + SVG VALUES */


/* ------------------------------------------------------------
   TAPPODS V5G5 TIME ROW - USER APPROVED
   ------------------------------------------------------------ */


span.duration {
    text-align: right;
}

/* END TAPPODS V5G5 TIME ROW - USER APPROVED */





/* ------------------------------------------------------------
   TAPPODS PLAYER CURRENT LAYOUT VALUES
   ------------------------------------------------------------ */


/* Topics temporarily hidden */

.pod-card .topic-row {
    display: none !important;
}


/* Flat player */

.pod-card .v5g5-player,
.pod-card .player {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 4px 0 0 !important;
}


/* Player footer */

.pod-card .v5g5-player-footer.v5g11-footer-ready,
.pod-card .tp-v5g12-footer,
.pod-card .tp-v5g15-footer {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0;
    margin: 18px 0 -18px !important;
    padding: 0;
    border: 0 !important;
    border-top: none;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}


/* Main play / pause button */

.pod-card .tp-v5g12-center > button,
.pod-card .tp-v5g12-center .main-play {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: #3b3b42 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    line-height: 1;
    font-size: 17px !important;
    visibility: visible !important;
}


/* Active pause state */

button.play.v5g5-main-play.v5g7-true-center-play[aria-label="Pause"] {
    background: #fff !important;
    color: #000 !important;
}


/* END TAPPODS PLAYER CURRENT LAYOUT VALUES */


/* ------------------------------------------------------------
   TAPPODS TRANSCRIPT SECTION - CURRENT VALUES
   ------------------------------------------------------------ */

.transcript-section.is-past:not( .is-near ) {
    color: rgba(205, 205, 215, .18);
}

.transcript-section {
    width: min(94%, 540px);
    margin: 0 auto 34px;
    color: rgba(226, 226, 234, .25);
    font-size: clamp(22px, 3.8vw, 31px);
    font-weight: 560;
    line-height: 1.38;
    letter-spacing: -.018em;
    text-align: center;
    transform: scale(.965);
    transform-origin: center center;
    transition: opacity .34s ease, color .34s ease, transform .34s ease;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 10px;
}

/* END TAPPODS TRANSCRIPT SECTION - CURRENT VALUES */





/* END TAPPODS PLAYER CANONICAL CSS V2 */




/* ============================================================
   TAPPODS TRANSCRIPT NEAR STATE
   ============================================================ */

.transcript-section.is-near {
    color: rgba(226, 226, 234, .20);
    transform: scale(.90);
}

/* END TAPPODS TRANSCRIPT NEAR STATE */

/* TAPPODS EFFECTIVE PLAYER TIME ROW */

/*
 * USER-PROVIDED VALUES.
 *
 * The live player can carry both:
 *   .player-time-row
 *   .v5g5-time-row
 *
 * Apply the same contract to both.
 */

.player-time-row, .pod-card .v5g5-time-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #a5a5ae !important;
    padding: 10px 0 0;
}


/* elapsed */

.player-time-row .player-time,
.pod-card .v5g5-time-row .player-time {
    min-width: 0 !important;
    color: #f1f1f4 !important;
    font-size: 11px !important;
    text-align: left !important;

    /* neutralize legacy positioning only */
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;

    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
}


/* remaining */

.player-remaining,
.player-time-row .player-remaining,
.pod-card .v5g5-time-row .player-remaining {
    color: #a5a5ae !important;
    text-align: center !important;
    white-space: nowrap !important;

    /* neutralize legacy positioning only */
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;

    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
}


/* total */

.player-time-row .duration,
.pod-card .v5g5-time-row .duration {
    color: #a5a5ae !important;
    text-align: right !important;
    white-space: nowrap !important;

    /* neutralize legacy positioning only */
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;

    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
}

/* END TAPPODS EFFECTIVE PLAYER TIME ROW */

/* ==========================================================
   TAPPODS GLOBAL PLAYER + PROXIMITY SCROLL V2
   ========================================================== */

:root {
    --tp-global-player-height: 68px;
    --tp-global-player-gap: 16px;
}

.pod-card {
    height: 80dvh !important;

    box-sizing: border-box;

    display: flex !important;
    flex-direction: column;

    overflow: hidden;

    opacity: .16;

    transition:
        opacity 180ms ease;
}

article.pod-card.tp-v5g12-card.tp-v5g15-card.is-active,
article.pod-card.is-active,
.pod-card.is-active {
    opacity: 1 !important;
}

body {
    padding-bottom:
        calc(
            var(--tp-global-player-height)
            + 12px
        );
}

/* ----------------------------------------------------------
   GLOBAL PLAYER
   ---------------------------------------------------------- */

#tp-global-player {
    position: fixed;

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

    z-index: 100000;

    min-height:
        var(--tp-global-player-height);

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        minmax(170px, 1fr)
        auto
        minmax(210px, 1fr);

    align-items: center;

    gap:
        var(--tp-global-player-gap);

    padding:
        8px
        max(
            18px,
            env(safe-area-inset-right)
        )
        calc(
            8px
            +
            env(safe-area-inset-bottom)
        )
        max(
            18px,
            env(safe-area-inset-left)
        );

    color: #fff;

    background:
        rgba(8, 8, 11, .96);

    border-top:
        1px solid
        rgba(255, 255, 255, .10);

    box-shadow:
        0 -8px 28px
        rgba(0, 0, 0, .38);

    backdrop-filter:
        blur(16px);

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

.tp-global-player-side {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}

.tp-global-player-side--left {
    justify-content: flex-start;
}

.tp-global-player-side--right {
    justify-content: flex-end;
}

.tp-global-player-center {
    display: flex;

    align-items: center;
    justify-content: center;
}

#tp-global-play {
    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;
    border-radius: 999px;

    display: inline-flex;

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

    cursor: pointer;

    color: #050505;

    background: #fff;

    font: inherit;
    font-size: 21px;
    line-height: 1;

    transition:
        transform 120ms ease,
        opacity 120ms ease;
}

#tp-global-play:hover {
    transform: scale(1.04);
}

#tp-global-play:active {
    transform: scale(.97);
}

#tp-global-play[disabled] {
    cursor: default;
    opacity: .4;
}

.tp-global-autoplay {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    cursor: pointer;

    white-space: nowrap;

    user-select: none;

    color:
        rgba(255, 255, 255, .92);

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

.tp-global-autoplay input {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    width: 36px;
    height: 20px;

    margin: 0;

    border:
        1px solid
        rgba(255, 255, 255, .24);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .12);

    cursor: pointer;

    transition:
        background 140ms ease,
        border-color 140ms ease;
}

.tp-global-autoplay input::after {
    content: "";

    position: absolute;

    top: 2px;
    left: 2px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #fff;

    transition:
        transform 140ms ease;
}

.tp-global-autoplay input:checked {
    border-color: #ec27be;
    background: #ec27be;
}

.tp-global-autoplay input:checked::after {
    transform:
        translateX(16px);
}

.tp-global-active-title {
    min-width: 0;

    max-width:
        min(
            360px,
            30vw
        );

    overflow: hidden;

    color:
        rgba(255, 255, 255, .68);

    font-size: 12px;

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

.tp-global-volume {
    min-width: 190px;

    display: inline-flex;

    align-items: center;

    gap: 9px;
}

.tp-global-volume-icon {
    width: 22px;

    color:
        rgba(255, 255, 255, .80);

    font-size: 15px;

    text-align: center;
}

#tp-global-volume {
    width: 132px;

    accent-color: #ec27be;

    cursor: pointer;
}

#tp-global-volume-value {
    width: 34px;

    color:
        rgba(255, 255, 255, .58);

    font-size: 11px;

    text-align: right;
}

/*
 * Scroll positioning remains JS-controlled.
 * This margin gives native focus/navigation
 * reasonable alignment around the global footer.
 */
.pod-card {
    height: calc(100dvh - 110px) !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    opacity: .16;
    transition: opacity 180ms ease;
}

@media (max-width: 760px) {

    :root {
        --tp-global-player-height:
            64px;
    }

    #tp-global-player {
        grid-template-columns:
            1fr
            auto
            1fr;

        gap: 8px;

        padding-left: 10px;
        padding-right: 10px;
    }

    .tp-global-active-title,
    #tp-global-volume-value {
        display: none;
    }

    .tp-global-volume {
        min-width: 0;
        gap: 5px;
    }

    #tp-global-volume {
        width:
            min(
                26vw,
                105px
            );
    }

    .tp-global-autoplay {
        gap: 6px;

        font-size: 11px;
    }

    .tp-global-autoplay input {
        width: 32px;
        height: 18px;
    }

    .tp-global-autoplay input::after {
        width: 12px;
        height: 12px;
    }

    .tp-global-autoplay input:checked::after {
        transform:
            translateX(14px);
    }

    #tp-global-play {
        width: 44px;
        height: 44px;
    }
}




/* ==========================================================
   TAPPODS GLOBAL TRANSPORT V5
   ========================================================== */

/* ----------------------------------------------------------
   CARD PLAYER
   ---------------------------------------------------------- */

/*
 * Requested card-footer rule.
 */
.pod-card .v5g5-player-footer.v5g11-footer-ready,
.pod-card .tp-v5g12-footer,
.pod-card .tp-v5g15-footer {
    position: relative !important;
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0;
    margin: 18px 0 0 !important;
    padding: 0;
    border: 0 !important;
    border-top: none;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/*
 * Card-level play/pause stays in the DOM because the
 * existing application controller still uses it.
 *
 * The global footer is the user-facing transport.
 */
.pod-card .tp-v5g12-center > button,
.pod-card .tp-v5g12-center .main-play,
.pod-card button.play.v5g5-main-play.v5g7-true-center-play,
.pod-card .v5g5-main-play,
.pod-card .v5g7-true-center-play {
    display: none !important;
}

.pod-card .tp-v5g12-center {
    pointer-events: none !important;
}

/* ----------------------------------------------------------
   BALANCED DESKTOP LAYOUT
   ---------------------------------------------------------- */

.tp-balanced-shell {
    display: grid !important;

    grid-template-columns:
        minmax(
            0,
            var(--tp-balanced-side-width)
        )
        minmax(
            0,
            var(--tp-balanced-feed-width)
        )
        minmax(
            0,
            var(--tp-balanced-side-width)
        ) !important;

    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;
}

.tp-balanced-left {
    grid-column: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
}

.tp-balanced-feed {
    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    justify-self: center !important;
}

.tp-balanced-right {
    grid-column: 3 !important;

    width: 100% !important;
    min-width: 0 !important;
}

/* ----------------------------------------------------------
   FEED-WIDTH GLOBAL BAR
   ---------------------------------------------------------- */

:root {
    --tp-global-player-height: 58px;
    --tp-global-feed-left: 0px;
    --tp-global-feed-width: 600px;
}

#tp-global-player {
    position: fixed !important;

    left:
        var(
            --tp-global-feed-left
        ) !important;

    right: auto !important;

    bottom: 0 !important;

    width:
        var(
            --tp-global-feed-width
        ) !important;

    min-width: 0 !important;
    max-width: none !important;

    height:
        var(
            --tp-global-player-height
        ) !important;

    min-height:
        var(
            --tp-global-player-height
        ) !important;

    box-sizing: border-box !important;

    z-index: 100000 !important;

    display: grid !important;

    grid-template-columns:
        1fr
        auto
        1fr !important;

    align-items: center !important;

    gap: 8px !important;

    padding:
        0
        12px
        env(safe-area-inset-bottom)
        12px !important;

    color: #fff !important;

    background:
        rgba(
            6,
            6,
            9,
            .98
        ) !important;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        ) !important;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        ) !important;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        ) !important;

    box-shadow:
        0 -6px 22px
        rgba(
            0,
            0,
            0,
            .32
        ) !important;

    backdrop-filter: blur(16px);

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

.tp-global-player-side {
    min-width: 0;

    height: 100%;

    display: flex;

    align-items: center;
}

.tp-global-player-side--left {
    justify-content: flex-start;
}

.tp-global-player-side--right {
    justify-content: flex-end;
}

.tp-global-player-center,
.tp-global-transport {
    display: flex;

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

    gap: 12px;
}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.tp-global-icon-button {
    -webkit-appearance: none;
    appearance: none;

    width: 36px;
    height: 36px;

    min-width: 36px;
    min-height: 36px;

    margin: 0;
    padding: 7px;

    border: 0;
    border-radius: 50%;

    display: inline-flex;

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

    color:
        rgba(
            255,
            255,
            255,
            .90
        );

    background: transparent;

    cursor: pointer;

    line-height: 1;

    transition:
        background 120ms ease,
        color 120ms ease,
        opacity 120ms ease,
        transform 120ms ease;
}

.tp-global-icon-button:hover {
    color: #fff;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );
}

.tp-global-icon-button:active {
    transform:
        scale(.92);
}

.tp-global-icon {
    width: 20px;
    height: 20px;

    display: block;

    fill: currentColor;

    pointer-events: none;
}

/* ----------------------------------------------------------
   GLOBAL PLAY
   ---------------------------------------------------------- */

#tp-global-play {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 11px !important;

    border: 0 !important;
    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    color: #050505 !important;

    background: #fff !important;

    box-shadow: none !important;

    cursor: pointer !important;
}

#tp-global-play:disabled {
    opacity: .38 !important;

    cursor: default !important;
}

#tp-global-play svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: currentColor;

    pointer-events: none;
}

/* ----------------------------------------------------------
   AUTOPLAY
   Smaller than V4, higher contrast.
   Play = ON.
   Pause = OFF.
   ---------------------------------------------------------- */

.tp-global-autoplay-wrap {
    height: 100%;

    display: inline-flex;

    align-items: center;
    justify-content: center;
}

#tp-global-autoplay {
    display: none !important;
}

#tp-global-autoplay-button {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 48px;
    height: 26px;
    min-width: 48px;
    min-height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .44);
    border-radius: 999px;
    background: transparent;
    opacity: .94;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

#tp-global-autoplay-button:hover {
    opacity: 1;

    background:
        rgba(
            255,
            255,
            255,
            .62
        );
}

#tp-global-autoplay-button[ aria-pressed="true" ] {
    border-color: rgba(255, 255, 255, .68);
    background: transparent;
}

.tp-global-autoplay-thumb {
    position: absolute;

    top: 2px;
    left: 2px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    display: flex;

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

    color: #060606;

    background: #fff;

    box-shadow:
        0 1px 4px
        rgba(
            0,
            0,
            0,
            .50
        );

    transition:
        transform 140ms ease;
}

#tp-global-autoplay-button[
    aria-pressed="true"
]
.tp-global-autoplay-thumb {
    transform:
        translateX(22px);
}

.tp-global-autoplay-thumb svg {
    width: 12px;
    height: 12px;

    display: block;

    fill: currentColor;

    pointer-events: none;
}

/* ----------------------------------------------------------
   VOLUME
   ---------------------------------------------------------- */

.tp-global-volume-compact {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;
}

#tp-global-volume-button[
    data-muted="1"
] {
    opacity: .42;
}

.tp-global-volume-popover {
    position: absolute;

    right: -8px;

    bottom:
        calc(
            100%
            +
            9px
        );

    width: 158px;

    box-sizing: border-box;

    padding: 10px 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 10px;

    background:
        rgba(
            15,
            15,
            19,
            .98
        );

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            .42
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(5px);

    transition:
        opacity 120ms ease,
        transform 120ms ease,
        visibility 120ms ease;
}

.tp-global-volume-compact:hover
.tp-global-volume-popover,
.tp-global-volume-compact:focus-within
.tp-global-volume-popover {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}

#tp-global-volume {
    display: block !important;

    width: 134px !important;

    margin: 0 !important;

    cursor: pointer;

    accent-color: #f429af;
}

.tp-visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 980px) {

    .tp-balanced-shell {
        display: block !important;
    }

    .tp-balanced-left,
    .tp-balanced-feed,
    .tp-balanced-right {
        width: auto !important;

        grid-column: auto !important;
    }
}

@media (max-width: 760px) {

    :root {
        --tp-global-player-height:
            56px;
    }

#tp-global-player {
    position: fixed !important;
    left: var(--tp-global-feed-left) !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--tp-global-feed-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--tp-global-player-height) !important;
    min-height: var(--tp-global-player-height) !important;
    box-sizing: border-box !important;
    z-index: 100000 !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px env(safe-area-inset-bottom) 12px !important;
    color: #fff !important;
    background: #00000000;
    border-top: 1px solid #252529;
    border-left: 1px solid #252529;
    border-right: 1px solid #252529;
    box-shadow: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

    .tp-global-transport {
        gap: 7px;
    }

    #tp-global-autoplay-button {
        width: 46px;
        height: 24px;

        min-width: 46px;
        min-height: 24px;
    }

    .tp-global-autoplay-thumb {
        width: 18px;
        height: 18px;
    }

    #tp-global-autoplay-button[
        aria-pressed="true"
    ]
    .tp-global-autoplay-thumb {
        transform:
            translateX(22px);
    }
}

/* === TAPPODS DESKTOP SPLASH V1 BEGIN === */

body.tp-desktop-splash-open {
    overflow: hidden !important;
}

body.tp-desktop-splash-open #tp-global-player {
    display: none !important;
}

#tp-desktop-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

    width: 100vw;
    height: 100dvh;

    display: grid;
    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(430px, .78fr);

    color: #f7f7f8;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgb(244 41 175 / 16%),
            transparent 32%
        ),
        radial-gradient(
            circle at 42% 78%,
            rgb(173 72 255 / 12%),
            transparent 34%
        ),
        #000;

    overflow: hidden;
}

.tp-splash-visual {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding:
        clamp(38px, 5vw, 76px)
        clamp(42px, 6vw, 96px);

    border-right:
        1px solid
        rgb(255 255 255 / 8%);

    overflow: hidden;
}

.tp-splash-brand {
    position: relative;
    z-index: 2;

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

    gap: 14px;

    width: max-content;
}

.tp-splash-brand-mark {
    width: 58px;
    height: 58px;

    flex: 0 0 auto;
}

.tp-splash-brand-mark svg {
    display: block;

    width: 100%;
    height: 100%;
}

.tp-splash-brand-name {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.04em;
}

.tp-splash-hero {
    position: relative;
    z-index: 2;

    max-width: 760px;

    padding-bottom:
        clamp(22px, 5vh, 70px);
}

.tp-splash-kicker {
    margin: 0 0 20px;

    color: #f52caf;

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

    letter-spacing: .14em;

    text-transform: uppercase;
}

.tp-splash-title {
    max-width: 720px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            66px,
            7.5vw,
            132px
        );

    font-weight: 820;

    line-height: .86;

    letter-spacing: -.075em;
}

.tp-splash-copy {
    max-width: 590px;

    margin: 30px 0 0;

    color:
        rgb(255 255 255 / 64%);

    font-size:
        clamp(
            17px,
            1.45vw,
            23px
        );

    font-weight: 450;

    line-height: 1.5;
}

.tp-splash-orbit {
    position: absolute;

    width: min(64vw, 940px);
    aspect-ratio: 1;

    right: -34%;
    bottom: -43%;

    border-radius: 50%;

    border:
        1px solid
        rgb(255 255 255 / 8%);

    box-shadow:
        0 0 0 70px
        rgb(255 255 255 / 2%),
        0 0 0 150px
        rgb(244 41 175 / 2%);
}

.tp-splash-orbit::before,
.tp-splash-orbit::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgb(255 255 255 / 7%);
}

.tp-splash-orbit::before {
    inset: 14%;
}

.tp-splash-orbit::after {
    inset: 29%;
}

.tp-splash-entry {
    position: relative;

    min-width: 0;

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

    padding:
        clamp(34px, 5vw, 70px);

    background:
        rgb(6 6 8 / 82%);

    backdrop-filter: blur(26px);

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

.tp-splash-entry-inner {
    width: min(100%, 440px);
}

.tp-splash-entry-eyebrow {
    margin: 0 0 14px;

    color:
        rgb(255 255 255 / 48%);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.tp-splash-entry-title {
    margin: 0;

    color: #fff;

    font-size:
        clamp(
            40px,
            3.4vw,
            58px
        );

    font-weight: 800;

    line-height: .96;

    letter-spacing: -.055em;
}

.tp-splash-entry-copy {
    margin: 18px 0 30px;

    color:
        rgb(255 255 255 / 56%);

    font-size: 16px;
    line-height: 1.48;
}

.tp-splash-action {
    width: 100%;
    height: 52px;

    box-sizing: border-box;

    margin: 0 0 12px;
    padding: 0 22px;

    border-radius: 999px;

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

    font: inherit;

    font-size: 15px;
    font-weight: 760;

    cursor: pointer;

    transition:
        transform 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        opacity 120ms ease;
}

.tp-splash-action:hover {
    transform:
        translateY(-1px);
}

.tp-splash-action:active {
    transform:
        scale(.985);
}

.tp-splash-action--primary {
    border: 0;

    color: #fff;

    background:
        linear-gradient(
            100deg,
            #fa269f 0%,
            #b947ed 100%
        );
}

.tp-splash-action--primary:hover {
    opacity: .94;
}

.tp-splash-action--secondary {
    border:
        1px solid
        rgb(255 255 255 / 18%);

    color: #fff;

    background:
        rgb(255 255 255 / 4%);
}

.tp-splash-action--secondary:hover {
    background:
        rgb(255 255 255 / 8%);

    border-color:
        rgb(255 255 255 / 26%);
}

.tp-splash-divider {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 14px;

    margin: 24px 0;

    color:
        rgb(255 255 255 / 32%);

    font-size: 12px;
}

.tp-splash-divider::before,
.tp-splash-divider::after {
    content: "";

    height: 1px;

    background:
        rgb(255 255 255 / 10%);
}

.tp-splash-continue {
    width: 100%;

    padding: 10px;

    border: 0;

    display: block;

    color:
        rgb(255 255 255 / 66%);

    background: transparent;

    font: inherit;

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

    text-decoration: underline;

    text-underline-offset: 4px;

    cursor: pointer;
}

.tp-splash-continue:hover {
    color: #fff;
}

.tp-splash-guest-note {
    margin: 4px 0 0;

    color:
        rgb(255 255 255 / 28%);

    font-size: 11px;

    text-align: center;
}

.tp-splash-mobile {
    margin-top:
        clamp(
            36px,
            6vh,
            70px
        );

    padding: 18px;

    border:
        1px solid
        rgb(255 255 255 / 10%);

    border-radius: 18px;

    display: grid;

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

    align-items: center;

    gap: 18px;

    background:
        rgb(255 255 255 / 3%);
}

.tp-splash-mobile-qr {
    width: 96px;
    height: 96px;

    box-sizing: border-box;

    padding: 7px;

    border-radius: 12px;

    background: #000;

    object-fit: cover;
}

.tp-splash-mobile-title {
    margin: 0 0 6px;

    color: #fff;

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

.tp-splash-mobile-copy {
    margin: 0;

    color:
        rgb(255 255 255 / 46%);

    font-size: 12px;
    line-height: 1.45;
}

.tp-splash-mobile-url {
    display: inline-block;

    margin-top: 9px;

    color:
        rgb(255 255 255 / 76%);

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

    text-decoration: none;
}

.tp-splash-mobile-url:hover {
    color: #fff;
}

@media (max-width: 1180px) {

    #tp-desktop-splash {
        grid-template-columns:
            minmax(0, 1fr)
            430px;
    }

    .tp-splash-visual {
        padding:
            42px
            50px;
    }

    .tp-splash-entry {
        padding:
            42px;
    }
}

/*
 * V1 is intentionally desktop-only.
 *
 * Mobile keeps the existing responsive feed until we build
 * the dedicated mobile/app entry experience.
 */
@media (max-width: 959px) {

    #tp-desktop-splash {
        display: none !important;
    }

    body.tp-desktop-splash-open {
        overflow: auto !important;
    }

    body.tp-desktop-splash-open #tp-global-player {
        display: grid !important;
    }
}

/* === TAPPODS DESKTOP SPLASH V1 END === */

/* TAPPODS_DESKTOP_SPLASH_V1_1_START */

/*
 * V1.1.1
 * Refined brand mark using the actual splash root:
 * #tp-desktop-splash
 */

#tp-desktop-splash .tp-splash-brand-mark {
    width: 54px !important;
    height: 50px !important;

    flex:
        0
        0
        54px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}

#tp-desktop-splash
.tp-splash-brand-mark
img {
    display: block !important;

    width: 54px !important;
    height: 50px !important;

    object-fit: contain !important;
}

#tp-desktop-splash
.tp-splash-brand {
    gap: 16px !important;
}

#tp-desktop-splash
.tp-splash-brand-name {
    line-height: .98 !important;
}

/* TAPPODS_DESKTOP_SPLASH_V1_1_END */

/* === TAPPODS SPLASH BRAND CLEANUP V2 BEGIN === */

#tp-desktop-splash .tp-splash-brand {
    gap: 10px !important;
}

.tp-splash-brand-name {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}

/* === TAPPODS SPLASH BRAND CLEANUP V2 END === */

/* === TAPPODS AUTH UI V1 BEGIN === */

#auth-modal.auth-overlay {
    background:
        rgb(0 0 0 / 72%);
    backdrop-filter:
        blur(16px);
}

#auth-modal .auth-modal {
    width:
        min(460px, calc(100vw - 32px));
    max-width:
        460px;
    padding:
        38px;
    border:
        1px solid #29292f;
    border-radius:
        24px;
    background:
        #09090b;
    box-shadow:
        0 30px 100px
        rgb(0 0 0 / 62%);
}

#auth-modal .auth-close {
    top:
        18px;
    right:
        20px;
    width:
        36px;
    height:
        36px;
    border-radius:
        999px;
    color:
        #a9a9b2;
    background:
        transparent;
}

#auth-modal .auth-close:hover {
    color:
        #fff;
    background:
        #17171c;
}

#auth-modal .tp-auth-brand {
    display:
        flex;
    align-items:
        center;
    gap:
        10px;
    margin-bottom:
        28px;
}

#auth-modal .tp-auth-brand img {
    width:
        38px;
    height:
        38px;
    object-fit:
        contain;
    flex:
        0 0 38px;
}

#auth-modal .tp-auth-brand span {
    color:
        #fff;
    font-size:
        25px;
    font-weight:
        800;
    line-height:
        1;
    letter-spacing:
        -.04em;
}

#auth-modal #auth-title {
    margin:
        0;
    color:
        #fff;
    font-size:
        34px;
    font-weight:
        800;
    line-height:
        1.04;
    letter-spacing:
        -.045em;
}

#auth-modal .tp-auth-lead {
    margin:
        12px 0 26px;
    max-width:
        370px;
    color:
        #aaaab4;
    font-size:
        15px;
    line-height:
        1.55;
}

#auth-modal .tp-auth-view[hidden] {
    display:
        none !important;
}

#auth-modal .tp-auth-view form {
    display:
        grid;
    gap:
        16px;
}

#auth-modal .tp-auth-field {
    display:
        grid;
    gap:
        8px;
}

#auth-modal .tp-auth-field > span {
    color:
        #d8d8de;
    font-size:
        13px;
    font-weight:
        700;
    letter-spacing:
        -.01em;
}

#auth-modal .tp-auth-field input {
    width:
        100%;
    min-height:
        50px;
    box-sizing:
        border-box;
    padding:
        0 15px;
    border:
        1px solid #303038;
    border-radius:
        12px;
    outline:
        none;
    color:
        #fff;
    background:
        #111115;
    font:
        inherit;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

#auth-modal .tp-auth-field input::placeholder {
    color:
        #686873;
}

#auth-modal .tp-auth-field input:hover {
    border-color:
        #40404a;
}

#auth-modal .tp-auth-field input:focus {
    border-color:
        #8b5cf6;
    background:
        #131318;
    box-shadow:
        0 0 0 3px
        rgb(139 92 246 / 16%);
}

#auth-modal .tp-auth-submit {
    width:
        100%;
    min-height:
        50px;
    margin-top:
        4px;
    border:
        0;
    border-radius:
        999px;
    font-size:
        15px;
    font-weight:
        800;
    cursor:
        pointer;
}

#auth-modal .tp-auth-submit:disabled {
    opacity:
        .62;
    cursor:
        wait;
}

#auth-modal .tp-auth-switch {
    margin:
        20px 0 0;
    color:
        #85858f;
    font-size:
        14px;
    line-height:
        1.45;
    text-align:
        center;
}

#auth-modal .tp-auth-switch button {
    appearance:
        none;
    margin:
        0;
    padding:
        0;
    border:
        0;
    color:
        #b89cff;
    background:
        transparent;
    font:
        inherit;
    font-weight:
        750;
    cursor:
        pointer;
}

#auth-modal .tp-auth-switch button:hover {
    color:
        #d1c0ff;
    text-decoration:
        underline;
}

#auth-modal .tp-auth-status {
    margin:
        18px 0 0;
    padding:
        11px 13px;
    border:
        1px solid
        rgb(248 113 113 / 24%);
    border-radius:
        10px;
    color:
        #fca5a5;
    background:
        rgb(127 29 29 / 16%);
    font-size:
        13px;
    line-height:
        1.45;
}

#auth-modal .tp-auth-status[data-tp-auth-status="success"] {
    border-color:
        rgb(74 222 128 / 24%);
    color:
        #86efac;
    background:
        rgb(20 83 45 / 18%);
}

#auth-modal .tp-auth-terms {
    margin:
        22px 0 0;
    color:
        #656570;
    font-size:
        11px;
    line-height:
        1.5;
    text-align:
        center;
}

body.tp-authenticated .side-signup {
    display:
        none !important;
}

@media (max-width: 600px) {
    #auth-modal .auth-modal {
        width:
            calc(100vw - 20px);
        padding:
            30px 22px 26px;
        border-radius:
            20px;
    }

    #auth-modal #auth-title {
        font-size:
            30px;
    }
}

/* === TAPPODS AUTH UI V1 END === */

/* === TAPPODS DESKTOP LAYOUT PLAYER V1 BEGIN === */

:root {
    --tp-global-feed-width: 600px;
}

.site-layout {
    display: grid;
    grid-template-columns: 330px 600px 330px;
    gap: 0 18px;
    width: 1236px;
    max-width: 100%;
    margin: 0 auto;
}

#tp-global-player {
    position: fixed !important;
    left: 50%;
    right: unset !important;
    bottom: 0 !important;
    width: var(--tp-global-feed-width) !important;
    /* min-width: 0 !important; */
    /* max-width: none !important; */
    height: var(--tp-global-player-height) !important;
    min-height: var(--tp-global-player-height) !important;
    box-sizing: border-box !important;
    z-index: 100000 !important;
    transform: translateX(-50%);
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px env(safe-area-inset-bottom) 12px !important;
    color: #fff !important;
    background: rgba(6, 6, 9, .98) !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    border-left: 1px solid rgba(255, 255, 255, .06) !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* === TAPPODS DESKTOP LAYOUT PLAYER V1 END === */

/* === TAPPODS AUTH DESKTOP V2 BEGIN === */

.tp-auth-account-card {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            rgba(19, 19, 25, .98),
            rgba(9, 9, 13, .98)
        );
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .22);
}

.tp-auth-account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.tp-auth-account-card-eyebrow {
    color: #8f8f9b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tp-auth-account-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid rgba(139, 92, 246, .28);
    border-radius: 999px;
    color: #cabaff;
    background: rgba(139, 92, 246, .10);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .03em;
}

.tp-auth-account-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tp-auth-account-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            #6d43e5,
            #8b5cf6
        );
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.02em;
}

.tp-auth-account-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tp-auth-account-name {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-auth-account-email {
    min-width: 0;
    overflow: hidden;
    color: #85858f;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-auth-account-message {
    margin: 16px 0;
    color: #9696a0;
    font-size: 12px;
    line-height: 1.5;
}

.tp-auth-account-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tp-auth-account-signout {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    color: #d0d0d7;
    background: rgba(255, 255, 255, .035);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.tp-auth-account-signout:hover {
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.tp-auth-account-signout:disabled {
    opacity: .55;
    cursor: wait;
}

body.tp-authenticated .side-signup {
    display: none !important;
}

/* === TAPPODS AUTH DESKTOP V2 END === */

/* === TAPPODS AUTH PROFILE V3 BEGIN === */

#auth-modal .tp-auth-handle-input,
.tp-profile-handle-input {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #303038;
    border-radius: 12px;
    color: #777781;
    background: #111115;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

#auth-modal .tp-auth-handle-input:focus-within,
.tp-profile-handle-input:focus-within {
    border-color: #8b5cf6;
    background: #131318;
    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, .16);
}

#auth-modal .tp-auth-handle-input > span,
.tp-profile-handle-input > span {
    flex: 0 0 auto;
    padding-left: 15px;
    font-size: 15px;
    font-weight: 700;
}

#auth-modal .tp-auth-handle-input input,
.tp-profile-handle-input input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 15px 0 3px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: #fff;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
}

.tp-auth-account-handle {
    min-width: 0;
    overflow: hidden;
    color: #b69cff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-auth-account-email {
    font-size: 11px;
}

.tp-auth-account-edit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(139, 92, 246, .26);
    border-radius: 999px;
    color: #cbbcff;
    background: rgba(139, 92, 246, .09);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.tp-auth-account-edit:hover {
    border-color: rgba(139, 92, 246, .44);
    color: #fff;
    background: rgba(139, 92, 246, .16);
}

.tp-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 110000;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 24px;
    overflow: auto;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tp-profile-dialog {
    position: relative;
    width: min(480px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    color: #fff;
    background: #09090b;
    box-shadow:
        0 30px 100px rgba(0, 0, 0, .62);
}

.tp-profile-close {
    appearance: none;
    position: absolute;
    top: 16px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #a9a9b2;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.tp-profile-close:hover {
    color: #fff;
    background: #17171c;
}

.tp-profile-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 42px;
    margin-bottom: 26px;
}

.tp-profile-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            #6d43e5,
            #8b5cf6
        );
    font-size: 15px;
    font-weight: 850;
}

.tp-profile-eyebrow {
    margin: 0 0 4px;
    color: #8e8e98;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#tp-profile-title {
    margin: 0;
    font-size: 30px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.04em;
}

#tp-profile-form {
    display: grid;
    gap: 17px;
}

.tp-profile-field {
    display: grid;
    gap: 8px;
}

.tp-profile-field > span {
    color: #d8d8de;
    font-size: 13px;
    font-weight: 700;
}

.tp-profile-field > input,
.tp-profile-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #303038;
    border-radius: 12px;
    outline: none;
    color: #fff;
    background: #111115;
    font: inherit;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.tp-profile-field > input {
    min-height: 50px;
    padding: 0 15px;
}

.tp-profile-field textarea {
    min-height: 108px;
    padding: 13px 15px;
    resize: vertical;
    line-height: 1.45;
}

.tp-profile-field > input:focus,
.tp-profile-field textarea:focus {
    border-color: #8b5cf6;
    background: #131318;
    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, .16);
}

.tp-profile-field small {
    color: #686873;
    font-size: 11px;
    line-height: 1.4;
}

.tp-profile-field [data-tp-profile-count] {
    text-align: right;
}

.tp-profile-status {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(248, 113, 113, .24);
    border-radius: 10px;
    color: #fca5a5;
    background: rgba(127, 29, 29, .16);
    font-size: 13px;
    line-height: 1.45;
}

.tp-profile-status[data-tp-profile-status="success"] {
    border-color: rgba(74, 222, 128, .24);
    color: #86efac;
    background: rgba(20, 83, 45, .18);
}

.tp-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 3px;
}

.tp-profile-cancel,
.tp-profile-save {
    appearance: none;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 18px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.tp-profile-cancel {
    border: 1px solid rgba(255, 255, 255, .11);
    color: #d1d1d7;
    background: rgba(255, 255, 255, .035);
}

.tp-profile-save {
    border: 1px solid transparent;
    color: #fff;
    background: #7047eb;
}

.tp-profile-save:hover {
    background: #7d55ef;
}

.tp-profile-cancel:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.tp-profile-cancel:disabled,
.tp-profile-save:disabled {
    opacity: .58;
    cursor: wait;
}

body.tp-profile-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .tp-profile-overlay {
        padding: 10px;
    }

    .tp-profile-dialog {
        width: 100%;
        padding: 28px 20px 22px;
        border-radius: 20px;
    }
}

/* === TAPPODS AUTH PROFILE V3 END === */

/* === TAPPODS AUTH V4B BEGIN === */

.tp-auth-v4b-legacy-hidden {
    display: none !important;
}

.tp-auth-v4b-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.tp-auth-v4b-heading {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tp-auth-v4b-heading h2,
#auth-modal .tp-auth-v4b-heading h2 {
    margin: 0;
    color: #f7f7f8;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.tp-auth-v4b-heading p,
#auth-modal .tp-auth-v4b-heading p {
    margin: 0;
    color: #a3a3ad;
    font-size: 14px;
    line-height: 1.55;
}

.tp-auth-v4b-eyebrow {
    color: #a78bfa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tp-auth-v4b-choice,
.tp-auth-v4b-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tp-auth-v4b-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #c9c9d0;
    font-size: 12px;
    font-weight: 700;
}

.tp-auth-v4b-field > input,
.tp-auth-v4b-handle,
.tp-auth-v4b-captcha-answer {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    border: 1px solid #303038;
    border-radius: 12px;
    outline: none;
    color: #f7f7f8;
    background: #111115;
    font: inherit;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.tp-auth-v4b-field > input,
.tp-auth-v4b-captcha-answer {
    padding: 0 14px;
}

.tp-auth-v4b-field > input:focus,
.tp-auth-v4b-handle:focus-within,
.tp-auth-v4b-captcha-answer:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
    background: #15151b;
}

.tp-auth-v4b-handle {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.tp-auth-v4b-handle > span {
    flex: 0 0 auto;
    padding-left: 14px;
    color: #777781;
}

.tp-auth-v4b-handle > input {
    min-width: 0;
    flex: 1 1 auto;
    height: 46px;
    border: 0;
    outline: 0;
    padding: 0 14px 0 4px;
    color: #f7f7f8;
    background: transparent;
    font: inherit;
}

.tp-auth-v4b-primary,
.tp-auth-v4b-secondary {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: 999px;
    padding: 0 18px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 120ms ease,
        opacity 120ms ease,
        background 120ms ease,
        border-color 120ms ease;
}

.tp-auth-v4b-primary {
    border: 1px solid #7c3aed;
    color: #ffffff;
    background: #7c3aed;
}

.tp-auth-v4b-primary:hover {
    background: #8b5cf6;
}

.tp-auth-v4b-secondary {
    border: 1px solid #35353e;
    color: #f4f4f5;
    background: #18181d;
}

.tp-auth-v4b-secondary:hover {
    border-color: #50505d;
    background: #202027;
}

.tp-auth-v4b-primary:active,
.tp-auth-v4b-secondary:active {
    transform: translateY(1px);
}

.tp-auth-v4b-primary:disabled,
.tp-auth-v4b-secondary:disabled {
    cursor: wait;
    opacity: 0.55;
}

.tp-auth-v4b-text-button,
.tp-auth-v4b-switch button,
.tp-auth-v4b-captcha-refresh,
.tp-auth-v4b-resend {
    border: 0;
    padding: 0;
    color: #a78bfa;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tp-auth-v4b-text-button {
    align-self: center;
    font-size: 13px;
}

.tp-auth-v4b-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #8d8d98;
    font-size: 13px;
}

.tp-auth-v4b-switch--split {
    justify-content: space-between;
}

.tp-auth-v4b-captcha {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid #2c2c34;
    border-radius: 14px;
    padding: 12px;
    background: #0e0e12;
}

.tp-auth-v4b-captcha-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #c9c9d0;
    font-size: 12px;
    font-weight: 800;
}

.tp-auth-v4b-captcha-refresh {
    font-size: 12px;
}

.tp-auth-v4b-captcha-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 88px;
    border-radius: 10px;
    object-fit: cover;
    image-rendering: auto;
}

.tp-auth-v4b-captcha-answer {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tp-auth-v4b-captcha-loading,
.tp-auth-v4b-captcha-error {
    padding: 10px 2px;
    color: #94949e;
    font-size: 13px;
    line-height: 1.45;
}

.tp-auth-v4b-captcha-error {
    color: #fca5a5;
}

.tp-auth-v4b-honeypot {
    position: fixed !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.tp-auth-v4b-status {
    border: 1px solid #35353e;
    border-radius: 11px;
    padding: 10px 12px;
    color: #d4d4d8;
    background: #17171c;
    font-size: 13px;
    line-height: 1.45;
}

.tp-auth-v4b-status[data-state="error"] {
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
    background: rgba(127, 29, 29, 0.16);
}

.tp-auth-v4b-status[hidden] {
    display: none !important;
}

.tp-auth-v4b-verification {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    border-radius: 999px;
    padding: 4px 8px;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.tp-auth-v4b-verification[data-verified="true"] {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
}

.tp-auth-v4b-resend {
    min-height: 34px;
    border: 1px solid #5b3bb8;
    border-radius: 999px;
    padding: 0 12px;
    color: #ddd6fe;
    background: rgba(124, 58, 237, 0.12);
    font-size: 11px;
}

html.tp-auth-v4b-linkflow #tp-desktop-splash {
    display: none !important;
}

@media (max-width: 640px) {
    .tp-auth-v4b-shell {
        gap: 16px;
    }

    .tp-auth-v4b-switch--split {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* === TAPPODS AUTH V4B END === */


/* === TAPPODS AUTH LINK UX V4F BEGIN === */

/*
 * Bring primary auth actions into the same pink -> purple brand
 * treatment used by the Tappods landing splash.
 */

#auth-modal .tp-auth-v4b-primary {
    border-color: transparent;
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            #f827a1 0%,
            #bc46ea 100%
        );
    box-shadow:
        0 9px 26px
        rgba(218, 45, 193, 0.16);
}

#auth-modal .tp-auth-v4b-primary:hover {
    border-color: transparent;
    background:
        linear-gradient(
            90deg,
            #ff2ba8 0%,
            #c94bf0 100%
        );
}

#auth-modal .tp-auth-v4b-eyebrow {
    color: #f827a1;
}

.tp-auth-v4f-result {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.tp-auth-v4f-result-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    box-sizing: border-box;
    border-radius: 50%;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #f827a1 0%,
            #bc46ea 100%
        );
    box-shadow:
        0 12px 34px
        rgba(218, 45, 193, 0.22);
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.tp-auth-v4f-result[data-state="error"]
.tp-auth-v4f-result-icon {
    border:
        1px solid
        rgba(248, 113, 113, 0.38);
    color: #fecaca;
    background:
        rgba(127, 29, 29, 0.28);
    box-shadow: none;
}

.tp-auth-v4f-result-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 2px;
}

.tp-auth-v4f-result-primary {
    min-height: 50px;
}

.tp-auth-v4f-secondary-action {
    align-self: center;
    min-height: 28px;
    color: #cfcfd7;
    text-decoration: underline;
    text-decoration-color:
        rgba(207, 207, 215, 0.36);
    text-underline-offset: 3px;
}

.tp-auth-v4f-secondary-action:hover {
    color: #ffffff;
}

html.tp-auth-v4b-linkflow
#tp-desktop-splash {
    display: none !important;
}

html.tp-auth-v4b-linkflow
body.tp-desktop-splash-open {
    overflow: auto !important;
}

@media (max-width: 640px) {
    .tp-auth-v4f-result {
        gap: 17px;
    }

    .tp-auth-v4f-result-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
}

/* === TAPPODS AUTH LINK UX V4F END === */


/* === TAPPODS AUTH UX V4H FIX 1 BEGIN === */

/* ---------------------------------------------------------
   PASSWORD FIELD
   --------------------------------------------------------- */

.tp-auth-v4h-password-wrap {
    position: relative;
    width: 100%;
}

.tp-auth-v4h-password-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 72px !important;
}

.tp-auth-v4h-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 3;

    appearance: none;
    border: 0;
    border-radius: 8px;

    min-width: 48px;
    padding: 7px 8px;

    background: transparent;
    color: #a8a8b3;

    font: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;

    cursor: pointer;
}

.tp-auth-v4h-password-toggle:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.07);
}

.tp-auth-v4h-password-toggle:focus-visible {
    color: #ffffff;
    outline: 2px solid #c33cff;
    outline-offset: 2px;
}

.tp-auth-v4h-confirm-hidden {
    display: none !important;
}

.tp-auth-v4h-signin-captcha-hidden {
    display: none !important;
}


/* ---------------------------------------------------------
   X / TWITTER-STYLE ACCOUNT ROW
   --------------------------------------------------------- */

#tp-auth-account-card.tp-auth-v4h-account-compact {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-v4h-account-row {
    position: relative;

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

    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 64px;

    padding: 10px 10px;

    border-radius: 999px;

    background: transparent;

    transition:
        background 140ms ease;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-v4h-account-row:hover {
    background: rgba(255,255,255,0.065);
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-avatar {
    grid-column: 1;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    margin: 0 !important;

    border-radius: 50% !important;

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

    font-size: 13px !important;
    font-weight: 800 !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-copy {
    grid-column: 2;

    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;

    margin: 0 !important;
    padding: 0 !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-name {
    display: block !important;

    width: 100%;

    margin: 0 !important;

    color: #f2f2f2 !important;

    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;

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

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-handle {
    display: block !important;

    width: 100%;

    margin: 1px 0 0 !important;

    color: #777782 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

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

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-email,
#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-message,
#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-v4b-verification,
#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-v4h-account-extra {
    display: none !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-v4h-account-menu-button {
    grid-column: 3;

    width: 34px;
    height: 34px;

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

    appearance: none;

    border: 0;
    border-radius: 50%;

    padding: 0;

    background: transparent;
    color: #f2f2f2;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 1px;

    cursor: pointer;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-v4h-account-menu-button:hover {
    background: rgba(255,255,255,0.09);
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-v4h-account-menu-button:focus-visible {
    outline: 2px solid #c33cff;
    outline-offset: 2px;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-actions {
    position: absolute !important;

    right: 4px !important;
    bottom: calc(100% + 8px) !important;
    z-index: 500 !important;

    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;

    width: 200px !important;

    margin: 0 !important;
    padding: 7px !important;

    border: 1px solid #2c2c32 !important;
    border-radius: 14px !important;

    background: #08080a !important;

    box-shadow:
        0 12px 36px rgba(0,0,0,0.55) !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-actions
button {
    width: 100% !important;

    min-height: 40px !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: #f2f2f2 !important;

    text-align: left !important;

    font-size: 13px !important;
    font-weight: 650 !important;

    cursor: pointer !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-actions
button:hover {
    background: rgba(255,255,255,0.08) !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-actions
button:focus-visible {
    outline: 2px solid #c33cff !important;
    outline-offset: -2px !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact
.tp-auth-account-actions
button:last-child {
    color: #ff6b78 !important;
}

#tp-auth-account-card.tp-auth-v4h-account-compact.tp-auth-v4h-account-menu-open
.tp-auth-account-actions {
    display: flex !important;
}


/* Narrow sidebar / tablet */

@media (max-width: 1180px) {
    #tp-auth-account-card.tp-auth-v4h-account-compact
    .tp-auth-v4h-account-row {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            32px;

        gap: 8px;

        padding-left: 8px;
        padding-right: 8px;
    }

    #tp-auth-account-card.tp-auth-v4h-account-compact
    .tp-auth-account-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
}

/* === TAPPODS AUTH UX V4H FIX 1 END === */


/* === TAPPODS AUTH UX V4I BEGIN === */

/*
 * V4H wraps the password input so the Show/Hide control can
 * live inside the field. The old auth CSS expected the input
 * to sit directly inside the form field, so restore the full
 * Tappods input treatment explicitly here.
 */

#auth-modal .tp-auth-v4h-password-wrap {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}

#auth-modal
.tp-auth-v4h-password-wrap
> input {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 50px !important;
    min-height: 50px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        0
        72px
        0
        15px !important;

    border:
        1px solid
        #303038 !important;

    border-radius:
        12px !important;

    outline:
        0 !important;

    background:
        #111115 !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    box-shadow:
        none !important;

    font-family:
        inherit !important;

    font-size:
        15px !important;

    font-weight:
        500 !important;

    line-height:
        normal !important;

    caret-color:
        #ffffff !important;

    transition:
        border-color
        150ms ease,
        box-shadow
        150ms ease,
        background
        150ms ease !important;
}

#auth-modal
.tp-auth-v4h-password-wrap
> input:hover {
    border-color:
        #41414b !important;
}

#auth-modal
.tp-auth-v4h-password-wrap
> input:focus {
    border-color:
        #8b5cf6 !important;

    background:
        #131318 !important;

    box-shadow:
        0 0 0 3px
        rgba(
            139,
            92,
            246,
            0.16
        ) !important;
}

#auth-modal
.tp-auth-v4h-password-wrap
> input::placeholder {
    color:
        #72727d !important;

    opacity:
        1 !important;
}

#auth-modal
.tp-auth-v4h-password-wrap
.tp-auth-v4h-password-toggle {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        8px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    z-index:
        5 !important;

    transform:
        translateY(-50%) !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        auto !important;

    min-width:
        52px !important;

    height:
        34px !important;

    min-height:
        34px !important;

    margin:
        0 !important;

    padding:
        0 10px !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    border:
        0 !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    color:
        #b79cff !important;

    box-shadow:
        none !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    font-weight:
        750 !important;

    line-height:
        1 !important;

    text-align:
        center !important;

    cursor:
        pointer !important;
}

#auth-modal
.tp-auth-v4h-password-wrap
.tp-auth-v4h-password-toggle:hover {
    background:
        rgba(
            139,
            92,
            246,
            0.12
        ) !important;

    color:
        #d1c2ff !important;
}

#auth-modal
.tp-auth-v4h-password-wrap
.tp-auth-v4h-password-toggle:focus-visible {
    outline:
        2px solid
        #8b5cf6 !important;

    outline-offset:
        1px !important;
}

/*
 * Prevent browser autofill from replacing the Tappods
 * dark field with a light/gray native treatment.
 */

#auth-modal
.tp-auth-v4h-password-wrap
> input:-webkit-autofill,
#auth-modal
.tp-auth-v4h-password-wrap
> input:-webkit-autofill:hover,
#auth-modal
.tp-auth-v4h-password-wrap
> input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #ffffff !important;

    box-shadow:
        0 0 0 1000px
        #111115 inset !important;

    transition:
        background-color
        999999s
        ease-in-out
        0s !important;
}

/*
 * Keep the password wrapper from inheriting any generic
 * button/input row rules.
 */

#auth-modal
.tp-auth-v4b-field
.tp-auth-v4h-password-wrap {
    flex:
        0 0 auto !important;
}

/* === TAPPODS AUTH UX V4I END === */


/* === TAPPODS AUTH UX V4J FIX 1 BEGIN === */

/*
 * Hide the decorative eyebrow immediately while a
 * real auth form is present. JavaScript then removes
 * the element from the form DOM entirely.
 *
 * Success states that do not contain an auth form
 * keep their meaningful EMAIL VERIFIED /
 * PASSWORD UPDATED labels.
 */

#auth-modal:has([data-tp-auth-v4b-form])
.tp-auth-v4b-eyebrow {
    display: none !important;
}

body.tp-auth-form-open
#auth-modal
.tp-auth-v4b-eyebrow {
    display: none !important;
}


/*
 * The global player owns the audio state and remains
 * alive. Only its fixed visual controls are suppressed
 * while signup/signin/forgot/reset forms are open.
 */

body.tp-auth-form-open
#tp-global-player,
body.tp-auth-form-open
.tp-global-player {
    display: none !important;
}


/*
 * Keep the email-or-username identifier field visually
 * identical to normal Tappods auth inputs.
 */

#auth-modal
[data-tp-auth-v4b-form="signin"]
input[name="email"] {
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* === TAPPODS AUTH UX V4J FIX 1 END === */


/* === TAPPODS V5 UI POLISH 1 BEGIN === */

/* ----------------------------------------------------------
   RIGHT ACCOUNT CARD
   Preserve compact X/Twitter-style account treatment.
   ---------------------------------------------------------- */

#tp-auth-account-card.tp-auth-v4h-account-compact {
    margin-top: 14px;
}

#tp-auth-account-card
.tp-auth-v4h-account-row {
    min-height: 58px;
    gap: 11px;
}

#tp-auth-account-card
.tp-auth-account-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 999px;
}

#tp-auth-account-card
.tp-auth-account-copy {
    min-width: 0;
    gap: 1px;
}

#tp-auth-account-card
.tp-auth-account-name {
    overflow: hidden;
    color: #f5f5f7;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tp-auth-account-card
.tp-auth-account-handle {
    overflow: hidden;
    color: #81818c;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tp-auth-account-card
.tp-auth-v4h-account-menu-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin-left: auto;
    border-radius: 999px;
    transition:
        background 140ms ease,
        color 140ms ease;
}

#tp-auth-account-card
.tp-auth-v4h-account-menu-button:hover {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}


/* ----------------------------------------------------------
   EDIT PROFILE MODAL
   Visual cleanup only. No auth/profile behavior changed.
   ---------------------------------------------------------- */

.tp-profile-dialog {
    width: min(440px, calc(100vw - 28px));
    padding: 28px;
    border-radius: 22px;
}

.tp-profile-heading {
    margin-bottom: 20px;
}

.tp-profile-heading
.tp-profile-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.tp-profile-field {
    gap: 7px;
}

.tp-profile-field > span {
    font-size: 13px;
    font-weight: 720;
}

.tp-profile-field input,
.tp-profile-field textarea {
    border-radius: 11px;
}

.tp-profile-actions {
    margin-top: 20px;
    gap: 10px;
}

.tp-profile-actions button {
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 999px;
    font-weight: 760;
}

.tp-profile-cancel {
    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.tp-profile-cancel:hover {
    background: rgba(255, 255, 255, .06);
    border-color: #42424c;
    color: #ffffff;
}


/* ----------------------------------------------------------
   FEED TRANSCRIPT
   Reduce wall-of-text feeling while preserving the
   audio-first transcript experience.
   ---------------------------------------------------------- */

.pod-card
.transcript-stage {
    max-width: 100%;
}

.pod-card
.transcript-track {
    max-width: 760px;
    margin-inline: auto;
    font-size: clamp(22px, 1.55vw, 27px);
    line-height: 1.42;
    letter-spacing: -.012em;
    text-wrap: pretty;
}

.pod-card
.pod-description {
    max-width: 700px;
    margin-inline: auto;
    line-height: 1.55;
}


/* ----------------------------------------------------------
   POD ACTION ROW
   Increase click target without visually enlarging icons.
   ---------------------------------------------------------- */

.pod-card
.player-footer button,
.pod-card
.player-footer a,
.pod-card
.player-footer [role="button"] {
    min-width: 38px;
    min-height: 38px;
    border-radius: 999px;
    transition:
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.pod-card
.player-footer button:hover,
.pod-card
.player-footer a:hover,
.pod-card
.player-footer [role="button"]:hover {
    background: rgba(255, 255, 255, .065);
}

.pod-card
.player-footer button:active,
.pod-card
.player-footer a:active,
.pod-card
.player-footer [role="button"]:active {
    transform: scale(.94);
}

.pod-card
.player-footer button:focus-visible,
.pod-card
.player-footer a:focus-visible,
.pod-card
.player-footer [role="button"]:focus-visible {
    outline: 2px solid rgba(244, 63, 191, .82);
    outline-offset: 2px;
}


/* ----------------------------------------------------------
   TRENDING
   Cleaner visual hierarchy without changing data/rendering.
   ---------------------------------------------------------- */

#trending-topics {
    display: grid;
}

#trending-topics
.trend {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 11px 10px;
    margin-inline: -10px;
    border-radius: 10px;
    transition:
        background 140ms ease;
}

#trending-topics
.trend:hover {
    background: rgba(255, 255, 255, .045);
}

#trending-topics
.trend small {
    order: 2;
    margin: 0;
    color: #71717c;
    font-size: 11px;
    line-height: 1.2;
}

#trending-topics
.trend strong {
    order: 1;
    overflow: hidden;
    color: #f1f1f4;
    font-size: 13px;
    font-weight: 740;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ----------------------------------------------------------
   DESKTOP / MOBILE REFINEMENT
   ---------------------------------------------------------- */

@media (max-width: 800px) {
    .pod-card
    .transcript-track {
        font-size: clamp(20px, 5.4vw, 25px);
        line-height: 1.4;
    }

    .tp-profile-dialog {
        padding: 22px;
        border-radius: 19px;
    }
}

/* === TAPPODS V5 UI POLISH 1 END === */


/* === TAPPODS V5 UI POLISH 2 BEGIN === */


/* ----------------------------------------------------------
   DESKTOP GLOBAL PLAYER
   Full viewport-width persistent control bar.

   Playback/controller JS is unchanged.
   ---------------------------------------------------------- */

@media (min-width: 761px) {

    #tp-global-player {
        left:
            0 !important;

        right:
            0 !important;

        width:
            100vw !important;

        max-width:
            none !important;

        transform:
            none !important;

        border-left:
            0 !important;

        border-right:
            0 !important;

        padding-left:
            max(
                20px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                20px,
                env(safe-area-inset-right)
            ) !important;
    }
}


/* ----------------------------------------------------------
   LEFT NAV
   Cleaner active state and useful hover feedback.
   ---------------------------------------------------------- */

.primary-nav {
    gap:
        5px;
}

.primary-nav a {
    position:
        relative;

    padding:
        10px
        14px;

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    transition:
        background
        140ms ease,
        border-color
        140ms ease,
        color
        140ms ease,
        transform
        140ms ease;
}

.primary-nav a:hover {
    background:
        rgba(
            255,
            255,
            255,
            .055
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .035
        );

    color:
        #ffffff;

    transform:
        translateX(2px);
}

.primary-nav a.active {
    background:
        #161619;

    border-color:
        rgba(
            255,
            255,
            255,
            .055
        );

    color:
        #ffffff;

    transform:
        none;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            .015
        );
}

.primary-nav a span {
    transition:
        color
        140ms ease,
        transform
        140ms ease;
}

.primary-nav a:hover span {
    transform:
        scale(1.05);
}

.new-pod-button {
    cursor:
        pointer;

    transition:
        transform
        140ms ease,
        filter
        140ms ease,
        box-shadow
        140ms ease;
}

.new-pod-button:hover {
    filter:
        brightness(1.07);

    transform:
        translateY(-1px);

    box-shadow:
        0
        8px
        24px
        rgba(
            210,
            51,
            203,
            .16
        );
}

.new-pod-button:active {
    transform:
        translateY(0)
        scale(.985);
}

.primary-nav a:focus-visible,
.new-pod-button:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .84
        );

    outline-offset:
        2px;
}


/*
 * Preserve compact navigation behavior at narrower desktop
 * widths while avoiding the hover translation.
 */

@media (max-width: 960px) {

    .primary-nav a:hover {
        transform:
            none;
    }
}

/* === TAPPODS V5 UI POLISH 2 END === */


/* === TAPPODS V5 UI POLISH 3 BEGIN === */

/* ----------------------------------------------------------
   GLOBAL PLAYER DESKTOP ALIGNMENT

   Full-width player background stays intact.

   Controls align with:
   left rail  = 330px
   feed       = 600px
   right rail = 330px
   gaps       = 18px
   ---------------------------------------------------------- */

@media (min-width: 980px) {

    #tp-global-player {
        grid-template-columns:
            minmax(0, 330px)
            minmax(420px, 600px)
            minmax(0, 330px) !important;

        column-gap:
            18px !important;

        row-gap:
            0 !important;

        justify-content:
            center !important;

        padding-left:
            max(
                18px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                18px,
                env(safe-area-inset-right)
            ) !important;
    }

    #tp-global-player
    .tp-global-player-side--left {
        width:
            100%;

        justify-content:
            flex-start;
    }

    #tp-global-player
    .tp-global-player-center,
    #tp-global-player
    .tp-global-transport {
        width:
            100%;

        justify-content:
            center;
    }

    #tp-global-player
    .tp-global-player-side--right {
        width:
            100%;

        justify-content:
            flex-end;
    }
}


/* ----------------------------------------------------------
   PLAYER BUTTON MICRO-INTERACTIONS
   ---------------------------------------------------------- */

#tp-global-player
.tp-global-icon-button {
    transition:
        background
        140ms ease,
        color
        140ms ease,
        opacity
        140ms ease,
        transform
        120ms ease;
}

#tp-global-player
.tp-global-icon-button:hover {
    color:
        #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            .075
        );
}

#tp-global-player
.tp-global-icon-button:active {
    transform:
        scale(.92);
}

#tp-global-player
.tp-global-icon-button:focus-visible,
#tp-global-player
#tp-global-play:focus-visible,
#tp-global-player
#tp-global-autoplay-button:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .90
        );

    outline-offset:
        2px;
}


/* ----------------------------------------------------------
   MAIN PLAY BUTTON
   ---------------------------------------------------------- */

#tp-global-player
#tp-global-play {
    box-shadow:
        0
        3px
        12px
        rgba(
            0,
            0,
            0,
            .24
        );

    transition:
        transform
        120ms ease,
        box-shadow
        140ms ease,
        background
        140ms ease;
}

#tp-global-player
#tp-global-play:hover {
    background:
        #f3f3f5;

    box-shadow:
        0
        5px
        18px
        rgba(
            0,
            0,
            0,
            .30
        );

    transform:
        scale(1.045);
}

#tp-global-player
#tp-global-play:active {
    transform:
        scale(.96);
}


/* ----------------------------------------------------------
   AUTOPLAY CONTROL
   Preserve exact 48x26 base rule from FIX 2.
   ---------------------------------------------------------- */

#tp-global-player
#tp-global-autoplay-button:hover {
    border-color:
        rgba(
            255,
            255,
            255,
            .68
        );

    background:
        rgba(
            255,
            255,
            255,
            .055
        );

    opacity:
        1;
}


/* ----------------------------------------------------------
   KEEP TABLET / MOBILE LAYOUT UNCHANGED
   ---------------------------------------------------------- */

@media (max-width: 979px) {

    #tp-global-player
    .tp-global-player-side--left,
    #tp-global-player
    .tp-global-player-center,
    #tp-global-player
    .tp-global-player-side--right {
        width:
            auto;
    }
}

/* === TAPPODS V5 UI POLISH 3 END === */


/* === TAPPODS V5 UI POLISH 4 BEGIN === */


/* ----------------------------------------------------------
   FEED HEADER / TABS
   ---------------------------------------------------------- */

.feed-header {
    height: 56px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    background:
        rgba(
            0,
            0,
            0,
            .72
        );

    backdrop-filter:
        blur(18px)
        saturate(125%);

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

.feed-tab {
    cursor: pointer;

    color:
        #7f7f89;

    font-size:
        14px;

    font-weight:
        650;

    letter-spacing:
        -.01em;

    transition:
        background
        140ms ease,
        color
        140ms ease;
}

.feed-tab:hover {
    background:
        rgba(
            255,
            255,
            255,
            .038
        );

    color:
        #b9b9c1;
}

.feed-tab.active {
    color:
        #f7f7f8;

    font-weight:
        760;
}

.feed-tab.active::after {
    bottom:
        0;

    width:
        44px;

    height:
        3px;

    box-shadow:
        0
        0
        12px
        rgba(
            235,
            54,
            190,
            .18
        );
}

.feed-tab:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .78
        );

    outline-offset:
        -3px;
}


/* ----------------------------------------------------------
   POD AUTHOR HEADER
   ---------------------------------------------------------- */

.pod-card
.pod-head {
    min-height:
        42px;

    gap:
        11px;
}

.pod-card
.avatar {
    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .055
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            0,
            0,
            0,
            .16
        );
}

.pod-card
.author {
    min-width:
        0;
}

.pod-card
.author strong {
    overflow:
        hidden;

    color:
        #f2f2f4;

    font-size:
        13px;

    font-weight:
        760;

    line-height:
        1.22;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.pod-card
.author span {
    display:
        block;

    margin-top:
        2px;

    overflow:
        hidden;

    color:
        #777781;

    font-size:
        11px;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.pod-card
.follow-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        62px;

    min-height:
        30px;

    margin-left:
        auto;

    padding:
        0
        13px;

    border:
        1px solid
        #393940;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .012
        );

    color:
        #e8e8eb;

    font-size:
        11px;

    font-weight:
        760;

    cursor:
        pointer;

    transition:
        background
        140ms ease,
        border-color
        140ms ease,
        color
        140ms ease,
        transform
        120ms ease;
}

.pod-card
.follow-button:hover {
    border-color:
        #f2f2f4;

    background:
        #f2f2f4;

    color:
        #080809;
}

.pod-card
.follow-button:active {
    transform:
        scale(.96);
}

.pod-card
.follow-button:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .82
        );

    outline-offset:
        2px;
}

.pod-card
.pod-copy {
    margin-top:
        11px;
}


/* ----------------------------------------------------------
   RIGHT RAIL
   ---------------------------------------------------------- */

.right-inner {
    align-content:
        start;

    gap:
        12px;

    padding-top:
        10px;
}

.right-rail
.search-box {
    height:
        42px;

    gap:
        9px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .13
        );

    background:
        #050506;

    color:
        #787883;

    font-size:
        12px;

    transition:
        border-color
        140ms ease,
        background
        140ms ease,
        color
        140ms ease;
}

.right-rail
.search-box:hover {
    border-color:
        rgba(
            255,
            255,
            255,
            .22
        );

    background:
        #08080a;

    color:
        #96969f;
}

.right-rail
.search-box > span:first-child {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        16px;

    height:
        16px;

    color:
        #8d8d96;

    font-size:
        14px;

    line-height:
        1;
}


/* ----------------------------------------------------------
   RIGHT-RAIL CARDS
   ---------------------------------------------------------- */

.right-rail
.side-card {
    padding:
        15px
        15px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .105
        );

    border-radius:
        17px;

    background:
        rgba(
            5,
            5,
            6,
            .92
        );
}

.right-rail
.side-card h2 {
    margin:
        0
        0
        12px;

    color:
        #f4f4f6;

    font-size:
        16px;

    font-weight:
        780;

    letter-spacing:
        -.02em;

    line-height:
        1.2;
}

.right-rail
.side-card p {
    color:
        #8a8a94;

    line-height:
        1.48;
}

.right-rail
.side-signup {
    cursor:
        pointer;

    transition:
        background
        140ms ease,
        transform
        120ms ease;
}

.right-rail
.side-signup:hover {
    background:
        #ffffff;

    transform:
        translateY(-1px);
}

.right-rail
.side-signup:active {
    transform:
        translateY(0)
        scale(.98);
}

.right-rail
.side-signup:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .82
        );

    outline-offset:
        2px;
}


/* ----------------------------------------------------------
   TRENDING CARD INTEGRATION
   Preserve POLISH 1 row hierarchy.
   ---------------------------------------------------------- */

.right-rail
#trending-topics {
    margin-top:
        -2px;
}

.right-rail
#trending-topics
.trend {
    border-top-color:
        rgba(
            255,
            255,
            255,
            .055
        );
}


/* ----------------------------------------------------------
   SMALLER LAYOUT
   Right rail disappears at 1120px in existing layout.
   Keep feed controls comfortable below that point.
   ---------------------------------------------------------- */

@media (max-width: 720px) {

    .feed-header {
        height:
            52px;
    }

    .feed-tab {
        font-size:
            13px;
    }

    .feed-tab.active::after {
        width:
            38px;
    }

    .pod-card
    .pod-head {
        gap:
            9px;
    }

    .pod-card
    .avatar {
        flex-basis:
            38px;

        width:
            38px;

        height:
            38px;
    }

    .pod-card
    .follow-button {
        min-width:
            58px;

        min-height:
            29px;

        padding:
            0
            11px;
    }
}

/* === TAPPODS V5 UI POLISH 4 END === */


/* === TAPPODS FEED-CONTAINED STICKY PLAYER BEGIN === */

/*
 * The global player now belongs visually and structurally
 * to the center feed column.
 *
 * Older fixed/full-viewport player rules remain in the
 * stylesheet for rollback history, but this later and more
 * specific rule is the effective desktop rule.
 */

@media (min-width: 980px) {

    main.feed-column.tp-balanced-feed {
        position:
            relative !important;
    }

    main.feed-column.tp-balanced-feed
    > #tp-global-player {

        position:
            -webkit-sticky !important;

        position:
            sticky !important;

        left:
            auto !important;

        right:
            auto !important;

        top:
            auto !important;

        bottom:
            0 !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        height:
            var(
                --tp-global-player-height
            ) !important;

        min-height:
            var(
                --tp-global-player-height
            ) !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;

        transform:
            none !important;

        z-index:
            1000 !important;

        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr) !important;

        align-items:
            center !important;

        justify-content:
            stretch !important;

        column-gap:
            8px !important;

        row-gap:
            0 !important;

        padding:
            0
            12px
            env(safe-area-inset-bottom)
            12px !important;

        background:
            rgba(
                6,
                6,
                9,
                .98
            ) !important;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                .10
            ) !important;

        border-left:
            0 !important;

        border-right:
            0 !important;

        box-shadow:
            0
            -6px
            22px
            rgba(
                0,
                0,
                0,
                .32
            ) !important;

        backdrop-filter:
            blur(16px);

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


    /*
     * POLISH 3 previously aligned three player regions
     * against the entire three-column site.
     *
     * They now align inside the 600px feed itself.
     */

    main.feed-column.tp-balanced-feed
    > #tp-global-player
    .tp-global-player-side--left {
        width:
            100% !important;

        justify-content:
            flex-start !important;
    }

    main.feed-column.tp-balanced-feed
    > #tp-global-player
    .tp-global-player-center,

    main.feed-column.tp-balanced-feed
    > #tp-global-player
    .tp-global-transport {
        width:
            auto !important;

        justify-content:
            center !important;
    }

    main.feed-column.tp-balanced-feed
    > #tp-global-player
    .tp-global-player-side--right {
        width:
            100% !important;

        justify-content:
            flex-end !important;
    }


    /*
     * The old fixed player required body padding.
     * The desktop player is now in normal feed flow.
     */

    body {
        padding-bottom:
            0 !important;
    }
}


/*
 * Below desktop breakpoint the existing responsive global
 * player behavior remains available.
 */

@media (max-width: 979px) {

    main.feed-column
    > #tp-global-player {
        max-width:
            none;
    }
}

/* === TAPPODS FEED-CONTAINED STICKY PLAYER END === */

/* === TAPPODS USER PROFILE V1 UI BEGIN === */


/* ----------------------------------------------------------
   PROFILE MODE
   ---------------------------------------------------------- */

.feed-column.tp-public-profile-mode
> .feed-header {
    display:
        none !important;
}

.tp-public-profile-shell {
    min-height:
        100vh;

    background:
        #000;
}

.tp-public-profile-topbar {
    position:
        sticky;

    z-index:
        31;

    top:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        58px;

    padding:
        7px
        14px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    background:
        rgba(
            0,
            0,
            0,
            .82
        );

    backdrop-filter:
        blur(18px)
        saturate(130%);

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

.tp-public-profile-back {
    display:
        inline-grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    color:
        #f1f1f3;

    font-size:
        23px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background
        130ms ease,
        transform
        120ms ease;
}

.tp-public-profile-back:hover {
    background:
        rgba(
            255,
            255,
            255,
            .09
        );
}

.tp-public-profile-back:active {
    transform:
        scale(.94);
}

.tp-public-profile-back:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .86
        );

    outline-offset:
        2px;
}

.tp-public-profile-top-copy {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}

.tp-public-profile-top-copy strong {
    overflow:
        hidden;

    color:
        #f5f5f6;

    font-size:
        16px;

    font-weight:
        780;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.tp-public-profile-top-copy span {
    margin-top:
        3px;

    color:
        #777781;

    font-size:
        11px;

    line-height:
        1.1;
}


/* ----------------------------------------------------------
   COVER
   ---------------------------------------------------------- */

.tp-public-profile-cover {
    height:
        174px;

    background:
        radial-gradient(
            circle
            at 18% 20%,
            rgba(
                255,
                45,
                149,
                .42
            ),
            transparent
                34%
        ),
        radial-gradient(
            circle
            at 75% 35%,
            rgba(
                168,
                85,
                247,
                .30
            ),
            transparent
                40%
        ),
        radial-gradient(
            circle
            at 50% 100%,
            rgba(
                56,
                189,
                248,
                .12
            ),
            transparent
                45%
        ),
        #111116;

    background-position:
        center;

    background-size:
        cover;
}

.tp-public-profile-cover.has-image {
    background-position:
        center;

    background-size:
        cover;
}


/* ----------------------------------------------------------
   IDENTITY
   ---------------------------------------------------------- */

.tp-public-profile-identity {
    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );
}

.tp-public-profile-identity-body {
    padding:
        0
        18px
        19px;
}

.tp-public-profile-upper {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    min-height:
        65px;
}

.tp-public-profile-avatar {
    display:
        grid;

    place-items:
        center;

    width:
        116px;

    height:
        116px;

    margin-top:
        -58px;

    overflow:
        hidden;

    border:
        4px solid
        #000;

    border-radius:
        50%;

    background:
        #202025;

    box-shadow:
        0
        4px
        18px
        rgba(
            0,
            0,
            0,
            .28
        );
}

.tp-public-profile-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.tp-public-profile-avatar.is-placeholder {
    color:
        #74747e;
}

.tp-public-profile-avatar.is-placeholder svg {
    width:
        48px;

    height:
        48px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.tp-public-profile-action {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        94px;

    min-height:
        36px;

    margin-top:
        12px;

    padding:
        0
        17px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        780;

    cursor:
        pointer;

    transition:
        transform
        120ms ease,
        background
        140ms ease,
        border-color
        140ms ease,
        opacity
        140ms ease;
}

.tp-public-profile-action:active {
    transform:
        scale(.96);
}

.tp-public-profile-action:disabled {
    cursor:
        default;

    opacity:
        .56;
}

.tp-public-profile-action:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .86
        );

    outline-offset:
        2px;
}

.tp-public-profile-edit {
    border:
        1px solid
        #3b3b43;

    background:
        #050506;

    color:
        #f0f0f2;
}

.tp-public-profile-edit:hover {
    border-color:
        #666670;

    background:
        #101013;
}

.tp-public-profile-follow {
    border:
        0;

    background:
        linear-gradient(
            135deg,
            #ff2d95,
            #a855f7
        );

    color:
        #fff;

    box-shadow:
        0
        5px
        18px
        rgba(
            213,
            63,
            208,
            .18
        );
}

.tp-public-profile-follow:hover {
    transform:
        translateY(-1px);
}

.tp-public-profile-follow.is-following {
    border:
        1px solid
        #414149;

    background:
        transparent;

    color:
        #ececef;

    box-shadow:
        none;
}

.tp-public-profile-name {
    margin:
        8px
        0
        0;

    color:
        #f5f5f6;

    font-size:
        20px;

    font-weight:
        820;

    letter-spacing:
        -.025em;

    line-height:
        1.18;
}

.tp-public-profile-handle {
    margin-top:
        3px;

    color:
        #777781;

    font-size:
        13px;

    line-height:
        1.3;
}

.tp-public-profile-bio {
    margin:
        14px
        0
        0;

    color:
        #dedee2;

    font-size:
        14px;

    line-height:
        1.5;

    white-space:
        pre-wrap;
}

.tp-public-profile-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px
        14px;

    margin-top:
        13px;

    color:
        #777781;

    font-size:
        12px;

    line-height:
        1.35;
}

.tp-public-profile-meta a {
    color:
        #d24ebd;

    text-decoration:
        none;
}

.tp-public-profile-meta a:hover {
    text-decoration:
        underline;
}

.tp-public-profile-stats {
    display:
        flex;

    gap:
        18px;

    margin-top:
        14px;

    color:
        #777781;

    font-size:
        12px;
}

.tp-public-profile-stats strong {
    color:
        #ececef;

    font-weight:
        780;
}


/* ----------------------------------------------------------
   PROFILE TABS
   ---------------------------------------------------------- */

.tp-public-profile-tabs {
    display:
        flex;

    min-height:
        48px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );
}

.tp-public-profile-tab {
    position:
        relative;

    min-width:
        110px;

    padding:
        0
        18px;

    border:
        0;

    background:
        transparent;

    color:
        #81818b;

    font-size:
        13px;

    font-weight:
        700;
}

.tp-public-profile-tab.is-active {
    color:
        #f1f1f3;
}

.tp-public-profile-tab.is-active::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        42px;

    height:
        3px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #ff2d95,
            #a855f7
        );

    transform:
        translateX(-50%);
}


/* ----------------------------------------------------------
   PROFILE POSTS
   ---------------------------------------------------------- */

.tp-public-profile-posts {
    min-height:
        160px;
}

.feed-column.tp-public-profile-mode
.tp-public-profile-posts
.pod-card
.follow-button {
    display:
        none !important;
}

.pod-card .author {
    cursor:
        pointer;
}

.pod-card .author:focus-visible {
    outline:
        2px solid
        rgba(
            244,
            63,
            191,
            .72
        );

    outline-offset:
        3px;

    border-radius:
        5px;
}

.tp-public-profile-empty {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        220px;

    padding:
        30px;

    text-align:
        center;
}

.tp-public-profile-empty strong {
    color:
        #e9e9ec;

    font-size:
        17px;

    font-weight:
        760;
}

.tp-public-profile-empty p {
    max-width:
        330px;

    margin:
        8px
        0
        0;

    color:
        #777781;

    font-size:
        13px;

    line-height:
        1.45;
}


/* ----------------------------------------------------------
   PROFILE LOADING / ERROR
   ---------------------------------------------------------- */

.tp-public-profile-state {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52vh;

    padding:
        30px;

    color:
        #85858e;

    text-align:
        center;
}

.tp-public-profile-state strong {
    margin-top:
        13px;

    color:
        #ececef;

    font-size:
        15px;
}

.tp-public-profile-state p {
    max-width:
        340px;

    margin:
        8px
        0
        0;

    font-size:
        13px;

    line-height:
        1.45;
}

.tp-public-profile-spinner {
    width:
        28px;

    height:
        28px;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-top-color:
        #ef3ebf;

    border-radius:
        50%;

    animation:
        tpPublicProfileSpin
        .75s
        linear
        infinite;
}

@keyframes tpPublicProfileSpin {

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

.tp-public-profile-error-home {
    margin-top:
        17px;

    padding:
        9px
        15px;

    border:
        1px solid
        #3c3c44;

    border-radius:
        999px;

    background:
        #080809;

    color:
        #ececef;

    font-size:
        12px;

    font-weight:
        740;

    cursor:
        pointer;
}


/* ----------------------------------------------------------
   ACCOUNT CARD PROFILE NAVIGATION
   ---------------------------------------------------------- */

#tp-auth-account-card
.tp-auth-account-avatar,

#tp-auth-account-card
.tp-auth-account-copy {
    cursor:
        pointer;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 720px) {

    .tp-public-profile-topbar {
        min-height:
            54px;

        padding:
            6px
            11px;
    }

    .tp-public-profile-cover {
        height:
            142px;
    }

    .tp-public-profile-identity-body {
        padding:
            0
            15px
            17px;
    }

    .tp-public-profile-avatar {
        width:
            96px;

        height:
            96px;

        margin-top:
            -48px;
    }

    .tp-public-profile-upper {
        min-height:
            55px;
    }

    .tp-public-profile-action {
        min-width:
            88px;

        min-height:
            34px;

        margin-top:
            10px;

        padding:
            0
            14px;
    }

    .tp-public-profile-name {
        font-size:
            19px;
    }

    .tp-public-profile-bio {
        font-size:
            13px;
    }

}

/* === TAPPODS USER PROFILE V1 UI END === */

/* === TAPPODS PROFILE BANNER V1 BEGIN === */

.tp-public-profile-cover {
    position:
        relative;
}

.tp-public-profile-banner-edit {
    position:
        absolute;

    top:
        14px;

    right:
        14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.34);

    border-radius:
        999px;

    background:
        rgba(0,0,0,.58);

    color:
        #f5f5f6;

    font-size:
        11px;

    font-weight:
        760;

    cursor:
        pointer;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        background 140ms ease,
        border-color 140ms ease,
        transform 120ms ease;
}

.tp-public-profile-banner-edit:hover {
    border-color:
        rgba(255,255,255,.62);

    background:
        rgba(0,0,0,.76);
}

.tp-public-profile-banner-edit:active {
    transform:
        scale(.96);
}

.tp-public-profile-banner-edit:disabled {
    cursor:
        default;

    opacity:
        .56;
}

.tp-public-profile-banner-edit:focus-visible {
    outline:
        2px solid
        rgba(244,63,191,.86);

    outline-offset:
        2px;
}

.tp-public-profile-banner-status {
    position:
        absolute;

    right:
        14px;

    bottom:
        12px;

    max-width:
        calc(100% - 28px);

    padding:
        6px 9px;

    border-radius:
        8px;

    background:
        rgba(0,0,0,.72);

    color:
        #f0f0f2;

    font-size:
        11px;

    line-height:
        1.25;

    backdrop-filter:
        blur(10px);

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

@media (max-width:720px) {

    .tp-public-profile-banner-edit {
        top:
            10px;

        right:
            10px;

        min-height:
            32px;

        padding:
            0 12px;
    }

    .tp-public-profile-banner-status {
        right:
            10px;

        bottom:
            10px;
    }

}

/* === TAPPODS PROFILE BANNER V1 END === */

/* === TAPPODS EXPANDED EDIT PROFILE V1 BEGIN === */

.tp-profile-dialog {
    max-height:
        calc(100dvh - 36px);

    overflow-y:
        auto;

    overscroll-behavior:
        contain;
}

.tp-profile-banner-editor {
    display:
        grid;

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

    gap:
        14px;

    align-items:
        center;

    margin:
        0 0 16px;

    padding:
        12px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.018);
}

.tp-profile-banner-editor-preview {
    min-height:
        82px;

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:
        10px;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(255,45,149,.42),
            transparent 34%
        ),
        radial-gradient(
            circle at 75% 35%,
            rgba(168,85,247,.30),
            transparent 40%
        ),
        #111116;

    background-position:
        center;

    background-size:
        cover;
}

.tp-profile-banner-editor-preview.has-image {
    background-position:
        center;

    background-size:
        cover;
}

.tp-profile-banner-editor-copy {
    min-width:
        0;
}

.tp-profile-banner-editor-copy strong {
    display:
        block;

    color:
        #f2f2f4;

    font-size:
        13px;

    font-weight:
        760;
}

.tp-profile-banner-editor-copy p {
    margin:
        4px 0 9px;

    color:
        #7f7f89;

    font-size:
        11px;

    line-height:
        1.35;
}

.tp-profile-banner-editor-upload {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0 13px;

    border:
        1px solid #3c3c44;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #080809;

    font-size:
        11px;

    font-weight:
        760;

    cursor:
        pointer;

    transition:
        opacity 140ms ease,
        transform 120ms ease;
}

.tp-profile-banner-editor-upload:hover {
    transform:
        translateY(-1px);
}

.tp-profile-banner-editor-upload:active {
    transform:
        scale(.97);
}

.tp-profile-banner-editor-upload:disabled {
    cursor:
        default;

    opacity:
        .55;

    transform:
        none;
}

.tp-profile-banner-editor-status {
    display:
        block;

    margin-top:
        7px;

    color:
        #a1a1aa;

    font-size:
        11px;

    line-height:
        1.3;
}

.tp-profile-banner-editor-status[hidden] {
    display:
        none !important;
}

@media (max-width:720px) {

    .tp-profile-dialog {
        max-height:
            calc(100dvh - 18px);
    }

    .tp-profile-banner-editor {
        grid-template-columns:
            1fr;
    }

    .tp-profile-banner-editor-preview {
        min-height:
            104px;
    }

}

/* === TAPPODS EXPANDED EDIT PROFILE V1 END === */

/* === TAPPODS PROFILE PEOPLE V1 BEGIN === */

.tp-public-profile-stat-button {
    appearance:
        none;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    line-height:
        inherit;

    cursor:
        pointer;
}

.tp-public-profile-stat-button:hover {
    color:
        #b9b9c1;
}

.tp-public-profile-stat-button:hover strong {
    text-decoration:
        underline;

    text-underline-offset:
        2px;
}

.tp-public-profile-stat-button:focus-visible {
    outline:
        2px solid
        rgba(244,63,191,.78);

    outline-offset:
        4px;

    border-radius:
        4px;
}

.tp-public-profile-tabs[hidden],
.tp-public-profile-posts[hidden] {
    display:
        none !important;
}

.tp-profile-people-panel {
    min-height:
        420px;

    border-bottom:
        1px solid rgba(255,255,255,.09);

    background:
        #000;
}

.tp-profile-people-header {
    position:
        sticky;

    top:
        0;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    min-height:
        58px;

    padding:
        6px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.09);

    background:
        rgba(0,0,0,.92);

    backdrop-filter:
        blur(14px);

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

.tp-profile-people-back {
    appearance:
        none;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    margin:
        0 12px 0 0;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    color:
        #f1f1f3;

    font-size:
        21px;

    line-height:
        1;

    cursor:
        pointer;
}

.tp-profile-people-back:hover {
    background:
        rgba(255,255,255,.08);
}

.tp-profile-people-back:focus-visible {
    outline:
        2px solid rgba(244,63,191,.8);

    outline-offset:
        2px;
}

.tp-profile-people-heading {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    line-height:
        1.2;
}

.tp-profile-people-heading strong {
    color:
        #f4f4f5;

    font-size:
        16px;

    font-weight:
        800;
}

.tp-profile-people-heading span {
    margin-top:
        3px;

    color:
        #74747e;

    font-size:
        11px;
}

.tp-profile-people-content {
    min-height:
        340px;
}

.tp-profile-people-list {
    width:
        100%;
}

.tp-profile-people-row {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    min-height:
        76px;

    padding:
        13px 16px;

    border-bottom:
        1px solid rgba(255,255,255,.075);
}

.tp-profile-people-row:hover {
    background:
        rgba(255,255,255,.025);
}

.tp-profile-people-identity {
    appearance:
        none;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    flex:
        1 1 auto;

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}

.tp-profile-people-identity:focus-visible {
    outline:
        2px solid rgba(244,63,191,.72);

    outline-offset:
        4px;

    border-radius:
        6px;
}

.tp-profile-people-avatar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:
        999px;

    background:
        #141419;
}

.tp-profile-people-avatar img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.tp-profile-people-avatar.is-placeholder svg {
    width:
        25px;

    height:
        25px;

    fill:
        none;

    stroke:
        #676772;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.tp-profile-people-copy {
    min-width:
        0;

    padding-top:
        2px;
}

.tp-profile-people-name {
    display:
        block;

    overflow:
        hidden;

    color:
        #ececef;

    font-size:
        13px;

    font-weight:
        780;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.tp-profile-people-identity:hover
.tp-profile-people-name {
    text-decoration:
        underline;

    text-underline-offset:
        2px;
}

.tp-profile-people-handle {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        2px;

    color:
        #777781;

    font-size:
        12px;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.tp-profile-people-bio {
    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        6px 0 0;

    color:
        #a0a0a8;

    font-size:
        12px;

    line-height:
        1.4;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}

.tp-profile-people-follow {
    appearance:
        none;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    min-width:
        80px;

    min-height:
        32px;

    margin:
        4px 0 0;

    padding:
        0 13px;

    border:
        1px solid #fff;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #070708;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        opacity 140ms ease,
        transform 120ms ease,
        background 140ms ease,
        color 140ms ease,
        border-color 140ms ease;
}

.tp-profile-people-follow:hover {
    transform:
        translateY(-1px);
}

.tp-profile-people-follow.is-following {
    border-color:
        #414149;

    background:
        transparent;

    color:
        #ececef;
}

.tp-profile-people-follow:disabled {
    cursor:
        default;

    opacity:
        .55;

    transform:
        none;
}

.tp-profile-people-follow:focus-visible {
    outline:
        2px solid rgba(244,63,191,.8);

    outline-offset:
        2px;
}

.tp-profile-people-loading {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        280px;

    color:
        #777781;

    font-size:
        12px;
}

.tp-profile-people-empty {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        280px;

    padding:
        30px;

    text-align:
        center;
}

.tp-profile-people-empty strong {
    color:
        #ececef;

    font-size:
        16px;

    font-weight:
        780;
}

.tp-profile-people-empty p {
    max-width:
        340px;

    margin:
        8px 0 0;

    color:
        #777781;

    font-size:
        13px;

    line-height:
        1.45;
}

@media (max-width:720px) {

    .tp-public-profile-stats {
        gap:
            16px;
    }

    .tp-profile-people-header {
        min-height:
            54px;

        padding:
            5px 11px;
    }

    .tp-profile-people-row {
        min-height:
            72px;

        padding:
            12px 14px;
    }

    .tp-profile-people-avatar {
        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;
    }

    .tp-profile-people-follow {
        min-width:
            74px;

        min-height:
            31px;

        padding:
            0 11px;
    }

}

/* === TAPPODS PROFILE PEOPLE V1 END === */

/* === TAPPODS PROFILE POLISH V1.5 BEGIN === */

/*
 * Desktop profile geometry.
 * Slightly tighter than V1 while retaining the existing
 * full-width cover + overlapping avatar composition.
 */

.tp-public-profile-cover {
    height:
        158px;
}

.tp-public-profile-identity-body {
    padding: 0 16px 15px;
    z-index: 1;
    position: relative;
}

.tp-public-profile-upper {
    min-height:
        58px;
}

.tp-public-profile-avatar {
    width:
        106px;

    height:
        106px;

    margin-top:
        -53px;

    border-width:
        4px;

    box-shadow:
        0
        4px
        16px
        rgba(0,0,0,.28);
}

.tp-public-profile-avatar.is-placeholder svg {
    width:
        43px;

    height:
        43px;
}

.tp-public-profile-action {
    min-width:
        90px;

    min-height:
        34px;

    margin-top:
        10px;

    padding:
        0
        15px;
}

.tp-public-profile-name {
    margin-top:
        6px;

    font-size:
        19px;
}

.tp-public-profile-handle {
    margin-top:
        2px;

    font-size:
        12.5px;
}

.tp-public-profile-bio {
    margin-top:
        10px;

    font-size:
        13px;

    line-height:
        1.45;
}

.tp-public-profile-meta {
    gap:
        5px
        13px;

    margin-top:
        10px;
}

.tp-public-profile-stats {
    gap:
        17px;

    margin-top:
        11px;
}

.tp-public-profile-tabs {
    min-height:
        44px;
}

.tp-public-profile-tab {
    min-width:
        100px;

    padding:
        0
        16px;

    font-size:
        12px;
}

.tp-public-profile-tab.is-active::after {
    width:
        38px;
}


/*
 * Empty profile state.
 * No fake action or dead tab is added; this remains a true
 * empty-state representation of the existing Pods view.
 */

.tp-public-profile-empty {
    position:
        relative;

    min-height:
        250px;

    padding:
        42px
        30px
        48px;
}

.tp-public-profile-empty::before {
    content:
        "♪";

    display:
        grid;

    place-items:
        center;

    width:
        50px;

    height:
        50px;

    margin-bottom:
        15px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255,45,149,.16),
            transparent 45%
        ),
        #101014;

    color:
        #c74ead;

    font-size:
        22px;

    font-weight:
        760;

    line-height:
        1;

    box-shadow:
        0
        8px
        28px
        rgba(0,0,0,.24);
}

.tp-public-profile-empty strong {
    font-size:
        16px;

    font-weight:
        780;

    letter-spacing:
        -.01em;
}

.tp-public-profile-empty p {
    max-width:
        310px;

    margin-top:
        7px;

    color:
        #74747e;

    font-size:
        12px;

    line-height:
        1.5;
}


/*
 * People view should retain the tighter profile geometry
 * without changing its list sizing or interaction model.
 */

.tp-profile-people-panel {
    min-height:
        390px;
}


/*
 * Mobile keeps the profile compact while preserving the
 * existing responsive composition.
 */

@media (max-width:720px) {

    .tp-public-profile-cover {
        height:
            132px;
    }

    .tp-public-profile-identity-body {
        padding:
            0
            14px
            14px;
    }

    .tp-public-profile-upper {
        min-height:
            53px;
    }

    .tp-public-profile-avatar {
        width:
            96px;

        height:
            96px;

        margin-top:
            -48px;
    }

    .tp-public-profile-avatar.is-placeholder svg {
        width:
            39px;

        height:
            39px;
    }

    .tp-public-profile-action {
        min-height:
            33px;

        margin-top:
            9px;

        padding:
            0
            14px;
    }

    .tp-public-profile-name {
        margin-top:
            5px;

        font-size:
            18px;
    }

    .tp-public-profile-bio {
        margin-top:
            9px;
    }

    .tp-public-profile-meta {
        margin-top:
            9px;
    }

    .tp-public-profile-stats {
        gap:
            15px;

        margin-top:
            10px;
    }

    .tp-public-profile-tabs {
        min-height:
            43px;
    }

    .tp-public-profile-empty {
        min-height:
            220px;

        padding:
            36px
            22px
            42px;
    }

    .tp-public-profile-empty::before {
        width:
            46px;

        height:
            46px;

        margin-bottom:
            13px;

        font-size:
            20px;
    }

}

/* === TAPPODS PROFILE POLISH V1.5 END === */

/* === TAPPODS REAL LIKES V1.6 BEGIN === */

.pod-card [data-tp-real-like="1"] {
    position:
        relative;

    gap:
        5px;
}

.pod-card [data-tp-real-like="1"]::after {
    content:
        attr(data-tp-like-count);

    display:
        inline-block;

    min-width:
        0;

    color:
        currentColor;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    vertical-align:
        middle;
}

.pod-card [data-tp-real-like="1"][data-tp-like-count=""]::after {
    display:
        none;
}

.pod-card [data-tp-real-like="1"].is-active,
.pod-card [data-tp-real-like="1"].tp-real-like-active,
.pod-card [data-tp-real-like="1"][aria-pressed="true"] {
    color:
        #f43fbf;
}

.pod-card [data-tp-real-like="1"].is-active svg path,
.pod-card [data-tp-real-like="1"].tp-real-like-active svg path,
.pod-card [data-tp-real-like="1"][aria-pressed="true"] svg path {
    fill:
        currentColor !important;

    stroke:
        currentColor !important;
}

.pod-card [data-tp-real-like="1"][aria-busy="true"] {
    opacity:
        .55;

    cursor:
        default;
}

/* === TAPPODS REAL LIKES V1.6 END === */


/* === TAPPODS PROFILE EDITOR V1.8 BEGIN === */

.tp-public-profile-banner-edit,
.tp-public-profile-banner-status {
    display: none !important;
}

.tp-profile-overlay {
    align-items: flex-start !important;
    padding: 46px 18px !important;
    background: rgba(0,0,0,.78) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tp-profile-dialog.tp-profile-dialog-v18 {
    width: min(600px, calc(100vw - 36px)) !important;
    max-height: calc(100dvh - 92px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 16px !important;
    background: #000 !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
}

#tp-profile-form.tp-profile-v18-form {
    display: block !important;
    max-height: calc(100dvh - 94px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #55555e transparent;
}

.tp-profile-v18-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto;
    align-items: center;
    min-height: 58px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tp-profile-v18-topbar .tp-profile-close {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #f2f2f4 !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

.tp-profile-v18-topbar .tp-profile-close:hover {
    background: rgba(255,255,255,.09) !important;
}

.tp-profile-v18-topbar #tp-profile-title {
    margin: 0 !important;
    color: #f7f7f8 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}

#tp-profile-form.tp-profile-v18-form .tp-profile-save {
    min-width: 66px !important;
    min-height: 34px !important;
    padding: 0 17px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f4f4f5 !important;
    color: #080809 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer;
}

#tp-profile-form.tp-profile-v18-form .tp-profile-save:hover {
    transform: none !important;
    filter: brightness(.92) !important;
}

.tp-profile-v18-media {
    position: relative;
    min-height: 250px;
    background: #000;
}

.tp-profile-v18-cover {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,45,149,.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 76% 28%,
            rgba(168,85,247,.26),
            transparent 42%
        ),
        #16161b;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tp-profile-v18-cover.has-image {
    background-size: cover;
}

.tp-profile-v18-cover.is-dragging,
.tp-profile-v18-avatar.is-dragging {
    cursor: grabbing;
}

.tp-profile-v18-avatar-wrap {
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 116px;
    height: 116px;
}

.tp-profile-v18-avatar {
    position: absolute;
    inset: 0;
    display: grid !important;
    place-items: center !important;
    width: 116px !important;
    height: 116px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 4px solid #000 !important;
    border-radius: 50% !important;
    background: #202025 !important;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tp-profile-v18-avatar > img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.tp-profile-v18-camera {
    position: absolute;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.66);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.tp-profile-v18-camera svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.tp-profile-v18-cover-camera {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.tp-profile-v18-avatar-camera {
    right: 5px;
    bottom: 5px;
    width: 38px;
    height: 38px;
    border: 2px solid #000;
}

.tp-profile-v18-drag-hint {
    padding: 8px 20px 0;
    color: #73737d;
    font-size: 11px;
    line-height: 1.35;
}

.tp-profile-v18-media-status {
    margin: 7px 20px 0;
    color: #a4a4ad;
    font-size: 12px;
    line-height: 1.4;
}

.tp-profile-v18-media-status[data-tp-status="success"] {
    color: #75d9a0;
}

.tp-profile-v18-media-status[data-tp-status="error"] {
    color: #ff8f9d;
}

.tp-profile-v18-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 20px 28px;
}

.tp-profile-v18-fields .tp-profile-field {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.tp-profile-v18-fields .tp-profile-field > span {
    position: absolute;
    top: 7px;
    left: 12px;
    z-index: 2;
    color: #777781;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

.tp-profile-v18-fields .tp-profile-field > input,
.tp-profile-v18-fields .tp-profile-field textarea,
.tp-profile-v18-fields .tp-profile-handle-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #323239;
    border-radius: 5px;
    outline: 0;
    background: #111113;
    color: #f4f4f5;
    box-shadow: none;
    font: inherit;
}

.tp-profile-v18-fields .tp-profile-field > input {
    min-height: 58px;
    padding: 20px 12px 6px;
}

.tp-profile-v18-fields .tp-profile-field textarea {
    min-height: 100px;
    padding: 23px 12px 9px;
    resize: vertical;
    line-height: 1.36;
}

.tp-profile-v18-fields .tp-profile-handle-input {
    display: flex;
    align-items: flex-end;
    min-height: 58px;
    padding: 0 12px 6px;
}

.tp-profile-v18-fields .tp-profile-handle-input > span {
    flex: 0 0 auto;
    padding-bottom: 7px;
    color: #85858e;
    font-size: 15px;
}

.tp-profile-v18-fields .tp-profile-handle-input input {
    min-width: 0;
    flex: 1;
    min-height: 34px;
    padding: 0 0 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f4f4f5;
    font: inherit;
}

.tp-profile-v18-fields .tp-profile-field > input:focus,
.tp-profile-v18-fields .tp-profile-field textarea:focus,
.tp-profile-v18-fields .tp-profile-field:focus-within
.tp-profile-handle-input {
    border-color: #6f6f79;
    background: #131315;
    box-shadow: none;
}

.tp-profile-v18-fields .tp-profile-field small {
    display: block;
    margin-top: 5px;
    color: #62626c;
    font-size: 10px;
    line-height: 1.35;
}

.tp-profile-v18-fields [data-tp-profile-count] {
    text-align: right;
}

.tp-public-profile-avatar img {
    object-fit: cover;
}

@media (max-width:720px) {
    .tp-profile-overlay {
        padding: 0 !important;
    }

    .tp-profile-dialog.tp-profile-dialog-v18 {
        width: 100% !important;
        max-width: none !important;
        max-height: 100dvh !important;
        min-height: 100dvh;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #tp-profile-form.tp-profile-v18-form {
        max-height: 100dvh;
    }

    .tp-profile-v18-cover {
        height: 180px;
    }

    .tp-profile-v18-media {
        min-height: 226px;
    }

    .tp-profile-v18-avatar-wrap,
    .tp-profile-v18-avatar {
        width: 104px !important;
        height: 104px !important;
    }

    .tp-profile-v18-avatar-wrap {
        left: 15px;
    }

    .tp-profile-v18-fields {
        padding: 20px 15px 30px;
    }

    .tp-profile-v18-drag-hint,
    .tp-profile-v18-media-status {
        margin-left: 15px;
        margin-right: 15px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* === TAPPODS PROFILE EDITOR V1.8 END === */


/* === TAPPODS PROFILE MEDIA V1.8.1 BEGIN === */

/*
 * Username alignment:
 * the older profile handle rule contributes 15px of inherited
 * padding to the @ prefix. V1.8.1 explicitly neutralizes it.
 */
.tp-profile-v18-fields
.tp-profile-handle-input > span {
    padding-left: 0 !important;
}

/*
 * The main Edit profile screen is now a summary/control surface.
 * Cropping and positioning live in dedicated child editors.
 */
.tp-profile-v181-media {
    position: relative;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #000;
}

.tp-profile-v181-cover {
    position: relative;
    width: 100%;
    height: 198px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,45,149,.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 76% 28%,
            rgba(168,85,247,.26),
            transparent 42%
        ),
        #16161b;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.tp-profile-v181-cover-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0,0,0,.08);
}

.tp-profile-v181-media-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.68);
    color: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.tp-profile-v181-media-icon:hover {
    background: rgba(28,28,32,.88);
}

.tp-profile-v181-media-icon svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.tp-profile-v181-avatar-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 70px;
    padding:
        10px
        18px
        0
        142px;
}

.tp-profile-v181-avatar {
    position: absolute !important;
    left: 20px !important;
    top: -58px !important;
    display: grid !important;
    place-items: center !important;
    width: 116px !important;
    height: 116px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 4px solid #000 !important;
    border-radius: 50% !important;
    background: #202025 !important;
}

.tp-profile-v181-avatar > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.tp-profile-v181-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tp-profile-v181-avatar-actions button {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #33333a;
    border-radius: 999px;
    background: transparent;
    color: #f0f0f2;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.tp-profile-v181-avatar-actions button:hover {
    border-color: #55555f;
    background: #151519;
}

.tp-profile-v181-media-status {
    margin:
        6px
        20px
        0;
    color: #85858e;
    font-size: 11px;
    line-height: 1.4;
}

.tp-profile-v181-media-status[data-tp-status="success"] {
    color: #73d69a;
}

.tp-profile-v181-media-status[data-tp-status="error"] {
    color: #ff8f9d;
}

/*
 * Dedicated editor / picker overlay.
 * It sits above Edit profile without destroying the underlying form.
 */
.tp-profile-media-child-open {
    overflow: hidden;
}

.tp-profile-media-child-overlay {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0,0,0,.74);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.tp-profile-media-child-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: #080809;
    box-shadow: 0 28px 90px rgba(0,0,0,.68);
}

.tp-profile-media-child-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto;
    align-items: center;
    min-height: 58px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #080809;
}

.tp-profile-media-child-topbar strong {
    color: #f5f5f6;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.tp-profile-media-child-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.tp-profile-media-child-close:hover {
    background: rgba(255,255,255,.08);
}

.tp-profile-media-apply {
    min-width: 76px;
    min-height: 34px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    color: #080809;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.tp-profile-media-apply:disabled {
    opacity: .42;
    cursor: default;
}

.tp-profile-media-workspace {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 28px 24px 19px;
}

.tp-profile-media-workspace > p {
    margin: 0;
    color: #85858e;
    font-size: 11px;
    line-height: 1.4;
}

.tp-profile-media-cover-stage {
    width: 100%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #18181d,
            #0c0c0f
        );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tp-profile-media-avatar-stage {
    width: min(330px, 76vw);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #2f2f36;
    border-radius: 50%;
    background: #16161a;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tp-profile-media-avatar-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
}

.tp-profile-media-cover-stage.is-dragging,
.tp-profile-media-avatar-stage.is-dragging {
    cursor: grabbing;
}

.tp-profile-media-child-actions {
    display: flex;
    justify-content: center;
    gap: 9px;
    padding:
        0
        20px
        20px;
}

.tp-profile-media-child-actions button {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #34343b;
    border-radius: 999px;
    background: #111114;
    color: #f1f1f3;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.tp-profile-media-child-actions button:hover {
    border-color: #55555f;
    background: #18181c;
}

.tp-profile-media-child-status {
    margin:
        -7px
        22px
        19px;
    color: #8b8b94;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.tp-profile-media-child-status[data-tp-status="error"] {
    color: #ff8f9d;
}

.tp-profile-media-child-status[data-tp-status="success"] {
    color: #73d69a;
}

/*
 * Random animal picker.
 */
.tp-profile-random-dialog {
    display: flex;
    flex-direction: column;
    width: min(590px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 48px));
}

.tp-profile-random-tabs {
    display: flex;
    gap: 8px;
    padding: 15px 17px 11px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.tp-profile-random-tabs button {
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #33333a;
    border-radius: 999px;
    background: transparent;
    color: #aaaab2;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.tp-profile-random-tabs button.is-active {
    border-color: #f0f0f2;
    background: #f0f0f2;
    color: #09090a;
}

.tp-profile-random-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap: 9px;
    padding: 16px;
    overflow-y: auto;
}

.tp-profile-random-choice {
    position: relative;
    display: block;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 11px;
    background: #18181c;
    cursor: pointer;
}

.tp-profile-random-choice img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-profile-random-choice:hover {
    border-color: #777782;
}

.tp-profile-random-choice.is-selected {
    border-color: #ff005e;
    box-shadow:
        0 0 0 2px
        rgba(255,0,94,.22);
}

.tp-profile-random-choice.is-selected::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #ff005e;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.tp-profile-random-dialog
.tp-profile-media-child-status {
    margin-top: 0;
}

/*
 * V1.8 drag hint is obsolete because main profile editor no longer
 * acts as the crop editor.
 */
.tp-profile-v18-drag-hint {
    display: none !important;
}

@media (max-width:720px) {
    .tp-profile-v181-cover {
        height: 175px;
    }

    .tp-profile-v181-avatar-row {
        min-height: 72px;
        padding:
            10px
            14px
            0
            126px;
    }

    .tp-profile-v181-avatar {
        left: 14px !important;
        top: -51px !important;
        width: 102px !important;
        height: 102px !important;
    }

    .tp-profile-v181-avatar-actions {
        gap: 6px;
    }

    .tp-profile-v181-avatar-actions button {
        padding: 0 10px;
        font-size: 11px;
    }

    .tp-profile-media-child-overlay {
        padding: 0;
    }

    .tp-profile-media-child-dialog,
    .tp-profile-random-dialog {
        width: 100%;
        max-width: none;
        max-height: 100dvh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .tp-profile-media-workspace {
        flex: 1;
        justify-content: center;
    }

    .tp-profile-media-cover-stage {
        aspect-ratio: 2.4 / 1;
    }

    .tp-profile-random-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
        gap: 7px;
        padding: 12px;
    }
}

/* === TAPPODS PROFILE MEDIA V1.8.1 END === */


/* === TAPPODS PROFILE ROUTES V1.8.2 BEGIN === */

.tp-public-profile-stat-button,
.tp-public-profile-tab {
    text-decoration: none;
}


.tp-public-profile-shell.tp-profile-people-route-active
> .tp-public-profile-topbar,

.tp-public-profile-shell.tp-profile-people-route-active
> .tp-public-profile-identity,

.tp-public-profile-shell.tp-profile-people-route-active
> .tp-public-profile-tabs,

.tp-public-profile-shell.tp-profile-people-route-active
> .tp-public-profile-posts {
    display: none !important;
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-panel {
    min-height:
        calc(
            100dvh
            -
            var(
                --tp-global-player-height,
                68px
            )
        );

    border-bottom: 0;
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-header {
    position: sticky;
    top: 0;
    z-index: 8;

    min-height: 64px;

    padding:
        7px
        15px;

    background:
        rgba(
            0,
            0,
            0,
            .94
        );
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-heading strong {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.015em;
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-heading span {
    margin-top: 2px;
    color: #73737c;
    font-size: 12px;
}


.tp-profile-people-route-tabs {
    display: grid;

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

    min-height: 54px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    background: #000;
}


.tp-profile-people-route-tab {
    position: relative;

    display: flex;

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

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

    color: #73737c;

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

    text-decoration: none;
}


.tp-profile-people-route-tab:hover {
    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    color: #e8e8eb;
}


.tp-profile-people-route-tab.is-active {
    color: #f2f2f4;
    font-weight: 800;
}


.tp-profile-people-route-tab.is-active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 58px;
    height: 4px;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #f72585,
            #b43df1
        );
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-row {
    min-height: 84px;

    padding:
        14px
        16px;

    gap: 12px;
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-name {
    font-size: 14px;
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-handle {
    margin-top: 1px;
    font-size: 12px;
}


.tp-public-profile-shell.tp-profile-people-route-active
.tp-profile-people-bio {
    margin-top: 5px;

    color: #d0d0d5;

    font-size: 13px;
    line-height: 1.38;
}


/* === TAPPODS PROFILE PLAYER STICKY CSS FIX V1.8.2 BEGIN === */

/*
 * Profile player participates in the profile feed column layout.
 *
 * It is the final child of:
 *   main.feed-column.tp-public-profile-mode
 *
 * No viewport-width geometry and no fixed positioning.
 */
main.feed-column.tp-public-profile-mode
> #tp-global-player[data-tp-feed-sticky="1"] {
    position:
        sticky !important;

    left:
        auto !important;

    right:
        auto !important;

    bottom:
        0 !important;

    width:
        100% !important;

    max-width:
        100% !important;

    box-sizing:
        border-box !important;
}

/* === TAPPODS PROFILE PLAYER STICKY CSS FIX V1.8.2 END === */


.tp-public-profile-empty::before {
    content: none !important;
    display: none !important;
}


.tp-public-profile-empty
> .feed-state__icon {
    display: none !important;
}


@media (max-width:720px) {

    .tp-public-profile-shell.tp-profile-people-route-active
    .tp-profile-people-header {
        min-height: 58px;

        padding:
            5px
            11px;
    }


    .tp-profile-people-route-tabs,
    .tp-profile-people-route-tab {
        min-height: 50px;
    }


    .tp-public-profile-shell.tp-profile-people-route-active
    .tp-profile-people-row {
        min-height: 76px;

        padding:
            12px
            13px;
    }


    .tp-public-profile-shell.tp-profile-people-route-active
    .tp-profile-people-avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

/* === TAPPODS PROFILE ROUTES V1.8.2 END === */


/* === TAPPODS PROFILE TAB FINAL CLEANUP V1.8.2 BEGIN === */

.tp-public-profile-tab {
    min-width: 100px;
    padding: 0 16px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === TAPPODS PROFILE TAB FINAL CLEANUP V1.8.2 END === */


/* === TAPPODS COMPOSER V2A BEGIN === */

body.tp-composer-open {
    overflow: hidden !important;
}

body.tp-composer-open #tp-global-player {
    display: none !important;
}

.tp-v2-compose-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tp-v2-compose-trigger img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.tp-v2-compose-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 18px;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(7px);
}

.tp-v2-compose-modal {
    position: relative;
    width: min(600px, 100%);
    max-height: calc(100dvh - 96px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 19px;
    background: #09090b;
    color: #f5f5f7;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
}

.tp-v2-compose-head {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    min-height: 60px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #09090b;
}

.tp-v2-compose-head strong {
    padding-left: 7px;
    font-size: 18px;
    font-weight: 800;
}

.tp-v2-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 29px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.tp-v2-close:hover {
    background: rgba(255, 255, 255, .08);
}

.tp-v2-publish {
    min-width: 88px;
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #f72585, #b43df1);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.tp-v2-publish:disabled {
    opacity: .36;
    cursor: default;
}

.tp-v2-compose-content {
    position: relative;
    max-height: calc(100dvh - 158px);
    overflow-y: auto;
    padding: 20px 20px 17px;
}

.tp-v2-author-row {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;
    align-items: start;
}

.tp-v2-avatar {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(135deg, #24242c, #15151b);
}

.tp-v2-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.tp-v2-copy-area {
    min-width: 0;
}

.tp-v2-caption {
    width: 100%;
    min-height: 128px;
    box-sizing: border-box;
    padding: 7px 1px 12px;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: #f7f7f8;
    font-family: inherit;
    font-size: 20px;
    line-height: 1.45;
}

.tp-v2-caption::placeholder {
    color: #74747d;
}

.tp-v2-caption-hint {
    padding-bottom: 12px;
    color: #767680;
    font-size: 11px;
    line-height: 1.4;
}

.tp-v2-media-card {
    margin: 8px 0 15px 58px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 15px;
    background: #111116;
}

.tp-v2-media-card[hidden] {
    display: none;
}

.tp-v2-media-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 11px;
}

.tp-v2-media-head > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.tp-v2-media-head strong {
    overflow: hidden;
    color: #f4f4f6;
    font-size: 13px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-v2-media-head span {
    color: #81818b;
    font-size: 11px;
}

.tp-v2-remove-media {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.tp-v2-media-preview audio,
.tp-v2-media-preview video {
    width: 100%;
    display: block;
    border-radius: 11px;
}

.tp-v2-media-preview video {
    max-height: 250px;
    background: #000;
}

.tp-v2-drop-message {
    margin: 4px 0 14px 58px;
    padding: 16px 18px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #74747f;
    text-align: center;
    font-size: 12px;
}

.tp-v2-drop-message[hidden] {
    display: none;
}

.tp-v2-toolbar {
    margin-left: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.tp-v2-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tp-v2-tool {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: transparent;
    color: #d9d9df;
    cursor: pointer;
}

.tp-v2-tool:hover {
    border-color: rgba(247, 37, 133, .42);
    background: rgba(247, 37, 133, .08);
}

.tp-v2-record,
.tp-v2-upload {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

.tp-v2-record img {
    width: 19px;
    height: 19px;
    display: block;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.tp-v2-record.is-recording {
    border-color: #f72585;
    background: rgba(247, 37, 133, .16);
    animation: tp-v2-recording-pulse 1.15s ease-in-out infinite;
}

@keyframes tp-v2-recording-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(247, 37, 133, 0);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(247, 37, 133, .12);
    }
}

.tp-v2-upload {
    position: relative;
}

.tp-v2-upload svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.tp-v2-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tp-v2-ai {
    gap: 6px;
    padding: 0 12px;
}

.tp-v2-ai svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    pointer-events: none;
}

.tp-v2-ai span {
    font-size: 12px;
    font-weight: 750;
}

.tp-v2-record-time {
    color: #85858e;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.tp-v2-status {
    min-height: 21px;
    margin: 11px 0 0 58px;
    color: #85858f;
    font-size: 12px;
    line-height: 1.45;
}

.tp-v2-status[data-kind="error"] {
    color: #ff6977;
}

.tp-v2-status[data-kind="success"] {
    color: #71d99d;
}

.tp-v2-status[data-kind="ai"] {
    color: #bf8cff;
}

.tp-v2-drop-shield {
    position: absolute;
    inset: 61px 0 0;
    z-index: 8;
    display: none;
    place-items: center;
    align-content: center;
    gap: 12px;
    background: rgba(9, 9, 11, .92);
    border: 2px dashed rgba(247, 37, 133, .7);
    border-radius: 0 0 18px 18px;
    pointer-events: none;
}

.tp-v2-drop-shield img {
    width: 42px;
    height: 42px;
    filter: brightness(0) invert(1);
}

.tp-v2-drop-shield strong {
    font-size: 16px;
}

.tp-v2-compose-modal.is-dragging
.tp-v2-drop-shield {
    display: grid;
}

@media (max-width: 720px) {

    .tp-v2-compose-overlay {
        align-items: stretch;
        padding: 0;
        background: #09090b;
        backdrop-filter: none;
    }

    .tp-v2-compose-modal {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .tp-v2-compose-head {
        min-height: 56px;
        grid-template-columns: 42px 1fr auto;
        padding:
            max(
                5px,
                env(safe-area-inset-top)
            )
            10px
            5px;
    }

    .tp-v2-compose-head strong {
        font-size: 17px;
    }

    .tp-v2-compose-content {
        height: calc(100dvh - 58px);
        max-height: none;
        box-sizing: border-box;
        padding:
            16px
            15px
            calc(
                20px
                +
                env(safe-area-inset-bottom)
            );
    }

    .tp-v2-author-row {
        grid-template-columns: 42px 1fr;
        gap: 10px;
    }

    .tp-v2-avatar {
        width: 42px;
        height: 42px;
    }

    .tp-v2-caption {
        min-height: 36vh;
        font-size: 19px;
    }

    .tp-v2-media-card,
    .tp-v2-drop-message,
    .tp-v2-toolbar,
    .tp-v2-status {
        margin-left: 52px;
    }

    .tp-v2-toolbar {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin-right: -4px;
        padding: 12px 0 8px;
        background: rgba(9, 9, 11, .96);
        backdrop-filter: blur(10px);
    }

    .tp-v2-ai span {
        display: none;
    }

    .tp-v2-ai {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }

    .tp-v2-media-preview video {
        max-height: 31vh;
    }

    .tp-v2-drop-shield {
        inset: 57px 0 0;
        border-radius: 0;
    }
}

/* === TAPPODS COMPOSER V2A END === */

/* === TAPPODS V1.9B CONVERSATION UI BEGIN === */

main.feed-column.tp-conversation-mode
> :not(.tp-conversation-view):not(#tp-global-player) {
    display: none !important;
}

.tp-conversation-view {
    width: 100%;
    min-width: 0;
    padding-bottom: 18px;
    background: var(--background, #0b0b0d);
}

.tp-conversation-header {
    position: sticky;
    top: 0;
    z-index: 18;
    min-height: 56px;
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(11,11,13,.94);
    backdrop-filter: blur(16px);
}

.tp-conversation-title {
    grid-column: 2;
    justify-self: center;
    font-size: 17px;
    font-weight: 800;
}

.tp-conversation-back {
    grid-column: 1;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 25px;
    cursor: pointer;
}

.tp-conversation-back:hover {
    background: rgba(255,255,255,.08);
}

.tp-conversation-state {
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: 28px;
    color: #888894;
    font-size: 13px;
    text-align: center;
}

.tp-conversation-state.is-error {
    color: #ff6b78;
}

.tp-conversation-content {
    width: 100%;
}

.tp-conversation-card {
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

.tp-conversation-card--root {
    border-top: 0 !important;
}

.tp-conversation-reply-bar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tp-conversation-reply-count {
    color: #8c8c96;
    font-size: 12px;
    font-weight: 700;
}

.tp-conversation-reply-button {
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #f72585, #b43df1);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.tp-conversation-replies {
    width: 100%;
}

.tp-conversation-card--reply {
    position: relative;
    padding-left: 22px !important;
}

.tp-conversation-card--reply::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    border-radius: 999px;
    background: rgba(190,76,245,.34);
}

.tp-conversation-empty {
    display: grid;
    gap: 7px;
    justify-items: center;
    padding: 42px 22px;
    color: #8b8b95;
    text-align: center;
}

.tp-conversation-empty strong {
    color: #f1f1f3;
    font-size: 15px;
}

.tp-conversation-empty p {
    margin: 0;
    font-size: 12px;
}

@media (max-width: 720px) {
    .tp-conversation-header {
        min-height: 52px;
        padding:
            max(
                0px,
                env(safe-area-inset-top)
            )
            8px
            0;
    }

    .tp-conversation-card--reply {
        padding-left: 16px !important;
    }

    .tp-conversation-card--reply::before {
        left: 6px;
    }

    .tp-conversation-reply-bar {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* === TAPPODS V1.9B CONVERSATION UI END === */

/* === TAPPODS V1.9C TEXT COMMENTS BEGIN === */

.tp-text-comment-composer {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tp-text-comment-input {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    outline: 0;
    background: rgba(255,255,255,.035);
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
}

.tp-text-comment-input:focus {
    border-color: rgba(226,51,197,.72);
}

.tp-text-comment-input::placeholder {
    color: #777783;
}

.tp-text-comment-composer-footer {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tp-text-comment-status {
    min-width: 0;
    color: #8a8a95;
    font-size: 11px;
}

.tp-text-comment-submit {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #f72585, #b43df1);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.tp-text-comment-submit:disabled {
    opacity: .42;
    cursor: default;
}

.tp-text-comment {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.tp-text-comment-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: #24242b;
    background-position: center;
    background-size: cover;
    color: #d9d9df;
    font-size: 12px;
    font-weight: 800;
}

.tp-text-comment-content {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.tp-text-comment-head {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.tp-text-comment-name {
    min-width: 0;
    overflow: hidden;
    color: #f3f3f5;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-text-comment-handle {
    min-width: 0;
    overflow: hidden;
    color: #777783;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-text-comment-body {
    color: #dedee3;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .tp-text-comment-composer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tp-text-comment {
        grid-template-columns: 34px minmax(0, 1fr);
        padding-left: 12px;
        padding-right: 12px;
    }

    .tp-text-comment-avatar {
        width: 34px;
        height: 34px;
    }
}

/* === TAPPODS V1.9C TEXT COMMENTS END === */

/* === TAPPODS V1.9D CONVERSATION COUNT UI BEGIN === */

.tp-v19d-conversation-meta {
    display: flex;
    align-items: center;
    min-height: 26px;
    padding: 0 16px 10px;
}

.tp-v19d-conversation-link {
    appearance: none;
    border: 0;
    padding: 2px 0;
    background: transparent;
    color: #858590;
    font: inherit;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
}

.tp-v19d-conversation-link:hover,
.tp-v19d-conversation-link:focus-visible {
    color: #d4d4da;
    text-decoration: underline;
}

@media (max-width: 720px) {
    .tp-v19d-conversation-meta {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* === TAPPODS V1.9D CONVERSATION COUNT UI END === */

/* === TAPPODS V1.9E REPLY ACTION UI BEGIN === */

.tp-v19e-actions,
.tp-v19e-owner-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tp-v19e-actions {
    margin-top: 8px;
}

.tp-v19e-owner-actions {
    justify-content: flex-end;
    padding: 0 16px 10px;
}

.tp-v19e-action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    padding: 3px 0;
    background: transparent;
    color: #858590;
    font: inherit;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
}

.tp-v19e-action:hover,
.tp-v19e-action:focus-visible {
    color: #ededf0;
}

.tp-v19e-action:disabled {
    opacity: .48;
    cursor: default;
}

.tp-v19e-like svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.tp-v19e-like.is-liked {
    color: #f43fbf;
}

.tp-v19e-like.is-liked svg {
    fill: currentColor;
}

.tp-v19e-delete:hover,
.tp-v19e-delete:focus-visible {
    color: #ff6b7a;
}

/* === TAPPODS V1.9E REPLY ACTION UI END === */

/* === TAPPODS V1.9G NOTIFICATIONS UI BEGIN === */

.primary-nav
a[data-tp-notifications-nav="1"] {
    position: relative;
}

.tp-notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ff377f,
            #c93cff
        );
    box-shadow:
        0 0 0 2px
        rgba(
            0,
            0,
            0,
            .35
        );
}

.tp-notification-badge[hidden] {
    display: none !important;
}

body.tp-notifications-open {
    overflow: hidden;
}

.tp-notifications-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:
        54px
        18px
        110px;
    overflow-y: auto;
    background:
        rgba(
            3,
            3,
            7,
            .72
        );
    backdrop-filter:
        blur(8px);
    -webkit-backdrop-filter:
        blur(8px);
}

.tp-notifications-overlay[hidden] {
    display: none !important;
}

.tp-notifications-panel {
    width:
        min(
            620px,
            100%
        );
    max-height:
        calc(
            100vh
            -
            120px
        );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
    border-radius: 22px;
    background:
        rgba(
            15,
            15,
            19,
            .98
        );
    box-shadow:
        0 24px 80px
        rgba(
            0,
            0,
            0,
            .5
        );
}

.tp-notifications-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding:
        20px
        20px
        16px;
    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );
}

.tp-notifications-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.2;
}

.tp-notifications-header p {
    margin:
        5px
        0
        0;
    color:
        rgba(
            255,
            255,
            255,
            .56
        );
    font-size: 12px;
}

.tp-notifications-close {
    width: 34px;
    height: 34px;
    flex:
        0
        0
        34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
    border-radius: 999px;
    color: #ffffff;
    background:
        rgba(
            255,
            255,
            255,
            .05
        );
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.tp-notifications-close:hover {
    background:
        rgba(
            255,
            255,
            255,
            .1
        );
}

.tp-notifications-toolbar {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding:
        8px
        20px;
    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );
    color:
        rgba(
            255,
            255,
            255,
            .5
        );
    font-size: 11px;
}

.tp-notifications-toolbar button {
    padding:
        7px
        11px;
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
    border-radius: 999px;
    color:
        rgba(
            255,
            255,
            255,
            .86
        );
    background:
        rgba(
            255,
            255,
            255,
            .04
        );
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tp-notifications-toolbar button:hover:not(:disabled) {
    border-color:
        rgba(
            255,
            55,
            127,
            .45
        );
    background:
        rgba(
            255,
            55,
            127,
            .1
        );
}

.tp-notifications-toolbar button:disabled {
    opacity: .4;
    cursor: default;
}

.tp-notifications-list {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tp-notification-item {
    width: 100%;
    display: grid;
    grid-template-columns:
        44px
        minmax(
            0,
            1fr
        )
        auto;
    align-items: flex-start;
    gap: 12px;
    padding:
        16px
        20px;
    border: 0;
    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .065
        );
    color: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.tp-notification-item:hover {
    background:
        rgba(
            255,
            255,
            255,
            .035
        );
}

.tp-notification-item.is-unread {
    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                55,
                127,
                .08
            ),
            rgba(
                201,
                60,
                255,
                .025
            )
        );
}

.tp-notification-item.is-unread:hover {
    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                55,
                127,
                .12
            ),
            rgba(
                201,
                60,
                255,
                .045
            )
        );
}

.tp-notification-avatar {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    color: #ffffff;
    background:
        rgba(
            255,
            255,
            255,
            .08
        );
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}

.tp-notification-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.tp-notification-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tp-notification-line {
    color:
        rgba(
            255,
            255,
            255,
            .82
        );
    font-size: 13px;
    line-height: 1.45;
}

.tp-notification-line strong {
    color: #ffffff;
    font-weight: 800;
}

.tp-notification-time {
    margin-left: 8px;
    color:
        rgba(
            255,
            255,
            255,
            .4
        );
    font-size: 11px;
    white-space: nowrap;
}

.tp-notification-preview {
    display: -webkit-box;
    overflow: hidden;
    color:
        rgba(
            255,
            255,
            255,
            .52
        );
    font-size: 12px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tp-notification-unread-dot {
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            #ff377f,
            #c93cff
        );
    box-shadow:
        0 0 12px
        rgba(
            255,
            55,
            127,
            .5
        );
}

.tp-notifications-loading,
.tp-notifications-error,
.tp-notifications-empty {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 32px;
    color:
        rgba(
            255,
            255,
            255,
            .55
        );
    text-align: center;
    font-size: 13px;
}

.tp-notifications-empty strong {
    color: #ffffff;
    font-size: 16px;
}

.tp-notifications-empty span {
    max-width: 330px;
    line-height: 1.5;
}

.tp-notifications-error {
    color:
        rgba(
            255,
            160,
            180,
            .9
        );
}

@media (
    max-width: 640px
) {
    .tp-notifications-overlay {
        align-items: stretch;
        padding:
            0
            0
            84px;
        background: #0f0f13;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .tp-notifications-panel {
        width: 100%;
        max-height: none;
        min-height:
            calc(
                100vh
                -
                84px
            );
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .tp-notifications-header {
        padding:
            16px
            16px
            14px;
    }

    .tp-notifications-toolbar {
        padding:
            8px
            16px;
    }

    .tp-notification-item {
        padding:
            15px
            16px;
    }
}

/* === TAPPODS V1.9G NOTIFICATIONS UI END === */