.accountPage {
    --account-accent: #e02a91;
    --account-accent-light: #f45bad;
    --account-bg: #1e1e1e;
    --account-surface: #292929;
    --account-surface-light: #323232;
    --account-border: #454545;
    --account-text: #f2f2f2;
    --account-muted: #aaa;
    box-sizing: border-box;
    max-width: 1250px;
    padding: 18px 18px 44px;
    text-align: left;
}

.accountPage *,
.accountNav * {
    box-sizing: border-box;
}

.accountPage h1,
.accountPage h2,
.accountPage h3,
.accountPage p,
.accountPage dl,
.accountPage dd {
    margin-top: 0;
}

.main-box .accountPage h1,
.main-box .accountPage h2,
.main-box .accountPage h3 {
    padding: 0;
    color: var(--account-text);
    background: none;
    line-height: 1.25;
}

.accountHero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 126px;
    padding: 24px 28px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background:
        radial-gradient(circle at 82% 15%, rgba(224, 42, 145, .2), transparent 32%),
        linear-gradient(118deg, #303030 0%, #252525 64%, #21171d 100%);
}

.accountHero::after {
    position: absolute;
    right: 0;
    bottom: -85px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, .04);
    border-radius: 50%;
    content: "";
}

.accountHeroIdentity,
.accountHeroStats {
    position: relative;
    z-index: 1;
}

.accountHeroIdentity {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    gap: 18px;
}

.accountHeroIdentity > div {
    min-width: 0;
}

.accountAvatar {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--account-accent-light), #a81669);
    box-shadow: 0 10px 28px rgba(224, 42, 145, .24);
    font-size: 31px;
}

.accountAvatar.isVip {
    align-content: center;
    color: #f4ce70;
    background: radial-gradient(circle at 50% 35%, rgba(244, 206, 112, .2), rgba(91, 65, 16, .45));
    border: 1px solid rgba(244, 206, 112, .55);
    box-shadow: 0 8px 24px rgba(218, 175, 74, .2);
    line-height: 1;
}

.accountAvatar.isVip i {
    font-size: .68em;
}

.accountAvatarVipLabel {
    display: block;
    margin-top: 2px;
    color: #f4ce70;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
}

.accountEyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--account-accent-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.main-box .accountHeroIdentity h1 {
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 27px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountDecoration {
    display: inline-block;
    margin-right: 0;
    font-size: .78em;
    line-height: 1;
    vertical-align: .08em;
}

.accountDecoration.isVipDefault {
    color: #f4ce70;
}

.accountHeroIdentity p {
    margin-bottom: 0;
    overflow: hidden;
    color: #b8b8b8;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountHeroStats {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.accountHeroActions {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
}

.accountHeroPoints {
    display: inline-flex;
    min-height: 22px;
    padding: 3px 7px;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    border-radius: 4px;
    color: #fff;
    background: rgba(16, 16, 16, .38);
    white-space: nowrap;
}

.accountHeroPoints > span {
    color: #999;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
}

.accountHeroPoints > strong {
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

.accountHeroLogout {
    position: relative;
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: #aaa;
    background: rgba(16, 16, 16, .38);
    font-size: 11px;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.accountHeroLogout:hover,
.accountHeroLogout:focus-visible {
    border-color: rgba(224, 42, 145, .65);
    color: #fff;
    background: rgba(224, 42, 145, .18);
    text-decoration: none;
}

.accountHeroLogout::before,
.accountHeroLogout::after {
    position: absolute;
    z-index: 10;
    top: 50%;
    right: calc(100% + 7px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}

.accountHeroLogout::before {
    right: calc(100% + 1px);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #454545;
    content: "";
    transform: translateY(-50%);
}

.accountHeroLogout::after {
    padding: 6px 8px;
    border: 1px solid #454545;
    border-radius: 4px;
    content: attr(data-tooltip);
    color: #f2f2f2;
    background: #242424;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateY(-50%);
}

.accountHeroLogout:hover::before,
.accountHeroLogout:hover::after,
.accountHeroLogout:focus-visible::before,
.accountHeroLogout:focus-visible::after {
    visibility: visible;
    opacity: 1;
}

.accountHeroStats > div {
    min-width: 126px;
    padding: 13px 17px;
    border-radius: 7px;
    background: rgba(16, 16, 16, .38);
}

.accountHeroStats dt {
    margin-bottom: 5px;
    color: #999;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.accountHeroStats dd {
    margin-bottom: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.accountHeroStats dd.isActive {
    color: var(--account-accent-light);
}

.accountNav {
    --account-accent: #e02a91;
    --account-accent-light: #f45bad;
    max-width: 1250px;
    margin: 0 auto 28px;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
    background: #252525;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.accountNavList {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.accountNavItem {
    position: relative;
    min-width: 0;
    list-style: none;
}

.accountNavItem::after {
    position: absolute;
    right: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(255, 255, 255, .06);
    content: "";
}

.accountNavItem:last-child::after {
    display: none;
}

.accountNavLink {
    position: relative;
    display: flex;
    min-height: 78px;
    padding: 12px 7px 11px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-direction: column;
    color: #aaa;
    text-align: center;
    transition: color .18s ease, background-color .18s ease;
}

.accountNavLink::after {
    position: absolute;
    right: 22%;
    bottom: 0;
    left: 22%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--account-accent);
    content: "";
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s ease, transform .18s ease;
}

.accountNavLink i {
    font-size: 19px;
    transition: transform .18s ease;
}

.accountNavLink span {
    max-width: 100%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.18;
}

.accountNavLink:hover,
.accountNavLink:focus-visible,
.accountNavItem.active .accountNavLink {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .035);
}

.accountNavLink:hover i,
.accountNavLink:focus-visible i,
.accountNavItem.active .accountNavLink i {
    color: var(--account-accent-light);
    transform: translateY(-1px);
}

.accountNavItem.active .accountNavLink::after {
    opacity: 1;
    transform: scaleX(1);
}

.accountPageHeading {
    display: flex;
    max-width: 780px;
    margin: 0 auto 28px;
    align-items: flex-start;
    gap: 15px;
}

.accountSectionIcon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--account-accent-light);
    background: rgba(224, 42, 145, .13);
    font-size: 17px;
}

.accountPageHeading > div > span {
    display: block;
    margin-bottom: 3px;
    color: var(--account-accent-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.main-box .accountPageHeading h2 {
    margin-bottom: 6px;
    font-size: 25px;
}

.accountPageHeading p,
.accountSectionHeading p {
    margin-bottom: 0;
    color: var(--account-muted);
    font-size: 13px;
    line-height: 1.5;
}

.accountPageNotice {
    max-width: 780px;
    margin: 0 auto 18px;
}

.accountSettingsSection {
    max-width: 980px;
    margin: 0 auto 30px;
}

.accountSectionHeading {
    display: flex;
    margin-bottom: 13px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.main-box .accountSectionHeading h2 {
    margin-bottom: 4px;
    font-size: 17px;
}

.accountSectionHeading > i {
    padding: 0 4px 4px;
    color: #555;
    font-size: 24px;
}

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

.accountPage.settingsPage .std-form.accountSettingCard,
.accountPage.settingsPage .std-form.accountPreferenceCard {
    width: auto;
    max-width: none;
    margin: 0;
    text-align: left;
}

.accountPage .accountSettingCard,
.accountPage .accountPreferenceCard {
    border: 0;
    border-radius: 8px;
    background: var(--account-surface);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
}

.accountPage .accountSettingCard {
    display: flex;
    min-height: 100%;
    padding: 22px;
    flex-direction: column;
}

.accountCardHeader,
.accountPreferenceHeader {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.accountCardHeader {
    margin-bottom: 20px;
}

.accountCardHeader > span,
.accountPreferenceHeader > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 6px;
    color: var(--account-accent-light);
    background: rgba(224, 42, 145, .11);
}

.accountCardHeader > span {
    width: 39px;
    height: 39px;
    font-size: 16px;
}

.main-box .accountCardHeader h3,
.main-box .accountPreferenceHeader h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.accountCardHeader p,
.accountPreferenceHeader p {
    margin-bottom: 0;
    color: #999;
    font-size: 11px;
    line-height: 1.4;
}

.accountField {
    display: block;
    margin-bottom: 14px;
    color: #ccc;
    font-size: 11px;
    font-weight: 700;
}

.accountField > span:first-child {
    display: block;
    margin-bottom: 6px;
}

.accountInputWrap {
    position: relative;
    display: block;
}

.accountInputWrap > i {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    width: 15px;
    color: #777;
    text-align: center;
    transform: translateY(-50%);
}

.accountPage .accountInputWrap input,
.accountPage .accountSelectRow select {
    width: 100%;
    height: 43px;
    border: 1px solid #4b4b4b;
    border-radius: 5px;
    outline: 0;
    color: #f2f2f2;
    background: #202020;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.accountPage .accountInputWrap input {
    padding: 8px 13px 8px 40px;
}

.accountPage .accountInputWrap input:focus,
.accountPage .accountSelectRow select:focus {
    border-color: var(--account-accent);
    box-shadow: 0 0 0 3px rgba(224, 42, 145, .12);
}

.accountInputWrap.isReadonly input {
    color: #929292;
    background: #262626;
}

.accountField.hasError .accountInputWrap input {
    border-color: #cf5c68;
}

.accountFieldError {
    display: block;
    margin-top: 5px;
    color: #ef8b95;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.35;
}

.accountCardActions {
    margin-top: auto;
    padding-top: 5px;
}

.accountPage button.accountPrimaryButton,
.accountPage button.accountDangerButton,
.accountPage button.accountTextButton {
    width: auto;
    border: 0;
    cursor: pointer;
    box-shadow: none;
    font-family: inherit;
}

.accountPage button.accountPrimaryButton {
    display: inline-flex;
    min-height: 40px;
    padding: 9px 15px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(135deg, #c81f80, var(--account-accent));
    font-size: 12px;
    font-weight: 700;
    transition: filter .18s ease, transform .18s ease;
}

.accountPage button.accountPrimaryButton:hover,
.accountPage button.accountPrimaryButton:focus-visible {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.accountPage .accountPreferenceCard {
    display: flex;
    min-height: 188px;
    padding: 19px;
    flex-direction: column;
}

.accountPreferenceHeader {
    margin-bottom: 17px;
}

.accountPreferenceHeader > span {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.accountSwitchRow {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start;
    gap: 10px;
    color: #c8c8c8;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.4;
}

.accountSwitchRow input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.accountSwitch {
    position: relative;
    width: 34px;
    height: 19px;
    flex: 0 0 34px;
    border-radius: 20px;
    background: #555;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.accountSwitch::after {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ddd;
    content: "";
    transition: transform .18s ease;
}

.accountSwitchRow input:checked + .accountSwitch {
    background: var(--account-accent);
}

.accountSwitchRow input:checked + .accountSwitch::after {
    background: #fff;
    transform: translateX(15px);
}

.accountSwitchRow input:focus-visible + .accountSwitch {
    box-shadow: 0 0 0 3px rgba(224, 42, 145, .24);
}

.accountPage button.accountTextButton {
    margin-top: auto;
    padding: 5px 0;
    align-self: flex-start;
    color: var(--account-accent-light);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.accountPage button.accountTextButton:hover,
.accountPage button.accountTextButton:focus-visible {
    color: #fff;
}

.accountPreferenceCardWide {
    grid-column: 1 / -1;
}

.accountSelectRow {
    display: flex;
    align-items: center;
    gap: 12px;
}

.accountPage .accountSelectRow select {
    max-width: 380px;
    padding: 8px 10px;
}

.accountPage .accountSelectRow .accountTextButton {
    margin-top: 0;
}

.accountDangerZone {
    max-width: 980px;
    margin: 34px auto 0;
    border-top: 1px solid #49363a;
    color: #ddd;
}

.accountDangerZone > summary {
    display: flex;
    min-height: 76px;
    padding: 17px 5px;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.accountDangerZone > summary::-webkit-details-marker {
    display: none;
}

.accountDangerIcon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 50%;
    color: #d77a83;
    background: rgba(184, 64, 76, .12);
}

.accountDangerLabel {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.accountDangerLabel strong {
    font-size: 13px;
}

.accountDangerLabel small {
    color: #888;
    font-size: 10px;
}

.accountDangerChevron {
    color: #777;
    transition: transform .18s ease;
}

.accountDangerZone[open] .accountDangerChevron {
    transform: rotate(180deg);
}

.accountDangerBody {
    max-width: 540px;
    padding: 0 5px 22px 53px;
}

.accountPage.settingsPage .accountDangerBody .std-form {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.accountDangerBody > form > p {
    color: #aaa;
    font-size: 11px;
    line-height: 1.5;
}

.accountPage button.accountDangerButton {
    display: inline-flex;
    min-height: 38px;
    padding: 8px 13px;
    align-items: center;
    gap: 7px;
    border: 1px solid #9e4a53;
    border-radius: 5px;
    color: #efadb3;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.accountPage button.accountDangerButton:hover,
.accountPage button.accountDangerButton:focus-visible {
    color: #fff;
    background: #a33a45;
}

.accountDangerNotice {
    margin: 0;
}

.accountDangerNotice a {
    color: inherit;
}

.accountNav + h1.arrow,
.accountNav + .text-left h1.arrow {
    margin: 0 0 22px;
    padding: 0 0 13px;
    border-bottom: 1px solid #3d3d3d;
    color: #f1f1f1;
    background: transparent;
    font-size: 24px;
    line-height: 1.3;
}

.accountNav + h1.arrow::before,
.accountNav + .text-left h1.arrow::before {
    display: none;
    content: none;
}

.srOnly {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1050px) {
    .accountNavList {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .accountNavItem:nth-child(5)::after,
    .accountNavItem:last-child::after {
        display: none;
    }

    .accountNavItem:nth-child(n + 6) {
        border-top: 1px solid rgba(255, 255, 255, .05);
    }
}

@media (max-width: 760px) {
    .accountPage {
        width: 100%;
        padding: 10px 12px 34px;
    }

    .accountHero {
        min-height: 0;
        padding: 20px;
        align-items: center;
        flex-direction: row;
    }

    .accountHeroStats {
        width: 100%;
    }

    .accountHeroActions {
        width: auto;
    }

    .accountHeroStats > div {
        min-width: 0;
        flex: 1;
    }

    .accountNav {
        margin-bottom: 24px;
        overflow: visible;
        border-radius: 0 0 8px 8px;
        scrollbar-width: auto;
        scroll-snap-type: none;
    }

    .accountNavList {
        display: grid;
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .accountNavItem {
        width: auto;
        flex: none;
        border-top: 0 !important;
        scroll-snap-align: none;
    }

    .accountNavItem:nth-child(5)::after {
        display: none;
    }

    .accountNavLink {
        min-height: 70px;
    }

    .accountSettingsGrid,
    .accountPreferencesGrid {
        grid-template-columns: 1fr;
    }

    .accountPreferenceCardWide {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .accountAvatar {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        font-size: 25px;
    }

    .main-box .accountHeroIdentity h1 {
        font-size: 22px;
    }

    .accountHeroIdentity p {
        max-width: 225px;
    }

    .accountHeroStats > div {
        padding: 11px 13px;
    }

    .accountHeroStats dd {
        font-size: 17px;
    }

    .accountPageHeading {
        margin-bottom: 24px;
    }

    .main-box .accountPageHeading h2 {
        font-size: 21px;
    }

    .accountPage .accountSettingCard,
    .accountPage .accountPreferenceCard {
        padding: 18px;
    }

    .accountSelectRow {
        align-items: stretch;
        flex-direction: column;
    }

    .accountPage .accountSelectRow select {
        max-width: none;
    }

    .accountDangerBody {
        padding-left: 5px;
    }
}

/* Compact account layout shared by every profile tab. */
.accountPage {
    padding: 10px 14px 30px;
}

.accountHero {
    min-height: 76px;
    padding: 11px 18px;
    gap: 16px;
    border-radius: 8px 8px 0 0;
}

.accountHeroIdentity {
    gap: 11px;
}

.accountAvatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 21px;
}

.accountEyebrow {
    margin-bottom: 2px;
    font-size: 9px;
}

.main-box .accountHeroIdentity h1 {
    margin-bottom: 1px;
    font-size: 20px;
}

.accountHeroIdentity p {
    font-size: 11px;
}

.accountHeroStats {
    gap: 7px;
}

.accountHeroStats > div {
    min-width: 102px;
    padding: 7px 11px;
    border-radius: 5px;
}

.accountHeroStats dt {
    margin-bottom: 2px;
    font-size: 8px;
}

.accountHeroStats dd {
    font-size: 15px;
}

.accountNav {
    margin-bottom: 14px;
    border-radius: 0 0 8px 8px;
}

.accountNavItem::after {
    top: 12px;
    bottom: 12px;
}

.accountNavLink {
    min-height: 54px;
    padding: 7px 5px 6px;
    gap: 4px;
}

.accountNavLink i {
    font-size: 16px;
}

.accountNavLink span {
    font-size: 9px;
    line-height: 1.12;
}

.accountNavLink::after {
    height: 2px;
}

.accountCompactHeader {
    display: flex;
    width: 100%;
    max-width: 1120px;
    min-height: 45px;
    margin: 0 auto 12px;
    padding: 0 2px 10px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #3c3c3c;
    color: var(--account-text);
    text-align: left;
}

.accountCompactIcon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--account-accent-light);
    background: rgba(224, 42, 145, .12);
    font-size: 14px;
}

.accountCompactIcon.isActor,
.accountPersonAvatar.isActor {
    overflow: hidden;
    border: 1px solid #70566a;
    background: #252525;
}

.accountCompactIcon.isActor img,
.accountPersonAvatar.isActor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.accountActorNameIcon {
    color: #e2a9ca;
    font-size: .95em;
}

.accountCompactTitle {
    min-width: 0;
    flex: 1;
}

.main-box .accountCompactTitle h1,
.main-box .accountCompactTitle h2 {
    margin: 0 0 2px;
    padding: 0;
    overflow: hidden;
    color: var(--account-text);
    background: transparent;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountCompactTitle p {
    margin: 0;
    overflow: hidden;
    color: var(--account-muted);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountHeaderMetrics {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.accountCountPill,
.accountStatusBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

.accountCountPill {
    min-height: 25px;
    padding: 4px 9px;
    color: #bbb;
    background: #2e2e2e;
    font-size: 9px;
}

.accountCountPill.isAccent {
    color: #fff;
    background: rgba(224, 42, 145, .72);
}

.accountCompactContent {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    color: var(--account-text);
    text-align: left;
}

.accountNarrowContent {
    max-width: 820px;
}

.accountSettingsHeader {
    max-width: 980px;
}

.accountPageNotice,
.accountInlineNotice {
    max-width: 1120px;
}

.accountInlineNotice {
    display: flex;
    min-height: 34px;
    margin: 0 auto 10px;
    padding: 8px 11px;
    align-items: center;
    gap: 8px;
    border-left: 2px solid #6e6e6e;
    border-radius: 3px;
    color: #c8c8c8;
    background: #292929;
    font-size: 10px;
    line-height: 1.4;
    text-align: left;
}

.accountInlineNotice > i {
    flex: 0 0 auto;
    color: #aaa;
    font-size: 14px;
}

.accountInlineNotice a {
    color: var(--account-accent-light);
    font-weight: 700;
}

.accountInlineNotice.isSuccess {
    border-left-color: #6ca341;
}

.accountInlineNotice.isSuccess > i {
    color: #8fc660;
}

.accountInlineNotice.isError {
    border-left-color: #b44c5a;
}

.accountInlineNotice.isError > i {
    color: #dd7783;
}

.accountSubsectionTitle {
    display: flex;
    min-height: 31px;
    padding: 2px 0 7px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #343434;
}

.main-box .accountSubsectionTitle h2 {
    margin: 0;
    padding: 0;
    color: #e7e7e7;
    background: transparent;
    font-size: 13px;
    line-height: 1.25;
}

.accountSubsectionTitle > span {
    color: #777;
    font-size: 9px;
    font-weight: 700;
}

.accountHistoryTitle {
    margin-top: 14px;
}

.accountMovieGrid {
    margin: 3px -3px 0;
    justify-content: flex-start;
}

.accountMovieGrid > div,
.accountMovieGrid > div.big-box-video {
    width: 25%;
    min-width: 0;
    max-width: none;
    padding: 3px;
    flex: 0 0 25%;
}

.accountMovieGrid .big-box-video > div {
    border-radius: 4px;
    overflow: hidden;
}

.accountMovieGrid .big-box-video div.description {
    min-height: 27px;
    padding: 5px 7px;
}

.accountMovieGrid .big-box-video div.description h2 {
    font-weight: 400;
}

.accountMovieGrid .big-box-video div.description h2 a {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.2;
}

.accountMovieGrid .video-4k {
    display: none !important;
}

.accountMovieGrid .pictureWrap .infoWrap > .pill:first-child {
    margin: 3px;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.1;
}

.accountMovieGrid .pictureWrap > a {
    width: 100% !important;
}

.accountMovieGrid .pictureWrap img,
.accountMovieGrid .pictureWrap video {
    aspect-ratio: 412 / 165;
    object-fit: cover;
}

.accountCompactActionRow {
    padding: 7px 0 1px;
    text-align: right;
}

.accountPrimaryLink,
.accountSecondaryLink,
.accountPage button.accountSecondaryButton,
.accountIconButton {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.accountPrimaryLink {
    min-height: 29px;
    padding: 6px 10px;
    color: #fff;
    background: var(--account-accent);
    font-size: 9px;
}

.accountSecondaryLink,
.accountPage button.accountSecondaryButton {
    min-height: 27px;
    padding: 5px 9px;
    border: 1px solid #4b4b4b;
    color: #ccc;
    background: #2a2a2a;
    box-shadow: none;
    font-size: 9px;
}

.accountPrimaryLink:hover,
.accountSecondaryLink:hover,
.accountPrimaryLink:focus-visible,
.accountSecondaryLink:focus-visible,
.accountPage button.accountSecondaryButton:hover,
.accountPage button.accountSecondaryButton:focus-visible {
    color: #fff;
    border-color: #777;
    text-decoration: none;
}

.accountIconButton {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    color: #aaa;
    background: #343434;
    font-size: 11px;
}

.accountIconButton:hover,
.accountIconButton:focus-visible {
    color: #fff;
    background: var(--account-accent);
    text-decoration: none;
}

.accountEmptyState {
    display: flex;
    min-height: 112px;
    padding: 18px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #888;
    background: #272727;
    font-size: 11px;
}

.accountEmptyState > i {
    color: #666;
    font-size: 18px;
}

.accountEmptyState.isCompact {
    min-height: 58px;
}

.accountDataTableWrap {
    overflow-x: auto;
}

.accountDataTable {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    color: #bbb;
    background: #292929;
    font-size: 10px;
}

.accountDataTable th,
.accountDataTable td {
    padding: 8px 10px;
    border-bottom: 1px solid #373737;
    text-align: left;
}

.accountDataTable th {
    color: #777;
    background: #252525;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.accountDataTable tr:last-child td {
    border-bottom: 0;
}

.accountDataTable a {
    color: #e6e6e6;
    font-weight: 700;
}

.accountStatusBadge {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 8px;
}

.accountStatusBadge.isActive {
    color: #a8d982;
    background: rgba(104, 160, 62, .15);
}

.accountStatusBadge.isExpired {
    color: #aaa;
    background: #393939;
}

.accountPeopleList,
.accountGiftcardList,
.accountConversationList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.accountPeopleList li,
.accountGiftcardList li {
    display: flex;
    min-height: 49px;
    padding: 7px 3px;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #363636;
    list-style: none;
}

.accountPeopleList li:last-child,
.accountGiftcardList li:last-child {
    border-bottom: 0;
}

.accountPersonAvatar,
.accountGiftcardIcon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 50%;
    color: #bbb;
    background: #393939;
    font-size: 12px;
}

.accountGiftcardIcon {
    color: var(--account-accent-light);
    background: rgba(224, 42, 145, .12);
}

.accountPersonMeta,
.accountGiftcardCode {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.accountPersonMeta strong,
.accountGiftcardCode strong {
    overflow: hidden;
    color: #e4e4e4;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountPersonMeta small,
.accountGiftcardCode small {
    color: #777;
    font-size: 9px;
}

.accountInlineForm {
    margin: 0;
}

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

.accountMessageBox {
    display: flex;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    background: #272727;
}

.accountConversationList {
    display: block;
    width: 230px;
    flex: 0 0 230px;
    border: 0;
    border-right: 1px solid #3c3c3c;
    background: #242424;
}

.accountConversationList li {
    border-bottom: 1px solid #343434;
    list-style: none;
}

.accountConversationList li:last-child {
    border-bottom: 0;
}

.accountConversationList li a {
    display: flex;
    width: 100%;
    min-height: 54px;
    padding: 8px 9px;
    align-items: center;
    gap: 8px;
    color: #bbb;
    text-decoration: none;
}

.accountConversationList li:hover,
.accountConversationList li.active {
    background: #303030;
}

.accountConversationList li.active {
    box-shadow: inset 2px 0 0 var(--account-accent);
}

.accountConversationList .accountPersonAvatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 11px;
}

.accountConversationMeta {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.accountConversationMeta strong {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #e5e5e5;
    font-size: 10px;
    white-space: nowrap;
}

.accountConversationName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accountUnreadByName {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 17px;
    padding: 2px 5px;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #fff;
    background: var(--account-accent);
    font-size: 8px;
    line-height: 1;
}

.accountUnreadByName i {
    font-size: 8px;
}

.accountConversationMeta time,
.accountConversationList li span.date {
    color: #717171;
    font-size: 8px;
}

.accountRowChevron {
    color: #606060;
    font-size: 11px;
}

.accountConversationOverview {
    background: transparent;
}

.accountConversationOverview .accountConversationList {
    display: grid;
    width: 100%;
    flex-basis: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-right: 0;
    background: #3a3a3a;
}

.accountConversationOverview .accountConversationList li {
    border-bottom: 0;
    background: #292929;
}

.accountConversationOverview .accountConversationList li:hover {
    background: #303030;
}

.accountConversationPane,
.messagesList.accountConversationPane {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    vertical-align: initial;
}

.accountConversationHeader {
    display: flex;
    min-height: 48px;
    padding: 7px 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #3a3a3a;
    background: #2b2b2b;
}

.accountConversationHeader > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.accountConversationHeader > div > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.accountConversationHeader strong {
    overflow: hidden;
    color: #eee;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountConversationHeader strong small,
.accountConversationHeader span {
    color: #7d7d7d;
    font-size: 8px;
    font-weight: 400;
}

.accountMessagesScroll {
    min-height: 170px;
    padding: 7px 6px;
    flex: 1;
}

.messagesList .accountMessageRow,
.accountMessageRow {
    display: flex;
    overflow: visible;
    justify-content: flex-start;
}

.messagesList .accountMessageRow.isOwn {
    justify-content: flex-end;
}

.messagesList .singleMsg {
    max-width: 78%;
    margin: 3px 5px;
    padding: 7px 10px 5px;
    float: none;
    border: 0;
    border-radius: 10px 10px 10px 3px;
    color: #ddd;
    background: #363036;
    font-size: 10px;
    line-height: 1.4;
    text-align: left;
}

.messagesList .singleMsg.ownMsg {
    border: 0;
    border-radius: 10px 10px 3px 10px;
    color: #eee;
    background: #484848;
}

.accountMessageContent {
    overflow-wrap: anywhere;
}

.accountMessageDonation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 21px;
    margin-top: 5px;
    padding: 2px 6px 2px 3px;
    border: 1px solid #8b7338;
    border-radius: 999px;
    color: #d8c17c;
    background: #302b20;
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
}

.accountMessageDonation img,
.accountMessageDonation > i {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border-radius: 50%;
}

.accountMessageDonation img {
    object-fit: cover;
    object-position: center top;
}

.accountMessageDonation > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff4cc;
    background: #a38435;
    font-size: 7px;
    font-style: normal;
}

.accountMessageDonation strong {
    color: #f1d77f;
    font-size: 9px;
}

.accountMessageDonation span {
    color: #a99b70;
}

.accountMessageTime {
    display: block;
    margin-top: 3px;
    color: #858085;
    font-size: 7px;
    text-align: right;
}

.accountLoadPrevious,
.message-box .showPrevious.accountLoadPrevious {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 2px auto 7px;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    color: #aaa;
    background: #343434;
    font-size: 8px;
    text-align: center;
}

.accountMessageComposer,
.messagesList form.accountMessageComposer {
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid #3a3a3a;
    color: #bbb;
    background: #292929;
}

.accountMessageComposer textarea,
.messagesList form.accountMessageComposer textarea {
    display: block;
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin: 0 0 7px;
    padding: 8px 9px;
    resize: vertical;
    border: 1px solid #494949;
    border-radius: 4px;
    color: #eee;
    background: #202020;
    box-shadow: none;
    font: inherit;
    font-size: 10px;
}

.accountComposerActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.accountDonationField {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 9px;
}

.accountDonationField input {
    width: 55px;
    height: 29px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid #4b4b4b;
    color: #eee;
    background: #202020;
}

.accountDonationField small {
    font-size: 8px;
}

.accountComposerHint {
    margin: 6px 0 0;
    color: #717171;
    font-size: 8px;
    line-height: 1.35;
}

.accountMessageLoader {
    padding: 5px;
    text-align: center;
}

.accountMessageLoader img {
    width: 20px;
}

.accountSettingsSection {
    margin-bottom: 16px;
}

.accountSectionHeading {
    margin-bottom: 7px;
    align-items: center;
}

.main-box .accountSectionHeading h2 {
    margin-bottom: 1px;
    font-size: 13px;
}

.accountSectionHeading p {
    font-size: 9px;
    line-height: 1.35;
}

.accountSectionHeading > i {
    padding: 0 3px;
    font-size: 17px;
}

.accountSettingsGrid,
.accountPreferencesGrid {
    gap: 9px;
}

.accountPage .accountSettingCard {
    padding: 12px 13px;
}

.accountPage .accountPreferenceCard {
    min-height: 112px;
    padding: 11px 13px;
}

.accountCardHeader {
    margin-bottom: 10px;
}

.accountCardHeader,
.accountPreferenceHeader {
    gap: 9px;
}

.accountCardHeader > span {
    width: 31px;
    height: 31px;
    font-size: 13px;
}

.accountPreferenceHeader {
    margin-bottom: 9px;
}

.accountPreferenceHeader > span {
    width: 29px;
    height: 29px;
    font-size: 12px;
}

.main-box .accountCardHeader h3,
.main-box .accountPreferenceHeader h3 {
    margin-bottom: 1px;
    font-size: 12px;
}

.accountCardHeader p,
.accountPreferenceHeader p {
    font-size: 9px;
    line-height: 1.3;
}

.accountField {
    margin-bottom: 8px;
    font-size: 9px;
}

.accountField > span:first-child {
    margin-bottom: 3px;
}

.accountPage .accountInputWrap input,
.accountPage .accountSelectRow select {
    height: 34px;
    font-size: 10px;
}

.accountPage .accountInputWrap input {
    padding: 6px 10px 6px 34px;
}

.accountInputWrap > i {
    left: 11px;
    font-size: 10px;
}

.accountFieldError {
    margin-top: 3px;
    font-size: 8px;
}

.accountPage button.accountPrimaryButton {
    min-height: 32px;
    padding: 6px 11px;
    gap: 8px;
    border-radius: 4px;
    font-size: 9px;
}

.accountSwitchRow {
    margin-bottom: 8px;
    gap: 8px;
    font-size: 9px;
    line-height: 1.3;
}

.accountSwitch {
    width: 30px;
    height: 17px;
    flex-basis: 30px;
}

.accountSwitch::after {
    width: 11px;
    height: 11px;
}

.accountSwitchRow input:checked + .accountSwitch::after {
    transform: translateX(13px);
}

.accountPage button.accountTextButton {
    padding: 2px 0;
    font-size: 9px;
}

.accountSelectRow {
    gap: 9px;
}

.accountDangerZone {
    margin-top: 15px;
}

.accountDangerZone > summary {
    min-height: 49px;
    padding: 8px 3px;
}

.accountDangerIcon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 11px;
}

.accountDangerLabel strong {
    font-size: 10px;
}

.accountDangerLabel small {
    font-size: 8px;
}

.accountDangerBody {
    padding: 0 3px 14px 42px;
}

.accountPaymentContent {
    max-width: 780px;
    text-align: center;
}

body.pointsPurchaseMode {
    background: #151515;
}

.pointsPurchaseHeader {
    display: none;
    width: 100%;
    max-width: 780px;
    min-height: 60px;
    padding: 0 18px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.pointsPurchaseHeaderBack,
.pointsPurchaseHeaderBalance {
    display: inline-flex;
    align-items: center;
}

.pointsPurchaseHeaderBack {
    min-height: 44px;
    gap: 11px;
    color: #f3f3f3;
    font-size: 18px;
    text-decoration: none;
}

.pointsPurchaseHeaderBack i {
    color: #e02a91;
    font-size: 16px;
}

.pointsPurchaseHeaderBack:hover,
.pointsPurchaseHeaderBack:focus-visible {
    color: #fff;
    text-decoration: none;
}

.pointsPurchaseHeaderBalance {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    color: #858585;
    font-size: 9px;
    line-height: 1.2;
}

.pointsPurchaseHeaderBalance strong {
    color: #f45bad;
    font-size: 15px;
}

.pointsPurchasePage.accountPage {
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
}

.pointsPurchasePage .accountPaymentContent {
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
}

.pointsPurchasePanel {
    color: #f1f1f1;
    text-align: left;
}

.pointsPurchaseDesktopTitle {
    display: flex;
    margin: 0 0 7px;
    padding: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}

.pointsPurchaseDesktopHeading {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.pointsPurchaseDesktopBack {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border-radius: 50%;
    color: #e02a91;
    font-size: 15px;
    text-decoration: none;
}

.pointsPurchaseDesktopBack:hover,
.pointsPurchaseDesktopBack:focus-visible {
    color: #fff;
    background: rgba(224, 42, 145, .12);
    text-decoration: none;
}

.main-box .pointsPurchaseDesktopTitle h1 {
    margin: 0;
    color: #f3f3f3;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.25;
}

.pointsPurchaseDesktopTitle > span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: #999;
    font-size: 13px;
    white-space: nowrap;
}

.pointsPurchaseDesktopTitle > span strong {
    color: #e85aa9;
    font-size: 15px;
    font-weight: 800;
}

.pointsPurchaseIntro {
    margin: 0 0 12px;
    color: #a7a7a7;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.pointsVipAlternative {
    display: grid;
    margin: 0 0 22px;
    padding: 14px 16px;
    align-items: start;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    border: 1px solid rgba(238, 185, 67, .62);
    border-radius: 12px;
    background: linear-gradient(105deg, rgba(238, 185, 67, .17), rgba(238, 185, 67, .05));
    box-shadow: inset 3px 0 0 #eebb43, 0 8px 22px rgba(0, 0, 0, .14);
}

.pointsVipAlternativeIcon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(238, 185, 67, .55);
    border-radius: 50%;
    color: #2a210e;
    background: #eebb43;
    font-size: 12px;
}

.pointsVipAlternativeCopy > strong {
    display: block;
    color: #ffe3a0;
    font-size: 15px;
    line-height: 1.3;
}

.accountPage .pointsVipAlternativeCopy p {
    margin: 4px 0 0;
    color: #cbbd9a;
    font-size: 13px;
    line-height: 1.4;
}

.pointsVipAlternativeLink {
    display: inline-flex;
    min-height: 32px;
    margin-top: 10px;
    padding: 5px 10px;
    align-items: center;
    gap: 5px;
    border: 1px solid #eebb43;
    border-radius: 8px;
    color: #251c09;
    background: #eebb43;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.pointsVipAlternativeLink:hover,
.pointsVipAlternativeLink:focus-visible {
    color: #17120a;
    border-color: #ffd36a;
    background: #ffd36a;
    text-decoration: none;
}

.pointsVisuallyHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.pointsPurchaseForm {
    margin: 0;
}

.pointsPurchaseSection {
    margin: 0 0 28px;
}

.main-box .pointsPurchaseSection h2 {
    margin: 0 0 13px;
    color: #f3f3f3;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.pointsAmountControl {
    display: flex;
    width: min(100%, 390px);
    min-height: 58px;
    margin: 0 auto;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #3a3a3a;
    border-radius: 15px;
    background: #222;
}

.pointsAmountChooser {
    width: 100%;
}

.accountPage .pointsAmountStep {
    width: 62px;
    min-height: 56px;
    padding: 0;
    flex: 0 0 62px;
    border: 0;
    border-radius: 0;
    color: #d7d7d7;
    background: #292929;
    box-shadow: none;
    cursor: pointer;
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
}

.accountPage .pointsAmountStep:hover,
.accountPage .pointsAmountStep:focus-visible {
    color: #fff;
    background: #343434;
}

.pointsAmountField {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #202020;
}

.accountPage .pointsAmountField input {
    width: 108px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    font-size: 29px;
    font-weight: 800;
    line-height: 56px;
    text-align: right;
    appearance: textfield;
}

.accountPage .pointsAmountField input::-webkit-inner-spin-button,
.accountPage .pointsAmountField input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.pointsAmountField span {
    color: #aaa;
    font-size: 17px;
    font-weight: 600;
}

.pointsAmountPresets {
    display: grid;
    width: min(100%, 390px);
    margin: 9px auto 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.accountPage .pointsAmountPreset {
    min-height: 43px;
    padding: 7px 5px;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    color: #c8c8c8;
    background: #222;
    box-shadow: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}

.accountPage .pointsAmountPreset:hover,
.accountPage .pointsAmountPreset:focus-visible {
    color: #fff;
    border-color: #666;
}

.accountPage .pointsAmountPreset.isSelected {
    color: #fff;
    border-color: #e02a91;
    background: rgba(224, 42, 145, .13);
}

.accountPage .pointsBalanceAfterPurchase {
    width: min(100%, 390px);
    margin: 4px auto 0;
    color: #8e8e8e;
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

.pointsBalanceAfterPurchase strong {
    color: #e85aa9;
    font-size: 14px;
    font-weight: 800;
}

.pointsPaymentMethods {
    display: grid;
    gap: 10px;
}

.pointsPaymentMethod {
    position: relative;
    display: grid;
    min-height: 78px;
    padding: 14px 16px;
    align-items: center;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 12px;
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    color: #eee;
    background: #222;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.pointsPaymentMethod:hover {
    border-color: #5a5a5a;
    background: #252525;
}

.pointsPaymentMethod.isSelected {
    border-color: #e02a91;
    background: rgba(224, 42, 145, .09);
}

.accountPage .pointsPaymentChoice {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.pointsMethodIndicator {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #777;
    border-radius: 50%;
}

.pointsMethodIndicator::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e02a91;
    content: "";
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
    transition: opacity .16s ease, transform .16s ease;
}

.pointsPaymentChoice:focus-visible + .pointsMethodIndicator {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.pointsPaymentMethod.isSelected .pointsMethodIndicator {
    border-color: #e02a91;
}

.pointsPaymentMethod.isSelected .pointsMethodIndicator::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.pointsMethodCopy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.pointsMethodName {
    color: #f2f2f2;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.25;
}

.pointsMethodCopy small {
    color: #8e8e8e;
    font-size: 13px;
    line-height: 1.35;
}

.pointsPaymentMethod > strong {
    color: #f2f2f2;
    font-size: 15px;
    white-space: nowrap;
}

.pointsPurchaseTrust {
    display: grid;
    margin: 13px 0 0;
    gap: 5px;
}

.pointsPurchaseTrust p {
    display: flex;
    margin: 0;
    align-items: flex-start;
    gap: 8px;
    color: #aaa;
    font-size: 13px;
    line-height: 1.4;
}

.pointsPurchaseTrust i {
    margin-top: 2px;
    color: #e02a91;
    font-size: 10px;
}

.pointsPurchaseAction {
    position: sticky;
    z-index: 6;
    bottom: 8px;
    margin-top: 8px;
    padding-top: 6px;
    background: linear-gradient(to bottom, rgba(21, 21, 21, 0), #151515 7px);
}

.accountPage .pointsPurchaseSubmit {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 12px 18px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: #e02a91;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.25;
}

.accountPage .pointsPurchaseSubmit:hover,
.accountPage .pointsPurchaseSubmit:focus-visible {
    background: #f03ca0;
}

.pointsPurchaseSubmit strong {
    font-size: inherit;
}

.accountPage .pointsPurchaseLegal {
    margin: 16px 4px 0;
    color: #929292;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

.accountPage .pointsPurchaseLegal a {
    color: #c0c0c0;
    text-decoration: underline;
}

.accountPaymentContent .payment-option-box > h2.newPayments {
    display: flex;
    margin: 0 auto 8px;
    padding: 0 0 7px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #3b3b3b;
    color: #eee;
    background: transparent;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}

.accountPaymentContent h2.newPayments > span {
    color: #8f8f8f;
    font-size: 9px;
    font-weight: 400;
}

.accountPaymentContent h2.newPayments > .accountPointsBalance {
    display: inline-flex;
    max-width: none;
    align-items: center;
    gap: 8px;
    color: #b8b8b8;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
}

.accountPointsBalance > span {
    line-height: 1.25;
}

.accountPointsBalance > strong {
    display: inline-flex;
    min-width: 44px;
    min-height: 32px;
    padding: 5px 11px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 5px;
    color: #fff;
    background: var(--account-accent);
    box-shadow: 0 4px 12px rgba(224, 42, 145, .22);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.accountPaymentPage .payments_method_wrap {
    height: 74px;
    padding: 12px 0;
}

.accountPaymentPage .payment_method_select {
    top: 12px;
    padding: 5px 7px;
    font-size: 13px;
    line-height: 21px;
}

.accountPaymentPage .payment_method_select > div {
    padding: 4px 9px;
}

.accountPaymentPage .payment-form-button {
    min-height: 55px;
    margin: 5px 0;
    border-width: 1px;
}

.accountPaymentPage .payment-form-button .pf {
    line-height: 2.2rem;
}

.accountPaymentPage .period_row {
    padding: 7px 12px;
}

.accountPaymentPage .period_row .left,
.accountPaymentPage .period_row .center {
    font-size: 1rem;
}

.accountPaymentPage .payment_row {
    margin-bottom: 4px;
}

.accountPaymentPage .payment_options p,
.accountPaymentPage .payment_options .epoch_info {
    margin: 8px 0;
}

@media (max-width: 900px) {
    .accountConversationOverview .accountConversationList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .accountPage {
        padding: 8px 9px 26px;
    }

    .accountHero {
        padding: 10px 12px;
        gap: 8px;
    }

    .accountNav {
        margin-bottom: 11px;
        overflow: visible;
        scrollbar-width: auto;
        scroll-snap-type: none;
    }

    .accountNavList {
        display: grid;
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .accountNavItem {
        width: auto;
        flex: none;
        border-top: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, .05);
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        scroll-snap-align: none;
    }

    .accountNavItem::after {
        display: none !important;
    }

    .accountNavItem:nth-child(4n) {
        border-right: 0;
    }

    .accountNavItem:nth-child(n + 5) {
        border-bottom: 0;
    }

    .accountNavLink {
        min-height: 56px;
    }

    .accountCompactHeader {
        margin-bottom: 9px;
        padding-bottom: 8px;
    }

    .accountCompactTitle p {
        white-space: normal;
    }

    .accountPage .prepremiere_photos.accountMovieGrid.fb-25 > div,
    .accountPage .prepremiere_photos.accountMovieGrid.fb-25 > div.big-box-video {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .accountGiftcardList {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .accountConversationOverview .accountConversationList {
        grid-template-columns: 1fr;
    }

    .accountConversationLayout {
        flex-direction: column;
    }

    .accountConversationLayout .accountConversationList {
        display: grid;
        width: 100%;
        flex: 0 0 auto;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid #3c3c3c;
    }

    .accountConversationLayout .accountConversationList li {
        width: auto;
        min-width: 0;
        flex: none;
        border-right: 1px solid #343434;
        border-bottom: 1px solid #343434;
    }

    .accountConversationLayout .accountConversationList li.active {
        box-shadow: inset 0 -2px 0 var(--account-accent);
    }

    .accountConversationLayout .accountRowChevron {
        display: none;
    }

    .accountSettingsGrid,
    .accountPreferencesGrid {
        grid-template-columns: 1fr;
    }

    .accountPreferenceCardWide {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .accountHero {
        align-items: center;
        flex-direction: row;
    }

    .accountHeroStats > div {
        min-width: 0;
    }

    .accountHeroIdentity > div {
        min-width: 0;
    }

    .accountCompactHeader {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
    }

    .accountCompactTitle p {
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .main-box .accountCompactTitle h1,
    .main-box .accountCompactTitle h2 {
        font-size: 16px;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .accountHeaderMetrics {
        max-width: 150px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .accountDataTableWrap {
        overflow: visible;
    }

    .accountDataTable,
    .accountDataTable tbody {
        display: block;
        background: transparent;
    }

    .accountDataTable thead {
        display: none;
    }

    .accountDataTable tr {
        display: grid;
        margin-bottom: 5px;
        padding: 8px 9px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        border-radius: 4px;
        background: #292929;
    }

    .accountDataTable tr:last-child {
        margin-bottom: 0;
    }

    .accountDataTable td {
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .accountDataTable td:first-child {
        grid-column: 1 / -1;
        overflow-wrap: anywhere;
    }

    .accountDataTable td:nth-child(2),
    .accountDataTable td:nth-child(3) {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .accountDataTable td:nth-child(2)::before {
        color: #777;
        content: attr(data-label);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .accountDataTable td:nth-child(3) {
        justify-content: flex-end;
    }

    .accountPeopleList li,
    .accountGiftcardList li {
        flex-wrap: wrap;
    }

    .accountPeopleList .accountPersonMeta {
        min-width: calc(100% - 45px);
    }

    .accountPeopleList .accountSecondaryLink,
    .accountPeopleList .accountInlineForm {
        margin-left: 41px;
    }

    .accountGiftcardList .accountGiftcardCode {
        min-width: calc(100% - 45px);
    }

    .accountGiftcardList .accountStatusBadge {
        margin-left: 41px;
    }

    .accountComposerActions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .accountDonationField {
        justify-content: flex-end;
    }

    .accountComposerActions .accountPrimaryButton {
        width: 100%;
    }

    .accountPaymentContent .payment-option-box > h2.newPayments {
        gap: 10px;
    }

    .accountPaymentContent h2.newPayments > span {
        max-width: 52%;
        text-align: right;
    }

    .accountPaymentContent h2.newPayments > .accountPointsBalance {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .accountAvatar {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        font-size: 18px;
    }

    .main-box .accountHeroIdentity h1 {
        font-size: 16px;
    }

    .accountHero {
        padding: 8px 9px;
        gap: 7px;
    }

    .accountHeroIdentity {
        gap: 8px;
    }

    .accountHeroIdentity p {
        font-size: 9px;
    }

    .accountHeroActions {
        gap: 3px;
    }

    .accountHeroPoints {
        min-height: 20px;
        padding: 2px 5px;
        gap: 3px;
    }

    .accountHeroPoints > span {
        font-size: 7px;
    }

    .accountHeroPoints > strong {
        font-size: 11px;
    }

    .accountHeroLogout {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 10px;
    }

    .accountHeroStats > div {
        padding: 6px 9px;
    }

    .accountHeroStats dd {
        font-size: 14px;
    }

    .accountCompactIcon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .accountHeaderMetrics {
        gap: 4px;
    }

    .accountHeaderMetrics .accountCountPill:not(.isAccent) {
        display: inline-flex;
    }

    .accountCompactHeader {
        grid-template-columns: 31px minmax(0, 1fr);
        row-gap: 4px;
    }

    .accountCompactHeader > .accountCountPill,
    .accountCompactHeader > .accountHeaderMetrics {
        max-width: none;
        grid-column: 2;
        justify-self: start;
        justify-content: flex-start;
    }

    .accountPage .prepremiere_photos.accountMovieGrid.fb-25 > div,
    .accountPage .prepremiere_photos.accountMovieGrid.fb-25 > div.big-box-video {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .accountMovieGrid .big-box-video div.description {
        min-height: 24px;
        padding: 4px 6px;
    }

    .accountMovieGrid .big-box-video div.description h2 a {
        font-size: 9px !important;
    }

    .accountMovieGrid .pictureWrap .infoWrap > .pill:first-child {
        font-size: 8px;
    }

    .accountPage .accountSettingCard,
    .accountPage .accountPreferenceCard {
        padding: 11px;
    }

    .accountSelectRow {
        align-items: stretch;
        flex-direction: column;
    }

    .accountDangerBody {
        padding-left: 3px;
    }

    .accountDataTable th,
    .accountDataTable td {
        padding: 7px 8px;
        white-space: normal;
    }

    .accountDataTable td {
        padding: 0;
    }

    .accountPaymentPage .period_row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 10px;
    }

    .accountPaymentPage .period_row .left,
    .accountPaymentPage .period_row .center,
    .accountPaymentPage .period_row .right {
        min-width: 0;
        flex-basis: auto;
    }

    .accountPaymentPage .period_row .right {
        width: 100%;
        grid-column: 1 / -1;
    }

    .accountPaymentPage .period_row .right > a,
    .accountPaymentPage .period_row .right > button {
        width: 100%;
        max-width: 100%;
    }

    .accountPaymentPage .payment-form-button .pf-btns {
        width: 100%;
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .accountPaymentPage .payment-form-button .pf-btns > * {
        max-width: 100%;
    }

    .accountPaymentPage .payment_options .payment-form-button > .pf-1,
    .accountPaymentPage .payment_options .payment-form-button > .pf-2,
    .accountPaymentPage .payment_options .payment-form-button > .pf-3 {
        min-width: 0;
        padding: 5px 4px;
        flex: 1 1 33.333%;
        font-size: 13px;
        line-height: 1.3;
    }

    .accountPaymentPage .payment_options .payment-form-button > .pf-4 {
        min-height: 38px;
        padding: 5px 8px;
        flex: 0 0 100%;
        align-items: center;
        flex-direction: row;
        font-size: 14px;
        line-height: 1.3;
    }

    .accountPaymentPage .payment_options .payment-form-button > .pf-4 > a,
    .accountPaymentPage .payment_options .payment-form-button > .pf-4 > form,
    .accountPaymentPage .payment_options .payment-form-button > .pf-4 input[type="submit"] {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 350px) {
    .accountPage {
        padding-right: 6px;
        padding-left: 6px;
    }

    .accountNavLink {
        padding-right: 3px;
        padding-left: 3px;
    }

    .accountNavLink span {
        font-size: 8px;
    }

}

@media (max-width: 600px) {
    .pointsPurchaseHeader {
        min-height: 54px;
        padding: 0 14px;
    }

    .pointsPurchaseHeaderBack {
        min-height: 42px;
        gap: 9px;
        font-size: 17px;
    }

    .pointsPurchaseHeaderBalance > span {
        display: inline;
    }

    .pointsPurchaseHeaderBalance {
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
        font-size: 11px;
    }

    .pointsPurchaseHeaderBalance strong {
        font-size: 14px;
    }

    .pointsPurchasePage.accountPage {
        padding: 15px 13px 30px;
    }

    .pointsPurchaseIntro {
        margin-bottom: 9px;
        font-size: 12px;
        text-align: left;
        white-space: nowrap;
    }

    .pointsVipAlternative {
        margin-bottom: 14px;
        padding: 9px 10px;
        grid-template-columns: 23px minmax(0, 1fr);
        gap: 8px;
        border-radius: 10px;
    }

    .pointsVipAlternativeIcon {
        width: 23px;
        height: 23px;
        font-size: 10px;
    }

    .pointsVipAlternativeCopy > strong {
        font-size: 12px;
    }

    .accountPage .pointsVipAlternativeCopy p {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.35;
    }

    .pointsVipAlternativeLink {
        min-height: 25px;
        margin-top: 6px;
        padding: 3px 8px;
        border-radius: 7px;
        font-size: 10px;
    }

    .pointsPurchaseSection {
        margin-bottom: 19px;
    }

    .main-box .pointsPurchaseSection h2 {
        margin-bottom: 11px;
        font-size: 16px;
    }

    .main-box #pointsPurchaseAmountTitle {
        margin-bottom: 7px;
        font-size: 13px;
    }

    .pointsAmountChooser {
        display: grid;
        width: 100%;
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
        gap: 9px;
    }

    .pointsAmountControl {
        width: 100%;
        height: 100%;
        min-height: 48px;
        margin: 0;
        grid-column: 2;
        grid-row: 1;
        border-radius: 11px;
    }

    .pointsAmountPresets {
        width: 100%;
        margin: 0;
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .accountPage .pointsAmountPreset {
        min-height: 22px;
        padding: 1px 4px;
        border-radius: 7px;
        font-size: 12px;
        line-height: 1;
    }

    .accountPage .pointsAmountStep {
        width: 36px;
        min-height: 46px;
        flex-basis: 36px;
        font-size: 22px;
    }

    .pointsAmountField {
        gap: 3px;
        padding: 0 3px;
    }

    .accountPage .pointsAmountField input {
        width: 52px;
        min-width: 0;
        height: 46px;
        flex: 0 1 52px;
        font-size: 21px;
        line-height: 46px;
    }

    .pointsAmountField span {
        flex: 0 0 auto;
        padding-right: 2px;
        font-size: 12px;
    }

    .accountPage .pointsBalanceAfterPurchase {
        margin-top: 2px;
        font-size: 10px;
    }

    .pointsBalanceAfterPurchase strong {
        font-size: 12px;
    }

    .pointsPaymentMethod {
        min-height: 67px;
        padding: 10px 12px;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        gap: 10px;
        border-radius: 13px;
    }

    .pointsMethodIndicator {
        width: 19px;
        height: 19px;
    }

    .pointsMethodName,
    .pointsPaymentMethod > strong {
        font-size: 13px;
    }

    .pointsMethodName {
        white-space: nowrap;
    }

    .pointsMethodCopy small {
        font-size: 12px;
    }

    .pointsPurchaseTrust p {
        font-size: 12px;
    }

    .pointsPurchaseAction {
        bottom: 4px;
    }

    .accountPage .pointsPurchaseSubmit {
        min-height: 54px;
        padding: 11px 13px;
        font-size: 15px;
    }

    .accountPage .pointsPurchaseLegal {
        margin: 16px 4px 0;
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    body.pointsPurchaseMode header.main .mid-bar {
        border-bottom: 1px solid #303030;
        background: #171717 !important;
    }

    body.pointsPurchaseMode .pointsPurchaseHeader {
        display: flex;
    }

    body.pointsPurchaseMode .pointsPurchaseDesktopHeader,
    body.pointsPurchaseMode #footer-main {
        display: none !important;
    }

    .pointsPurchaseDesktopTitle {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 390px) {
    .pointsPaymentMethod {
        padding-right: 10px;
        padding-left: 10px;
        grid-template-columns: 19px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .pointsPaymentMethod > strong {
        font-size: 12px;
        text-align: right;
    }

}

@media (max-width: 350px) {
    .pointsPurchaseIntro {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accountPage *,
    .accountNav * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Compact account tools and the primary Movies tabs. */
.accountHeroMain {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 18px;
}

.accountHero {
    margin-bottom: 16px;
}

/* Tooltips must be able to extend beyond the hero surface. */
.accountHero {
    overflow: visible;
}

.accountHeroMain > .accountNav.accountNavIconOnly {
    z-index: 30;
}

.accountHeroMain > .accountHeroIdentity {
    flex: 0 1 auto;
}

.accountHeroMain > .accountNav.accountNavIconOnly {
    margin: 0;
    flex: 0 1 auto;
}

.accountHeroMain > .accountNav.accountNavIconOnly .accountNavList {
    gap: 2px;
}

.accountNav.accountNavIconOnly .accountNavLabel {
    display: none;
}

.accountNav.accountNavIconOnly .accountNavMoviesItem .accountNavLink {
    color: #aaa;
}

.accountNav.accountNavIconOnly {
    width: max-content;
    max-width: 100%;
    margin: 7px 0 14px auto;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    background: #252525;
    box-shadow: none;
}

.accountNav.accountNavIconOnly .accountNavList {
    display: flex;
    min-width: 0;
    padding: 4px;
    align-items: center;
    gap: 3px;
}

.accountNav.accountNavIconOnly .accountNavItem {
    width: auto;
    min-width: 0;
    border: 0 !important;
}

.accountNav.accountNavIconOnly .accountNavItem::after {
    display: none !important;
}

.accountNav.accountNavIconOnly .accountNavLink {
    position: relative;
    display: grid;
    width: 38px;
    min-width: 38px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border-radius: 6px;
    color: #aaa;
}

.accountNav.accountNavIconOnly .accountNavLink::after {
    display: none !important;
}

.accountNav.accountNavIconOnly .accountNavLink i {
    font-size: 16px;
}

.accountNav.accountNavIconOnly .accountNavTooltip {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    left: 50%;
    display: block;
    visibility: hidden;
    width: max-content;
    max-width: 190px;
    padding: 6px 8px;
    border: 1px solid #484848;
    border-radius: 5px;
    color: #f5f5f5;
    background: #202020;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -3px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    white-space: nowrap;
}

.accountNav.accountNavIconOnly .accountNavLink:hover .accountNavTooltip,
.accountNav.accountNavIconOnly .accountNavLink:focus-visible .accountNavTooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.accountNav.accountNavIconOnly .accountNavItem:last-child .accountNavTooltip {
    right: 0;
    left: auto;
    transform: translate(0, -3px);
}

.accountNav.accountNavIconOnly .accountNavItem:last-child .accountNavLink:hover .accountNavTooltip,
.accountNav.accountNavIconOnly .accountNavItem:last-child .accountNavLink:focus-visible .accountNavTooltip {
    transform: translate(0, 0);
}

@media (min-width: 1120px) {
    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavList {
        gap: 3px;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavLink {
        display: inline-flex;
        width: auto;
        min-width: 0;
        padding: 0 9px;
        flex-direction: row;
        gap: 6px;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavLabel {
        display: inline;
        font-size: 10px;
        white-space: nowrap;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavTooltip {
        display: none;
    }
}

.accountMovieTabs {
    display: flex;
    width: 100%;
    margin: -3px 0 13px;
    padding: 0;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid #3c3c3c;
}

.accountSettingsTabs {
    margin-bottom: 18px;
}

.accountSettingsPanel {
    display: none;
}

.accountSettingsPanel.isActive {
    display: block;
}

.accountMovieTab {
    position: relative;
    display: inline-flex;
    min-height: 39px;
    padding: 7px 16px 8px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #a9a9a9;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .16s ease, background-color .16s ease;
}

.accountMovieTab::after {
    position: absolute;
    right: 11px;
    bottom: -1px;
    left: 11px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--account-accent);
    content: "";
    opacity: 0;
    transform: scaleX(.45);
    transition: opacity .16s ease, transform .16s ease;
}

.accountMovieTab:hover,
.accountMovieTab:focus-visible,
.accountMovieTab.active {
    color: #fff;
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
}

.accountMovieTab.active i {
    color: var(--account-accent-light);
}

.accountMovieTab.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.accountMovieTab small {
    color: #858585;
    font-size: .9em;
    font-weight: 500;
}

.accountMovieTab.active small {
    color: #d4d4d4;
}

.accountMoviesHeader {
    min-height: 38px;
    margin-bottom: 6px;
    padding-bottom: 6px;
}

.accountMovieGrid .big-box-video div.description,
.accountMovieGrid .big-box-video div.description h2 {
    text-align: left !important;
}

.accountMovieGrid .video-promo-box,
.accountMovieGrid .video-free-box,
.accountMovieGrid .video-viponly-box {
    display: none !important;
}

.accountMovieGrid .pictureWrap .infoWrap > .pill.accountListDate {
    display: inline-flex !important;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    padding: 0 5px;
    align-items: center;
    overflow: hidden;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountMovieGrid .accountListDate time {
    display: block;
    line-height: 1;
    white-space: nowrap;
}

.accountPurchaseHistoryTable th:first-child,
.accountPurchaseHistoryTable td:first-child {
    text-align: left;
}

.accountPurchaseHistoryTable .accountPurchasePrice {
    color: #e8e8e8;
    font-weight: 700;
    white-space: nowrap;
}

.accountPurchaseHistoryTable th,
.accountPurchaseHistoryTable td {
    padding: 5px 8px;
    line-height: 1.25;
}

@media (max-width: 600px) {
    .accountHero {
        margin-bottom: 12px;
        align-items: flex-start;
        overflow: hidden;
    }

    .accountHeroMain {
        display: grid;
        min-width: 0;
        gap: 8px;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly {
        width: max-content;
        max-width: 100%;
        margin: 0;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavList {
        padding: 2px;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavLink {
        min-width: 36px;
        width: 36px;
        min-height: 34px;
        height: 34px;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavMoviesItem .accountNavLabel {
        display: none;
    }

    .accountHeroMain > .accountNav.accountNavIconOnly .accountNavTooltip {
        display: none !important;
    }

    .accountNav.accountNavIconOnly {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .accountNav.accountNavIconOnly .accountNavLink {
        width: 35px;
        min-width: 35px;
        min-height: 34px;
        height: 34px;
    }

    .accountMovieTabs {
        margin-bottom: 9px;
    }

    .accountMovieTab {
        flex: 1 1 50%;
        min-height: 36px;
        padding: 6px 8px 7px;
        font-size: 12px;
    }

    .accountMoviesHeader {
        min-height: 34px;
        margin-bottom: 4px;
        padding-bottom: 4px;
    }

    .accountPurchaseHistoryTable tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        margin-bottom: 2px;
        padding: 5px 7px;
        gap: 1px 8px;
    }

    .accountPurchaseHistoryTable td:first-child {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        padding: 0;
        text-align: left;
    }

    .accountPurchaseHistoryTable td:first-child a {
        display: block;
        overflow: hidden;
        font-size: 10px;
        line-height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .accountPurchaseHistoryTable td:nth-child(2),
    .accountPurchaseHistoryTable td:nth-child(3),
    .accountPurchaseHistoryTable td:nth-child(4) {
        display: flex;
        padding: 0;
        align-items: center;
        gap: 5px;
    }

    .accountPurchaseHistoryTable td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .accountPurchaseHistoryTable td:nth-child(2)::before {
        display: none;
    }

    .accountPurchaseHistoryTable td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
        color: #aaa;
        white-space: nowrap;
    }

    .accountPurchaseHistoryTable td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .accountPurchaseHistoryTable td:nth-child(3)::before {
        display: none;
    }

    .accountPurchaseHistoryTable .accountStatusBadge {
        min-height: 17px;
        padding: 2px 6px;
        font-size: 7px;
    }
}