.pf {
    --pf-bg: var(--bg);
    --pf-ink: var(--text1);
    --pf-panel: var(--card);
    --pf-line: var(--rgba2);
    --pf-faint: var(--rgba1);
    --pf-mute: var(--rgba3);
    --pf-accent: var(--primary2);
    --pf-hot: #ef4444;
    --pf-ok: var(--online);
    --pf-warn: #f59e0b;
    --pf-gold: #eab308;
    --pf-pink: #ec4899;
    --pf-level: var(--level);
    --pf-prem: var(--premium);
    --pf-r: 16px;
    --pf-r-sm: 11px;
    --pf-ease: cubic-bezier(.22, .8, .24, 1);
    --pf-display: "Space Grotesk", "Poppins", system-ui, sans-serif;
    --pf-nav: 62px;
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 16px 110px;
    color: var(--pf-ink);
    font-size: 14px;
    line-height: 1.5;
    font-family: "Poppins", system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

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

.pf [hidden] {
    display: none !important;
}

:where(.pf) a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

:where(.pf) button {
    padding: 0;
    cursor: pointer;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

:where(.pf) button:disabled {
    cursor: not-allowed;
}

:where(.pf) input,
:where(.pf) textarea,
:where(.pf) select {
    font: inherit;
    color: inherit;
}

.pf input,
.pf textarea,
.pf select {
    -webkit-user-select: text;
    user-select: text;
}

:where(.pf) h1,
:where(.pf) h2,
:where(.pf) h3,
:where(.pf) p,
:where(.pf) ul,
:where(.pf) ol,
:where(.pf) dl,
:where(.pf) dd {
    margin: 0;
    padding: 0;
}

:where(.pf) ul,
:where(.pf) ol {
    list-style: none;
}

.pf-idv,
.pf-idchip__v {
    -webkit-user-select: all;
    user-select: all;
    cursor: text;
}

body.pf-lock {
    overflow: hidden;
}

.pf-nm {
    display: inline;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.pf-nm::before {
    content: attr(data-n);
}

.pf-ico {
    flex: none;
    display: block;
}

.pf :focus,
.pf :focus-visible {
    outline: 0;
}

.pf :focus-visible {
    animation: pfPulse 1s var(--pf-ease);
}

@keyframes pfPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-accent) 62%, transparent);
    }
    70% {
        box-shadow: 0 0 0 9px color-mix(in srgb, var(--pf-accent) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-accent) 0%, transparent);
    }
}

@keyframes pfRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pfFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pfSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pfPop {
    0% {
        transform: scale(.4);
    }
    60% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pfSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pfShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes pfFill {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes pfGrow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes pfHatch {
    to {
        background-position: 24px 0;
    }
}

@keyframes pfOnline {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-ok) 60%, transparent);
    }
    70% {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--pf-ok) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-ok) 0%, transparent);
    }
}

@keyframes pfStamp {
    0% {
        opacity: 0;
        transform: translate(8px, -14px) rotate(-24deg) scale(1.6);
    }
    70% {
        opacity: 1;
        transform: translate(0, 0) rotate(-4deg) scale(.94);
    }
    100% {
        opacity: 1;
        transform: rotate(-6deg) scale(1);
    }
}

@keyframes pfCheck {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes pfFresh {
    0% {
        background-color: color-mix(in srgb, var(--pf-accent) 26%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes pfToast {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pfPulseDot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .45;
        transform: scale(.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf *,
    .pf *::before,
    .pf *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

.pf-boot {
    display: grid;
    gap: 16px;
}

.pf-boot__hero,
.pf-boot__tabs span,
.pf-boot__grid span {
    border-radius: 20px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--pf-ink) 6%, transparent) 20%, color-mix(in srgb, var(--pf-ink) 12%, transparent) 40%, color-mix(in srgb, var(--pf-ink) 6%, transparent) 60%) 0 0 / 300% 100%;
    animation: pfShimmer 1.6s linear infinite;
}

.pf-boot__hero {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: 28px 18px;
    gap: 12px 18px;
    align-content: center;
    height: 188px;
    padding: 24px;
}

.pf-boot__avatar {
    grid-row: 1 / 3;
    width: 96px;
    height: 96px;
    border-radius: 28%;
    background: color-mix(in srgb, var(--pf-ink) 12%, transparent);
}

.pf-boot__line {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: color-mix(in srgb, var(--pf-ink) 12%, transparent);
}

.pf-boot__line--lg {
    width: 52%;
}

.pf-boot__line--sm {
    width: 34%;
}

.pf-boot__tabs {
    display: flex;
    gap: 10px;
    overflow: hidden;
}

.pf-boot__tabs span {
    flex: none;
    width: 96px;
    height: 40px;
    border-radius: 12px;
}

.pf-boot__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}

.pf-boot__grid span {
    height: 108px;
    border-radius: 16px;
}

.pf-boot__noscript {
    padding: 40px 16px;
    text-align: center;
}

.pf-shell {
    display: grid;
    gap: 16px 22px;
    align-items: start;
}

.pf-shell--self {
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "side top" "side pane";
}

.pf-shell--self > .pf-side {
    grid-area: side;
    position: sticky;
    top: calc(var(--pf-nav) + 16px);
    align-self: start;
}

.pf-shell--self > .pf-top {
    grid-area: top;
    min-width: 0;
}

.pf-shell--self > .pf-pane {
    grid-area: pane;
    min-width: 0;
}

.pf-shell--user {
    max-width: 900px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
}

.pf-shell--user > .pf-top {
    order: 1;
}

.pf-shell--user > .pf-side {
    order: 2;
}

.pf-shell--user > .pf-pane {
    order: 3;
}

.pf-shell--gate {
    min-height: 60vh;
    place-items: center;
}

.pf-pane {
    min-width: 0;
    animation: pfFade .3s var(--pf-ease);
}

.pf-pane--solo {
    width: 100%;
}

.pf-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--pf-line);
    border-radius: 20px;
    background: var(--pf-panel);
}

.pf-nav__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-nav__g {
    margin: 4px 12px 6px;
    color: var(--pf-faint);
    font-size: 12px;
    font-weight: 600;
}

.pf-nav__i {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--pf-mute);
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s, background-color .2s;
}

.pf-nav__i:hover {
    color: var(--pf-ink);
    background: color-mix(in srgb, var(--pf-ink) 6%, transparent);
}

.pf-nav__i:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-ink);
}

.pf-nav__i.is-active {
    color: var(--pf-ink);
    font-weight: 600;
}

.pf-nav__i.is-active .pf-ico {
    color: var(--pf-accent);
}

.pf-nav__ind {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 0;
    width: calc(100% - 24px);
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: transform .42s var(--pf-ease), height .3s var(--pf-ease), width .3s var(--pf-ease), opacity .2s;
}

.pf-nav__ind::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--pf-accent);
}

.pf-nav__ind.is-h {
    left: 0;
    top: 6px;
    height: 40px;
}

.pf-nav__ind.is-h::before {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
}

.pf-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--pf-hot);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.pf-count.is-pop {
    animation: pfPop .45s var(--pf-ease);
}

.pf-nav--user {
    flex-direction: row;
    padding: 6px;
    border-radius: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pf-nav--user::-webkit-scrollbar {
    display: none;
}

.pf-nav--user .pf-nav__group {
    flex-direction: row;
    gap: 4px;
}

.pf-nav--user .pf-nav__i {
    flex: none;
    height: 40px;
    padding: 0 16px;
}

.pf-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 24px;
    background: var(--pf-panel);
}

.pf-hero__cover {
    position: relative;
    height: 124px;
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--pf-accent) 30%, var(--pf-panel)) 0%, color-mix(in srgb, var(--pf-level) 34%, var(--pf-panel)) 55%, color-mix(in srgb, var(--primary1) 24%, var(--pf-panel)) 100%);
}

.pf-hero__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--pf-ink) 24%, transparent) 1.5px, transparent 1.9px) 0 0 / 11px 11px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%);
    mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%);
}

.pf-hero.is-premium .pf-hero__cover {
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--pf-prem) 38%, var(--pf-panel)) 0%, color-mix(in srgb, var(--pf-level) 36%, var(--pf-panel)) 55%, color-mix(in srgb, var(--pf-gold) 30%, var(--pf-panel)) 100%);
}

.pf-hero__row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 22px;
    align-items: start;
    padding: 0 24px 20px;
}

.pf-hero__av {
    position: relative;
    margin-top: -58px;
    width: 116px;
    height: 116px;
}

.pf-hero__av .pf-av {
    width: 116px;
    height: 116px;
    border: 4px solid var(--pf-panel);
}

.pf-hero__av .pf-medal {
    position: absolute;
    right: -14px;
    bottom: -8px;
    z-index: 3;
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
    transform: rotate(-6deg);
    animation: pfStamp .6s var(--pf-ease) .3s both;
}

.pf-hero__id {
    min-width: 0;
    padding-top: 14px;
}

.pf-hero__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-family: var(--pf-display);
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
    word-break: break-word;
}

.pf-hero__handle {
    margin-top: 2px;
    color: var(--pf-mute);
    font-size: 14px;
    font-weight: 500;
}

.pf-crown {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pf-prem), var(--pf-level));
    color: #fff;
}

.pf-crown--sm {
    width: 20px;
    height: 20px;
    border-radius: 7px;
}

.pf-lvchip {
    display: none;
    padding: 2px 10px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-level) 26%, transparent);
    color: var(--pf-ink);
    font-family: var(--pf-display);
    font-size: 12px;
    font-weight: 700;
}

.pf-idrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.pf-idchip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 4px 0 10px;
    gap: 6px;
    border: 1px solid var(--pf-line);
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 5%, transparent);
    font-size: 12px;
}

.pf-idchip__k {
    color: var(--pf-faint);
    font-weight: 600;
}

.pf-idchip__v {
    font-family: var(--pf-display);
    font-weight: 600;
    letter-spacing: .02em;
}

.pf-idchip__c {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--pf-mute);
    transition: background-color .2s, color .2s, transform .2s;
}

.pf-idchip__c:hover {
    background: color-mix(in srgb, var(--pf-accent) 16%, transparent);
    color: var(--pf-accent);
}

.pf-idchip__c .pf-ico:last-child {
    position: absolute;
    opacity: 0;
    transform: scale(.4);
    color: var(--pf-ok);
    transition: opacity .2s, transform .25s var(--pf-ease);
}

.pf-idchip__c.is-done .pf-ico:first-child {
    opacity: 0;
}

.pf-idchip__c.is-done .pf-ico:last-child {
    opacity: 1;
    transform: none;
}

.pf-hero__chips {
    display: contents;
}

.pf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
}

.pf-hero__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 32px;
    align-items: center;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--pf-line);
}

.pf-lv__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pf-lv__n {
    font-family: var(--pf-display);
    font-size: 18px;
    font-weight: 700;
}

.pf-lv__x {
    color: var(--pf-mute);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pf-exp {
    position: relative;
    height: 12px;
    overflow: hidden;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 10%, transparent);
}

.pf-exp__bar {
    position: relative;
    display: block;
    height: 100%;
    min-width: 6px;
    overflow: hidden;
    border-radius: inherit;
    background: var(--level-gradient);
    transform-origin: left;
    transition: width 1s var(--pf-ease);
    animation: pfFill 1.1s var(--pf-ease) .15s both;
}

.pf-exp__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .34) 0 6px, transparent 6px 12px);
    animation: pfHatch 1.4s linear infinite;
}

.pf-exp.is-max .pf-exp__bar {
    background: linear-gradient(90deg, #f6d365, #fda085);
}

.pf-stats {
    display: flex;
    gap: 6px;
}

.pf-stat {
    display: grid;
    gap: 0;
    min-width: 84px;
    padding: 8px 14px;
    border-radius: 14px;
    text-align: center;
    transition: background-color .2s, transform .2s var(--pf-ease);
}

.pf-stat:hover {
    background: color-mix(in srgb, var(--pf-ink) 6%, transparent);
    transform: translateY(-2px);
}

.pf-stat:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
}

.pf-stat__n {
    font-family: var(--pf-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.pf-stat__l {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-hero[data-compact="1"] {
    border-radius: 18px;
}

.pf-hero[data-compact="1"] .pf-hero__cover,
.pf-hero[data-compact="1"] .pf-hero__meta,
.pf-hero[data-compact="1"] .pf-idrow,
.pf-hero[data-compact="1"] .pf-hero__actions {
    display: none;
}

.pf-hero[data-compact="1"] .pf-hero__row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}

.pf-hero[data-compact="1"] .pf-hero__av {
    margin-top: 0;
    width: 52px;
    height: 52px;
}

.pf-hero[data-compact="1"] .pf-hero__av .pf-av {
    width: 52px;
    height: 52px;
    border-width: 0;
}

.pf-hero[data-compact="1"] .pf-hero__av .pf-medal {
    right: -8px;
    bottom: -6px;
    width: 26px;
    height: 26px;
    animation: none;
}

.pf-hero[data-compact="1"] .pf-hero__id {
    padding-top: 0;
}

.pf-hero[data-compact="1"] .pf-hero__name {
    font-size: 18px;
}

.pf-hero[data-compact="1"] .pf-lvchip {
    display: inline-block;
}

.pf-hero[data-compact="1"] .pf-crown {
    width: 22px;
    height: 22px;
    border-radius: 7px;
}

.pf-hero[data-compact="1"] .pf-hero__handle {
    font-size: 13px;
}

.pf-hero.is-skeleton {
    min-height: 220px;
}

.pf-hero.is-skeleton .pf-hero__id {
    display: grid;
    gap: 12px;
    align-content: start;
}

.pf-sk {
    display: block;
    height: 22px;
    border-radius: 8px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--pf-ink) 6%, transparent) 20%, color-mix(in srgb, var(--pf-ink) 12%, transparent) 40%, color-mix(in srgb, var(--pf-ink) 6%, transparent) 60%) 0 0 / 300% 100%;
    animation: pfShimmer 1.6s linear infinite;
}

.pf-sk--lg {
    width: 56%;
    height: 30px;
}

.pf-sk--sm {
    width: 34%;
}

.pf-hero.is-in .pf-hero__row {
    animation: pfFade .5s var(--pf-ease);
}

@media (max-width: 959px) {
    .pf {
        padding: 12px 12px 110px;
    }

    .pf-shell--self {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "side" "pane";
        gap: 12px;
    }

    .pf-shell--self > .pf-side {
        position: sticky;
        top: calc(var(--pf-nav) + 6px);
        z-index: 20;
        margin: 0 -4px;
        padding: 0 4px;
    }

    .pf-nav--self {
        flex-direction: row;
        gap: 4px;
        padding: 6px;
        border-radius: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .5);
    }

    .pf-nav--self::-webkit-scrollbar {
        display: none;
    }

    .pf-nav--self .pf-nav__group {
        display: contents;
    }

    .pf-nav--self .pf-nav__g {
        display: none;
    }

    .pf-nav--self .pf-nav__i {
        flex: none;
        height: 40px;
        padding: 0 14px;
    }

    .pf-nav--self .pf-nav__ind {
        left: 0;
        top: 6px;
        height: 40px;
        width: auto;
    }

    .pf-nav--self .pf-nav__ind::before {
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 0;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .pf-hero__row {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px 16px;
    }

    .pf-hero__av {
        margin-top: -50px;
        width: 100px;
        height: 100px;
    }

    .pf-hero__av .pf-av {
        width: 100px;
        height: 100px;
    }

    .pf-hero__id {
        padding-top: 4px;
    }

    .pf-hero__actions {
        justify-content: flex-start;
        padding-top: 4px;
    }

    .pf-hero__meta {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px 16px 16px;
    }

    .pf-stats {
        justify-content: space-between;
    }

    .pf-stat {
        flex: 1;
        min-width: 0;
        padding: 8px 6px;
    }

    .pf-hero[data-compact="1"] .pf-hero__row {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 10px 14px;
    }

    .pf-hero[data-compact="1"] .pf-hero__av {
        margin-top: 0;
        width: 46px;
        height: 46px;
    }

    .pf-hero[data-compact="1"] .pf-hero__av .pf-av {
        width: 46px;
        height: 46px;
    }

    .pf-hero[data-compact="1"] .pf-hero__id {
        padding-top: 0;
    }
}

.pf-av {
    position: relative;
    display: inline-block;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 30%;
    background-color: color-mix(in srgb, var(--pf-ink) 10%, var(--pf-panel));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    container-type: size;
    transition: transform .3s var(--pf-ease), opacity .3s;
}

.pf-av.is-loaded {
    background-color: transparent;
}

.pf-av__ph {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    font-size: 19px;
    font-size: 42cqw;
    line-height: 1;
    color: color-mix(in srgb, var(--pf-ink) 42%, transparent);
    pointer-events: none;
}

.pf-av.is-loaded .pf-av__ph {
    display: none;
}

.pf-av--xs {
    width: 24px;
    height: 24px;
}

.pf-av--sm {
    width: 34px;
    height: 34px;
}

.pf-av--md {
    width: 46px;
    height: 46px;
}

.pf-av--lg {
    width: 64px;
    height: 64px;
}

.pf-av--xl {
    width: 116px;
    height: 116px;
}

.pf-av.is-premium::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 0;
    box-sizing: border-box;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--pf-prem), var(--pf-level), var(--pf-gold));
    opacity: .9;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
}

.pf-av.is-premium {
    box-shadow: 0 0 0 3px var(--pf-panel);
}

.pf-av.is-uploading {
    opacity: .55;
    animation: pfPulseDot 1s ease-in-out infinite;
}

.pf-av__shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: transparent;
}

.pf-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 2.5px solid var(--pf-panel);
    border-radius: 50%;
    background: var(--pf-faint);
    transition: background-color .3s;
}

.pf-dot.is-on {
    background: var(--pf-ok);
    animation: pfOnline 2.4s ease-out infinite;
}

.pf-medal {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pf-medal:not(.is-loaded) {
    background-image: var(--level-gradient);
    color: #24123f;
}

.pf-medal__t {
    font-family: var(--pf-display);
    font-size: 15px;
    font-weight: 700;
    transition: opacity .2s;
}

.pf-medal.is-loaded .pf-medal__t {
    opacity: 0;
}

.pf-medal--xl {
    width: 92px;
    height: 92px;
}

.pf-medal--xl .pf-medal__t {
    font-size: 34px;
}

.pf-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--pf-ink) 10%, var(--pf-panel));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pf-cover.is-loaded {
    animation: pfFade .35s var(--pf-ease);
}

.pf-cover--sm {
    width: 56px;
    border-radius: 10px;
    flex: none;
}

.pf-cover--xs {
    width: 38px;
    border-radius: 8px;
    flex: none;
}

.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    color: var(--pf-ink);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.pf-chip--soft {
    color: var(--pf-mute);
}

.pf-chip--live {
    background: color-mix(in srgb, var(--pf-ok) 18%, transparent);
    color: color-mix(in srgb, var(--pf-ok) 70%, var(--pf-ink));
}

.pf-chip--live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pf-ok);
    animation: pfPulseDot 1.8s ease-in-out infinite;
}

.pf-chip--seen {
    color: var(--pf-mute);
}

.pf-chip--seen.is-on {
    background: color-mix(in srgb, var(--pf-ok) 18%, transparent);
    color: color-mix(in srgb, var(--pf-ok) 70%, var(--pf-ink));
}

.pf-chip--class {
    background: color-mix(in srgb, var(--pf-level) 26%, transparent);
}

.pf-chip--staff {
    background: color-mix(in srgb, var(--pf-accent) 20%, transparent);
    color: color-mix(in srgb, var(--pf-accent) 80%, var(--pf-ink));
}

.pf-chip--ok {
    background: color-mix(in srgb, var(--pf-ok) 16%, transparent);
    color: color-mix(in srgb, var(--pf-ok) 70%, var(--pf-ink));
}

.pf-chip--bad {
    background: color-mix(in srgb, var(--pf-hot) 16%, transparent);
    color: color-mix(in srgb, var(--pf-hot) 78%, var(--pf-ink));
}

.pf-chip--warn {
    background: color-mix(in srgb, var(--pf-warn) 20%, transparent);
    color: color-mix(in srgb, var(--pf-warn) 70%, var(--pf-ink));
}

.pf-chip--info {
    background: color-mix(in srgb, var(--pf-accent) 16%, transparent);
    color: color-mix(in srgb, var(--pf-accent) 80%, var(--pf-ink));
}

.pf-chip--tag-elite {
    background: color-mix(in srgb, var(--pf-level) 30%, transparent);
}

.pf-chip--tag-popular {
    background: color-mix(in srgb, var(--pf-pink) 18%, transparent);
}

.pf-chip--tag-social {
    background: color-mix(in srgb, var(--pf-accent) 18%, transparent);
}

.pf-chip--tag-veteran {
    background: color-mix(in srgb, var(--pf-gold) 24%, transparent);
}

.pf-chip--tag-newcomer {
    background: color-mix(in srgb, var(--pf-ok) 16%, transparent);
}

.pf-chip--tag-admin,
.pf-chip--tag-mod {
    background: color-mix(in srgb, var(--pf-accent) 20%, transparent);
}

.pf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .18s var(--pf-ease), background-color .2s, border-color .2s, color .2s, opacity .2s, filter .2s;
}

.pf-btn:active:not(:disabled) {
    transform: scale(.96);
}

.pf-btn:disabled {
    opacity: .45;
}

.pf-btn:focus-visible,
.pf-iconbtn:focus-visible {
    filter: brightness(1.1) saturate(1.1);
    transform: translateY(-1px);
}

.pf-btn--sm {
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
}

.pf-btn--block {
    width: 100%;
}

.pf-btn--primary {
    background: var(--pf-accent);
    color: #fff;
}

.pf-btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pf-accent) 86%, #000);
}

.pf-btn--soft {
    border-color: var(--pf-line);
    background: color-mix(in srgb, var(--pf-ink) 5%, transparent);
    color: var(--pf-ink);
}

.pf-btn--soft:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pf-ink) 10%, transparent);
}

.pf-btn--ghost {
    color: var(--pf-mute);
}

.pf-btn--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pf-ink) 7%, transparent);
    color: var(--pf-ink);
}

.pf-btn--danger {
    border-color: color-mix(in srgb, var(--pf-hot) 36%, transparent);
    background: color-mix(in srgb, var(--pf-hot) 12%, transparent);
    color: color-mix(in srgb, var(--pf-hot) 82%, var(--pf-ink));
}

.pf-btn--danger:hover:not(:disabled) {
    background: var(--pf-hot);
    color: #fff;
}

.pf-btn.is-busy {
    pointer-events: none;
    color: transparent;
}

.pf-btn.is-busy > * {
    opacity: 0;
}

.pf-btn.is-busy::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: var(--pf-ink);
    border-radius: 50%;
    animation: pfSpin .7s linear infinite;
}

.pf-btn--primary.is-busy::after {
    border-top-color: #fff;
}

.pf-btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-iconbtn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--pf-mute);
    transition: background-color .2s, color .2s, transform .18s var(--pf-ease);
}

.pf-iconbtn:hover {
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    color: var(--pf-ink);
}

.pf-iconbtn:active {
    transform: scale(.92);
}

.pf-iconbtn.is-active {
    background: color-mix(in srgb, var(--pf-accent) 16%, transparent);
    color: var(--pf-accent);
}

.pf-linkbtn {
    margin-left: 10px;
    color: var(--pf-accent);
    font-size: 12px;
    font-weight: 600;
}

.pf-linkbtn:hover {
    text-decoration: underline;
}

.pf-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-ink) 4%, transparent);
    transition: border-color .2s, background-color .2s;
}

.pf-input::placeholder {
    color: var(--pf-faint);
}

.pf-input:focus {
    border-color: var(--pf-accent);
    background: var(--pf-bg);
    animation: pfPulse 1s var(--pf-ease);
}

.pf-input--area {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    min-height: 88px;
    line-height: 1.5;
}

.pf-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 0;
    max-width: 360px;
    color: var(--pf-faint);
}

.pf-search .pf-ico {
    position: absolute;
    left: 13px;
    pointer-events: none;
}

.pf-input--search {
    height: 38px;
    padding-left: 38px;
    border-radius: 11px;
}

.pf-selectwrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--pf-faint);
}

.pf-selectwrap .pf-ico {
    position: absolute;
    right: 11px;
    pointer-events: none;
}

.pf-select {
    height: 38px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--pf-line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--pf-ink) 4%, transparent);
    color: var(--pf-ink);
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color .2s;
}

.pf-select:focus {
    border-color: var(--pf-accent);
    animation: pfPulse 1s var(--pf-ease);
}

.pf-select option {
    background: var(--pf-bg);
    color: var(--pf-ink);
}

.pf-form {
    display: grid;
    gap: 16px;
}

.pf-form__err,
.pf-fld__e {
    color: color-mix(in srgb, var(--pf-hot) 80%, var(--pf-ink));
    font-size: 12px;
    font-weight: 500;
}

.pf-fld {
    display: grid;
    gap: 7px;
}

.pf-fld__l {
    font-size: 13px;
    font-weight: 600;
    transition: color .2s, transform .25s var(--pf-ease);
}

.pf-fld:focus-within .pf-fld__l {
    color: var(--pf-accent);
    transform: translateX(3px);
}

.pf-fld__h {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--pf-faint);
    font-size: 12px;
}

.pf-fld__c {
    font-variant-numeric: tabular-nums;
}

.pf-pw {
    position: relative;
    display: block;
}

.pf-pw .pf-input {
    padding-right: 46px;
}

.pf-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--pf-faint);
    transform: translateY(-50%);
    transition: color .2s, background-color .2s;
}

.pf-eye:hover {
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    color: var(--pf-ink);
}

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

.pf-strength {
    display: inline-flex;
    gap: 4px;
    flex: none;
}

.pf-strength i {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--pf-ink) 12%, transparent);
    transition: background-color .3s;
}

.pf-strength[data-s="1"] i:nth-child(-n+1) {
    background: var(--pf-hot);
}

.pf-strength[data-s="2"] i:nth-child(-n+2) {
    background: var(--pf-warn);
}

.pf-strength[data-s="3"] i:nth-child(-n+3) {
    background: var(--pf-accent);
}

.pf-strength[data-s="4"] i:nth-child(-n+4),
.pf-strength[data-s="5"] i {
    background: var(--pf-ok);
}

.pf-radios {
    display: grid;
    gap: 6px;
}

.pf-radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.pf-radio:hover {
    background: color-mix(in srgb, var(--pf-ink) 5%, transparent);
}

.pf-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pf-radio__dot {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--pf-faint);
    border-radius: 50%;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.pf-radio input:checked + .pf-radio__dot {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
    box-shadow: inset 0 0 0 3px var(--pf-bg);
}

.pf-radio:has(input:checked) {
    border-color: var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 8%, transparent);
}

.pf-radio input:focus-visible + .pf-radio__dot {
    animation: pfPulse 1s var(--pf-ease);
}

.pf-radio__t {
    font-size: 13px;
}

.pf-seg {
    display: inline-flex;
    gap: 3px;
    max-width: 100%;
    padding: 3px;
    overflow-x: auto;
    border: 1px solid var(--pf-line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--pf-ink) 4%, transparent);
    scrollbar-width: none;
}

.pf-seg::-webkit-scrollbar {
    display: none;
}

.pf-seg__i {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 10px;
    color: var(--pf-mute);
    font-size: 13px;
    font-weight: 500;
    transition: background-color .22s, color .22s, box-shadow .22s;
}

.pf-seg__i:hover {
    color: var(--pf-ink);
}

.pf-seg__i:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
}

.pf-seg__i.is-active {
    background: var(--pf-bg);
    color: var(--pf-ink);
    font-weight: 600;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
}

.pf-seg__n {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 10%, transparent);
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

.pf-seg__n.is-hot {
    background: var(--pf-hot);
    color: #fff;
}

.pf-filters {
    display: flex;
    gap: 8px;
    margin: 4px 0 14px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pf-filters::-webkit-scrollbar {
    display: none;
}

.pf-fchip {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pf-line);
    border-radius: 99px;
    color: var(--pf-mute);
    font-size: 13px;
    font-weight: 500;
    transition: background-color .2s, color .2s, border-color .2s, transform .18s var(--pf-ease);
}

.pf-fchip:hover {
    color: var(--pf-ink);
    background: color-mix(in srgb, var(--pf-ink) 5%, transparent);
}

.pf-fchip:active {
    transform: scale(.95);
}

.pf-fchip:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
}

.pf-fchip.is-active {
    border-color: var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-ink);
    font-weight: 600;
}

.pf-fchip__n {
    min-width: 20px;
    padding: 0 5px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 10%, transparent);
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

.pf-viewtoggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-ink) 4%, transparent);
}

.pf-viewtoggle .pf-iconbtn {
    width: 34px;
    height: 32px;
    border-radius: 9px;
}

.pf-page {
    display: grid;
    gap: 14px;
    animation: pfFade .3s var(--pf-ease);
}

.pf-stack {
    display: grid;
    gap: 16px;
}

.pf-stack--tight {
    gap: 12px;
}

.pf-slot {
    min-width: 0;
}

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

.pf-ov {
    display: grid;
    gap: 16px;
}

.pf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.pf-head__t {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pf-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.pf-head__s {
    margin-top: 2px;
    color: var(--pf-mute);
    font-size: 13px;
}

.pf-head__n {
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--pf-hot);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    animation: pfPop .45s var(--pf-ease);
}

.pf-head__n--soft {
    background: color-mix(in srgb, var(--pf-ink) 10%, transparent);
    color: var(--pf-ink);
}

.pf-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pf-headhost,
.pf-subnav,
.pf-meterhost,
.pf-status,
.pf-pagerhost,
.pf-selhost,
.pf-themehost,
.pf-premhost {
    min-width: 0;
}

.pf-subnav:empty,
.pf-meterhost:empty,
.pf-status:empty,
.pf-selhost:empty {
    display: none;
}

.pf-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-r);
    background: var(--pf-panel);
}

.pf-card__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pf-card__t {
    font-family: var(--pf-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.pf-card__a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--pf-accent);
    font-size: 12px;
    font-weight: 600;
}

.pf-card__a:hover {
    text-decoration: underline;
}

.pf-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}

.pf-tile {
    --tone: var(--pf-mute);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 18px;
    background: var(--pf-panel);
    animation: pfRise .55s var(--pf-ease) both;
    animation-delay: calc(var(--i, 0) * 55ms);
    transition: transform .25s var(--pf-ease), border-color .25s, background-color .25s;
}

a.pf-tile:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tone) 55%, transparent);
}

a.pf-tile:focus-visible {
    background: color-mix(in srgb, var(--tone) 10%, var(--pf-panel));
}

.pf-tile--hot {
    --tone: var(--pf-hot);
}

.pf-tile--blue {
    --tone: var(--pf-accent);
}

.pf-tile--pink {
    --tone: var(--pf-pink);
}

.pf-tile--gold {
    --tone: var(--pf-gold);
}

.pf-tile--prem {
    --tone: var(--pf-prem);
}

.pf-tile__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tone) 16%, transparent);
    color: var(--tone);
}

.pf-tile__n {
    font-family: var(--pf-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.pf-tile__l {
    color: var(--pf-ink);
    font-size: 13px;
    font-weight: 500;
}

.pf-tile__h {
    color: var(--pf-faint);
    font-size: 12px;
}

.pf-tiles--stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pf-rank {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pf-level) 14%, var(--pf-panel)), var(--pf-panel));
}

.pf-rank__b {
    min-width: 0;
}

.pf-rank__t {
    font-family: var(--pf-display);
    font-size: 20px;
    font-weight: 700;
}

.pf-rank__c {
    color: var(--pf-mute);
    font-size: 13px;
    font-weight: 600;
}

.pf-rank__d,
.pf-rank__x {
    margin-top: 6px;
    color: var(--pf-mute);
    font-size: 13px;
}

.pf-dl {
    display: grid;
    gap: 10px;
}

.pf-dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--pf-line);
}

.pf-dl > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-dl dt {
    color: var(--pf-mute);
    font-size: 13px;
}

.pf-dl dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.pf-note-text {
    color: var(--pf-mute);
    font-size: 13px;
    line-height: 1.6;
}

.pf-tags {
    display: grid;
    gap: 10px;
}

.pf-tags__i {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pf-mute);
    font-size: 13px;
}

.pf-prog,
.pf-meter {
    position: relative;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 12%, transparent);
}

.pf-prog i,
.pf-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pf-accent);
    transform-origin: left;
    transition: width .6s var(--pf-ease);
    animation: pfFill .8s var(--pf-ease) both;
}

.pf-meter {
    height: 8px;
}

.pf-meter i {
    background: linear-gradient(90deg, var(--pf-accent), var(--pf-level));
}

.pf-meter.is-full i {
    background: linear-gradient(90deg, var(--pf-warn), var(--pf-hot));
}

.pf-time {
    color: var(--pf-faint);
    font-size: 12px;
    white-space: nowrap;
}

.pf-pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pf-pager.is-empty {
    display: none;
}

.pf-pg {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--pf-line);
    border-radius: 11px;
    color: var(--pf-mute);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .2s, color .2s, border-color .2s, transform .18s var(--pf-ease);
}

.pf-pg:hover:not(:disabled):not(.is-active) {
    background: color-mix(in srgb, var(--pf-ink) 7%, transparent);
    color: var(--pf-ink);
}

.pf-pg:active:not(:disabled) {
    transform: scale(.92);
}

.pf-pg:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
}

.pf-pg:disabled {
    opacity: .35;
}

.pf-pg.is-active {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
    color: #fff;
}

.pf-pg__gap {
    align-self: center;
    color: var(--pf-faint);
}

.pf-check {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--pf-faint);
    border-radius: 7px;
    background: var(--pf-bg);
    color: #fff;
    transition: background-color .2s, border-color .2s, transform .2s var(--pf-ease);
}

.pf-check .pf-ico {
    transform: scale(0);
}

.pf-check.is-on {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
}

.pf-check.is-on .pf-ico {
    animation: pfCheck .3s var(--pf-ease) both;
}

.pf-notes,
.pf-users,
.pf-txs,
.pf-minis,
.pf-conts,
.pf-tops,
.pf-sessions {
    display: grid;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-r);
    background: var(--pf-panel);
}

.pf-notes:empty,
.pf-users:empty,
.pf-txs:empty {
    display: none;
}

.pf-card .pf-minis,
.pf-card .pf-conts,
.pf-card .pf-tops,
.pf-card .pf-txs {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.pf-card .pf-txs {
    margin: 0 -18px -18px;
}

.pf-note,
.pf-user,
.pf-tx,
.pf-mini,
.pf-sess {
    border-bottom: 1px solid var(--pf-line);
}

.pf-note:last-child,
.pf-user:last-child,
.pf-tx:last-child,
.pf-mini:last-child,
.pf-sess:last-child {
    border-bottom: 0;
}

.pf-note {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: background-color .2s;
}

.pf-note:hover {
    background: color-mix(in srgb, var(--pf-ink) 4%, transparent);
}

.pf-note:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 12%, transparent);
}

.pf-note.is-unread {
    background: color-mix(in srgb, var(--pf-accent) 7%, transparent);
}

.pf-note.is-unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--pf-accent);
}

.pf-note.is-fresh {
    animation: pfFresh 2.2s ease-out;
}

.pf-note.is-selected {
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
}

.pf-note.is-select .pf-check {
    margin-top: 10px;
}

.pf-note__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 30%;
    background: color-mix(in srgb, var(--pf-accent) 16%, transparent);
    color: var(--pf-accent);
}

.pf-note__ico--success {
    background: color-mix(in srgb, var(--pf-ok) 16%, transparent);
    color: var(--pf-ok);
}

.pf-note__ico--warn {
    background: color-mix(in srgb, var(--pf-warn) 18%, transparent);
    color: var(--pf-warn);
}

.pf-note__ico--danger {
    background: color-mix(in srgb, var(--pf-hot) 16%, transparent);
    color: var(--pf-hot);
}

.pf-note__ico--level {
    background: color-mix(in srgb, var(--pf-level) 26%, transparent);
    color: color-mix(in srgb, var(--pf-level) 60%, var(--pf-ink));
}

.pf-note__b {
    flex: 1;
    min-width: 0;
}

.pf-note__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-note__nm {
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}

.pf-unread {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pf-accent);
    animation: pfPulseDot 2s ease-in-out infinite;
}

.pf-note__m {
    margin-top: 2px;
    color: var(--pf-mute);
    font-size: 13px;
    word-break: break-word;
}

.pf-note__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 8px;
}

.pf-note__act {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.pf-note__go {
    align-self: center;
    color: var(--pf-faint);
    transition: transform .2s var(--pf-ease), color .2s;
}

.pf-note:hover .pf-note__go {
    color: var(--pf-ink);
    transform: translateX(3px);
}

.pf-selhost {
    position: sticky;
    bottom: 16px;
    z-index: 15;
    pointer-events: none;
}

.pf-selbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 12px;
    padding: 10px 12px 10px 18px;
    border-radius: 18px;
    background: var(--pf-ink);
    color: var(--text2);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .45);
    pointer-events: auto;
    animation: pfSlideUp .4s var(--pf-ease);
}

.pf-selbar__n {
    font-size: 13px;
    white-space: nowrap;
}

.pf-selbar__n b {
    font-family: var(--pf-display);
    font-size: 17px;
}

.pf-selbar__a {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pf-selbar .pf-btn--soft {
    border-color: transparent;
    background: color-mix(in srgb, var(--text2) 16%, transparent);
    color: var(--text2);
}

.pf-selbar .pf-btn--soft:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text2) 26%, transparent);
}

.pf-selbar .pf-btn--ghost {
    color: color-mix(in srgb, var(--text2) 75%, transparent);
}

.pf-selbar .pf-btn--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text2) 14%, transparent);
    color: var(--text2);
}

.pf-selbar .pf-btn--danger {
    border-color: transparent;
    background: var(--pf-hot);
    color: #fff;
}

.pf-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    transition: background-color .2s;
}

.pf-user:hover {
    background: color-mix(in srgb, var(--pf-ink) 4%, transparent);
}

.pf-user__main {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 14px;
    min-width: 0;
}

.pf-user__main:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 12%, transparent);
}

.pf-user__b {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.pf-user__top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pf-user__n {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-user__h {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-user__m {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 4px;
}

.pf-seen {
    color: var(--pf-faint);
    font-size: 12px;
}

.pf-seen.is-on {
    color: var(--pf-ok);
    font-weight: 600;
}

.pf-user__act {
    display: flex;
    align-items: center;
    flex: none;
    gap: 6px;
}

.pf-comics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 18px 14px;
}

.pf-comic {
    position: relative;
    min-width: 0;
    animation: pfRise .45s var(--pf-ease) both;
}

.pf-comic__link {
    display: block;
    cursor: pointer;
}

.pf-comic__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    transition: transform .3s var(--pf-ease), box-shadow .3s;
}

.pf-comic:hover .pf-comic__media {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .55);
}

.pf-comic__link:focus-visible .pf-comic__media {
    transform: translateY(-4px);
}

.pf-comic__media .pf-cover {
    border-radius: 0;
}

.pf-comic__type {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 2px 9px;
    border-radius: 99px;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.pf-comic__off {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.pf-comic .pf-check {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.pf-comic__b {
    display: grid;
    gap: 3px;
    margin-top: 10px;
}

.pf-comic__t {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pf-comic__m {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-comic__rm {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(4px);
    color: #fff;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .2s, transform .2s var(--pf-ease), background-color .2s;
}

.pf-comic:hover .pf-comic__rm,
.pf-comic__rm:focus-visible {
    opacity: 1;
    transform: none;
}

.pf-comic__rm:hover {
    background: var(--pf-hot);
}

.pf-comic.is-selected .pf-comic__media {
    box-shadow: 0 0 0 3px var(--pf-accent);
    transform: scale(.97);
}

.pf-comic.is-off .pf-comic__t {
    color: var(--pf-faint);
}

.pf-comics[data-view="list"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.pf-comics[data-view="list"] .pf-comic {
    padding: 10px;
    border: 1px solid var(--pf-line);
    border-radius: 18px;
    background: var(--pf-panel);
}

.pf-comics[data-view="list"] .pf-comic__link {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf-comics[data-view="list"] .pf-comic__media {
    flex: none;
    width: 64px;
    border-radius: 12px;
}

.pf-comics[data-view="list"] .pf-comic__b {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.pf-comics[data-view="list"] .pf-comic__rm {
    top: 50%;
    right: 14px;
    opacity: 1;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    color: var(--pf-mute);
    backdrop-filter: none;
}

.pf-comics[data-view="list"] .pf-comic__rm:hover {
    background: var(--pf-hot);
    color: #fff;
}

.pf-comics[data-view="list"] .pf-comic .pf-check {
    right: auto;
    left: 18px;
    top: 18px;
}

.pf-nowread {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--pf-accent) 40%, transparent);
    border-radius: 18px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--pf-accent) 14%, var(--pf-panel)), var(--pf-panel));
    transition: transform .25s var(--pf-ease);
}

.pf-nowread:hover {
    transform: translateY(-2px);
}

.pf-nowread:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 20%, var(--pf-panel));
}

.pf-nowread__b {
    display: grid;
    flex: 1;
    gap: 1px;
    min-width: 0;
}

.pf-nowread__k {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pf-accent);
    font-size: 12px;
    font-weight: 600;
}

.pf-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pf-accent);
    animation: pfPulseDot 1.4s ease-in-out infinite;
}

.pf-nowread__t {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-nowread__m {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-cont__a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    transition: transform .2s var(--pf-ease);
}

.pf-cont__a:hover {
    transform: translateX(3px);
}

.pf-cont__a:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 12%, transparent);
}

.pf-cont__b {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
}

.pf-cont__t {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-cont__m {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-cont__go {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pf-accent);
    color: #fff;
}

.pf-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.pf-mini .pf-note__ico {
    width: 34px;
    height: 34px;
}

.pf-mini__b {
    display: grid;
    flex: 1;
    min-width: 0;
}

.pf-mini__t {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-mini__m {
    overflow: hidden;
    color: var(--pf-mute);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-mini.is-unread .pf-mini__t::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--pf-accent);
}

.pf-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 190px;
    padding-top: 6px;
}

.pf-bar {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
}

.pf-bar__v {
    min-height: 14px;
    color: var(--pf-mute);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.pf-bar__f {
    display: block;
    width: 100%;
    max-width: 36px;
    border-radius: 9px 9px 4px 4px;
    background: linear-gradient(180deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 55%, var(--pf-level)));
    transform-origin: bottom;
    animation: pfGrow .8s var(--pf-ease) both;
    animation-delay: calc(var(--i, 0) * 38ms);
}

.pf-bar.is-today .pf-bar__f {
    background: linear-gradient(180deg, var(--pf-gold), var(--pf-pink));
}

.pf-bar.is-zero .pf-bar__f {
    background: color-mix(in srgb, var(--pf-ink) 12%, transparent);
}

.pf-bar__d {
    color: var(--pf-faint);
    font-size: 11px;
}

.pf-top1 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.pf-top1__r {
    flex: none;
    width: 24px;
    color: var(--pf-faint);
    font-family: var(--pf-display);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.pf-top1__a {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pf-top1__b {
    display: grid;
    min-width: 0;
}

.pf-top1__b b {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-top1__b span {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-tx {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}

.pf-tx__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 30%;
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-accent);
}

.pf-tx__b {
    display: grid;
    flex: 1;
    gap: 1px;
    min-width: 0;
}

.pf-tx__t {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-tx__m,
.pf-tx__q {
    color: var(--pf-mute);
    font-size: 12px;
    word-break: break-word;
}

.pf-tx__q {
    color: var(--pf-faint);
}

.pf-tx__r {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 4px;
}

.pf-prem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 22px;
    border: 1px solid var(--pf-line);
    border-radius: 22px;
    background: var(--pf-panel);
}

.pf-prem.is-active {
    border-color: color-mix(in srgb, var(--pf-prem) 50%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--pf-prem) 22%, var(--pf-panel)), color-mix(in srgb, var(--pf-level) 18%, var(--pf-panel)));
}

.pf-prem__ico {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    color: var(--pf-faint);
}

.pf-prem.is-active .pf-prem__ico {
    background: linear-gradient(135deg, var(--pf-prem), var(--pf-level));
    color: #fff;
    box-shadow: 0 10px 24px -10px var(--pf-prem);
}

.pf-prem__b {
    display: grid;
    gap: 6px;
    justify-items: start;
    min-width: 0;
}

.pf-prem__t {
    font-family: var(--pf-display);
    font-size: 20px;
    font-weight: 700;
}

.pf-prem__p,
.pf-prem__s {
    color: var(--pf-mute);
    font-size: 13px;
}

.pf-prem__r {
    display: grid;
    gap: 2px;
    text-align: right;
}

.pf-prem__k {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-prem__v {
    font-family: var(--pf-display);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.pf-avedit {
    display: flex;
    align-items: center;
    gap: 22px;
}

.pf-avedit__b {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.pf-sessions {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.pf-sess {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.pf-sess__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 30%;
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    color: var(--pf-mute);
}

.pf-sess.is-current .pf-sess__ico {
    background: color-mix(in srgb, var(--pf-ok) 16%, transparent);
    color: var(--pf-ok);
}

.pf-sess__b {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.pf-sess__b b {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.pf-sess__b span {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-gate {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(440px, 100%);
    margin: 40px auto;
    padding: 40px 28px;
    border: 1px solid var(--pf-line);
    border-radius: 28px;
    background: var(--pf-panel);
    text-align: center;
    animation: pfRise .5s var(--pf-ease);
}

.pf-gate__ico {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 28px;
    background: color-mix(in srgb, var(--pf-accent) 16%, transparent);
    color: var(--pf-accent);
}

.pf-gate__t {
    font-family: var(--pf-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.pf-gate__p {
    margin-bottom: 8px;
    color: var(--pf-mute);
    font-size: 14px;
}

.pf-gate__alt {
    color: var(--pf-mute);
    font-size: 13px;
}

.pf-gate__alt:hover {
    color: var(--pf-ink);
    text-decoration: underline;
}

.pf-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 44px 20px;
    border: 1px dashed var(--pf-line);
    border-radius: var(--pf-r);
    text-align: center;
    animation: pfFade .35s var(--pf-ease);
}

.pf-card .pf-empty {
    border: 0;
    padding: 28px 12px;
}

.pf-empty__ico {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 4px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--pf-ink) 7%, transparent);
    color: var(--pf-faint);
}

.pf-empty--error .pf-empty__ico {
    background: color-mix(in srgb, var(--pf-hot) 14%, transparent);
    color: var(--pf-hot);
}

.pf-empty__t {
    font-family: var(--pf-display);
    font-size: 17px;
    font-weight: 600;
}

.pf-empty__p {
    max-width: 360px;
    margin-bottom: 6px;
    color: var(--pf-mute);
    font-size: 13px;
}

.pf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 0;
    color: var(--pf-mute);
}

.pf-spin {
    width: 22px;
    height: 22px;
    border: 3px solid color-mix(in srgb, var(--pf-ink) 14%, transparent);
    border-top-color: var(--pf-accent);
    border-radius: 50%;
    animation: pfSpin .75s linear infinite;
}

.pf-skels {
    display: grid;
    gap: 10px;
}

.pf-skel {
    border-radius: 16px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--pf-ink) 5%, transparent) 20%, color-mix(in srgb, var(--pf-ink) 11%, transparent) 40%, color-mix(in srgb, var(--pf-ink) 5%, transparent) 60%) 0 0 / 300% 100%;
    animation: pfShimmer 1.6s linear infinite;
}

.pf-skel--row {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: 14px 12px;
    gap: 8px 14px;
    align-content: center;
    height: 76px;
    padding: 0 16px;
}

.pf-skel__c {
    grid-row: 1 / 3;
    width: 46px;
    height: 46px;
    border-radius: 30%;
    background: color-mix(in srgb, var(--pf-ink) 9%, transparent);
}

.pf-skel__l,
.pf-skel__s {
    display: block;
    border-radius: 6px;
    background: color-mix(in srgb, var(--pf-ink) 9%, transparent);
}

.pf-skel__l {
    width: 46%;
}

.pf-skel__s {
    width: 72%;
}

.pf-skel--card {
    height: 120px;
}

.pf-layers {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
}

.pf-layer {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    opacity: 0;
    pointer-events: auto;
    transition: opacity .22s;
}

.pf-layer.is-in {
    opacity: 1;
}

.pf-layer.is-out {
    opacity: 0;
    pointer-events: none;
}

.pf-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .52);
    backdrop-filter: blur(5px);
}

.pf-sheet {
    position: relative;
    display: grid;
    gap: 14px;
    width: min(480px, 100%);
    max-height: calc(100dvh - 32px);
    padding: 20px;
    overflow: auto;
    border: 1px solid var(--pf-line);
    border-radius: 24px;
    background: var(--pf-bg);
    box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .55);
    transform: translateY(18px) scale(.97);
    transition: transform .34s var(--pf-ease);
}

.pf-layer.is-in .pf-sheet {
    transform: none;
}

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

.pf-sheet__t {
    font-family: var(--pf-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.pf-sheet__p {
    color: var(--pf-mute);
    font-size: 14px;
    line-height: 1.6;
}

.pf-sheet__body {
    display: grid;
    gap: 12px;
}

.pf-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pf-menu {
    position: fixed;
    z-index: 10060;
    display: grid;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--pf-line);
    border-radius: 16px;
    background: var(--pf-bg);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    transition: opacity .16s, transform .22s var(--pf-ease);
}

.pf-menu.is-in {
    opacity: 1;
    transform: none;
}

.pf-menu__i {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background-color .15s;
}

.pf-menu__i:hover {
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
}

.pf-menu__i:focus-visible {
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
}

.pf-menu__i.is-danger {
    color: color-mix(in srgb, var(--pf-hot) 85%, var(--pf-ink));
}

.pf-toasts {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 10100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(92vw, 440px);
    transform: translateX(-50%);
    pointer-events: none;
}

.pf-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--pf-ink);
    color: var(--text2);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5);
    pointer-events: auto;
    animation: pfToast .4s var(--pf-ease);
    transition: opacity .25s, transform .25s;
}

.pf-toast.is-out {
    opacity: 0;
    transform: translateY(10px) scale(.96);
}

.pf-toast--ok .pf-ico {
    color: var(--pf-ok);
}

.pf-toast--bad .pf-ico {
    color: #ff6b6b;
}

.pf-toast--warn .pf-ico {
    color: var(--pf-warn);
}

.pf-gcl {
    display: grid;
    place-items: center;
    min-height: max(320px, calc(100dvh - var(--pf-nav) - 300px));
    padding: 24px 0;
}

.pf-gcl__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    min-height: 64px;
    padding: 10px 20px 10px 12px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    font-family: var(--pf-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    background: linear-gradient(135deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 55%, var(--pf-level)));
    border: 0;
    border-radius: 20px;
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--pf-accent) 80%, transparent), 0 2px 6px -2px color-mix(in srgb, #000 30%, transparent);
    transition: transform .22s var(--pf-ease), box-shadow .3s var(--pf-ease), filter .2s;
    -webkit-tap-highlight-color: transparent;
}

.pf-gcl__btn::before {
    position: absolute;
    top: 0;
    left: -60%;
    z-index: -1;
    width: 45%;
    height: 100%;
    content: "";
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    transition: left .7s var(--pf-ease);
}

.pf-gcl__btn:hover::before {
    left: 120%;
}

.pf-gcl__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px color-mix(in srgb, var(--pf-accent) 85%, transparent), 0 3px 8px -2px color-mix(in srgb, #000 32%, transparent);
    filter: saturate(1.08);
}

.pf-gcl__btn:active {
    transform: translateY(0) scale(.97);
}

.pf-gcl__btn:focus-visible {
    animation: pfGclFocus 1.1s var(--pf-ease) 1;
}

@keyframes pfGclFocus {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-accent) 65%, transparent);
    }

    100% {
        box-shadow: 0 0 0 14px color-mix(in srgb, var(--pf-accent) 0%, transparent);
    }
}

.pf-gcl__ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .2);
    border-radius: 14px;
}

.pf-gcl__txt {
    min-width: 0;
    white-space: nowrap;
}

.pf-gcl__arr {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: 4px;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    transition: transform .25s var(--pf-ease), background-color .2s;
}

.pf-gcl__btn:hover .pf-gcl__arr {
    background: rgba(255, 255, 255, .3);
    transform: translateX(3px);
}

html.pf-gcfull-lock,
body.pf-gcfull-lock {
    overflow: hidden;
}

.pf-gcfull {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--pf-bg);
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition: opacity .28s var(--pf-ease), transform .34s var(--pf-ease);
}

.pf-gcfull.is-in {
    opacity: 1;
    transform: none;
}

.pf-gcfull__host {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pf-gcfull__host > .pf-loading,
.pf-gcfull__host > .pf-empty {
    margin: auto;
}

.pf-gcfull .pf-gcfull__host #gc-root {
    flex: 1;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pf-gcfull .pf-gcfull__host #gc-root[data-kb="1"] {
    flex: none;
    height: var(--gc-kbh, 100%);
    min-height: 0;
}

.pf-gcfull #gc-root .gc-head {
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 0;
    box-shadow: 0 6px 18px -14px var(--gc-shadow);
}

.pf-gcfull #gc-root .gc-rules-btn {
    margin-left: auto;
}

.pf-gcfull__back,
.pf-gcfull__x {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--pf-ink);
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    border: 0;
    border-radius: 14px;
    transition: background-color .2s, transform .18s var(--pf-ease);
    -webkit-tap-highlight-color: transparent;
}

.pf-gcfull__back:hover,
.pf-gcfull__x:hover {
    background: color-mix(in srgb, var(--pf-ink) 14%, transparent);
}

.pf-gcfull__back:active,
.pf-gcfull__x:active {
    transform: scale(.92);
}

.pf-gcfull__back:focus-visible,
.pf-gcfull__x:focus-visible {
    animation: pfGclFocus 1.1s var(--pf-ease) 1;
}

.pf-gcfull__x {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
}

#gc-root .gc-name,
#gc-root [class*="gc-name"] {
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 959px) {
    .pf-gcl__btn {
        width: 100%;
        max-width: 360px;
    }

    .pf-gcl__txt {
        flex: 1;
        text-align: left;
    }

    .pf-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-prem {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pf-prem__r {
        grid-column: 1 / -1;
        text-align: left;
    }

    .pf-head__t {
        font-size: 22px;
    }
}

@media (max-width: 599px) {
    .pf-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-tile {
        padding: 14px;
    }

    .pf-tile__n {
        font-size: 22px;
    }

    .pf-comics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    .pf-user {
        flex-wrap: wrap;
        padding: 14px;
    }

    .pf-user__act {
        width: 100%;
        justify-content: flex-end;
        padding-left: 60px;
    }

    .pf-note {
        padding: 14px;
    }

    .pf-note__act {
        margin-left: 0;
        width: 100%;
    }

    .pf-avedit {
        flex-direction: column;
        align-items: flex-start;
    }

    .pf-tx {
        padding: 12px 14px;
    }

    .pf-search {
        max-width: none;
        flex-basis: 100%;
    }

    .pf-selbar {
        justify-content: center;
        padding: 12px;
    }

    .pf-layer {
        place-items: end center;
        padding: 0;
    }

    .pf-sheet {
        width: 100%;
        max-height: 88dvh;
        border-radius: 26px 26px 0 0;
        padding: 20px 18px 26px;
    }

    .pf-hero__actions .pf-btn {
        flex: 1 1 auto;
    }

    .pf-toasts {
        bottom: 84px;
    }

    .pf-card {
        padding: 16px;
    }

    .pf-card .pf-txs {
        margin: 0 -16px -16px;
    }

    .pf-rank {
        flex-direction: column;
        text-align: center;
    }
}

@media (hover: none) {
    .pf-comic__rm {
        opacity: 1;
        transform: none;
        width: 34px;
        height: 34px;
    }
}

.pf-lp__view.is-in {
    animation: pfLpIn .46s var(--pf-ease) both;
}

@keyframes pfLpIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.pf-card--ticket {
    padding: 22px;
}

.pf-input--tall {
    min-height: 140px;
}

.pf-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.pf-cat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--pf-ink) 3%, transparent);
    cursor: pointer;
    transition: border-color .25s, background-color .25s, transform .3s var(--pf-ease), box-shadow .3s;
}

.pf-cat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--pf-accent) 14%, transparent) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .6s var(--pf-ease);
    pointer-events: none;
}

.pf-cat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--pf-accent) 45%, var(--pf-line));
}

.pf-cat:hover::before {
    transform: translateX(120%);
}

.pf-cat input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pf-cat__ico {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--pf-ink) 7%, transparent);
    color: var(--pf-mute);
    transition: background-color .25s, color .25s, transform .4s var(--pf-ease);
}

.pf-cat__b {
    position: relative;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pf-cat__t {
    font-size: 13px;
    font-weight: 600;
}

.pf-cat__h {
    color: var(--pf-faint);
    font-size: 11.5px;
    line-height: 1.35;
}

.pf-cat:has(input:checked) {
    border-color: var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 9%, transparent);
    box-shadow: 0 8px 22px -14px var(--pf-accent);
}

.pf-cat:has(input:checked) .pf-cat__ico {
    background: var(--pf-accent);
    color: #fff;
    animation: pfCatPop .5s var(--pf-ease);
}

.pf-cat:has(input:focus-visible) {
    animation: pfPulse 1s var(--pf-ease);
}

@keyframes pfCatPop {
    0% {
        transform: scale(.7) rotate(-12deg);
    }
    60% {
        transform: scale(1.12) rotate(4deg);
    }
    100% {
        transform: none;
    }
}

.pf-dz {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 26px 18px;
    border: 1.5px dashed color-mix(in srgb, var(--pf-ink) 22%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--pf-ink) 3%, transparent);
    text-align: center;
    cursor: pointer;
    transition: border-color .25s, background-color .25s, transform .3s var(--pf-ease);
}

.pf-dz:hover,
.pf-dz.is-drag {
    border-color: var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 8%, transparent);
}

.pf-dz.is-drag {
    transform: scale(1.015);
}

.pf-dz.is-full {
    opacity: .55;
    cursor: not-allowed;
}

.pf-dz__in {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pf-dz__in:disabled {
    cursor: not-allowed;
}

.pf-dz__ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-accent);
    transition: transform .4s var(--pf-ease);
}

.pf-dz:hover .pf-dz__ico,
.pf-dz.is-drag .pf-dz__ico {
    animation: pfDzFloat 1.4s ease-in-out infinite;
}

@keyframes pfDzFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.pf-dz__t {
    font-size: 13.5px;
    font-weight: 600;
}

.pf-dz__h {
    color: var(--pf-faint);
    font-size: 12px;
}

.pf-ups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
}

.pf-up {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--pf-ink) 6%, transparent);
    background-position: center;
    background-size: cover;
    animation: pfUpIn .42s var(--pf-ease) both;
}

.pf-up.is-out {
    animation: pfUpOut .3s var(--pf-ease) both;
}

.pf-up__n {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 14px 8px 6px;
    overflow: hidden;
    background: linear-gradient(transparent, rgba(0, 0, 0, .68));
    color: #fff;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(100%);
    transition: transform .3s var(--pf-ease);
}

.pf-up:hover .pf-up__n {
    transform: none;
}

.pf-up__x {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    opacity: .9;
    transition: background-color .2s, transform .25s var(--pf-ease);
}

.pf-up__x:hover {
    background: var(--pf-hot);
    transform: rotate(90deg) scale(1.08);
}

@keyframes pfUpIn {
    from {
        opacity: 0;
        transform: scale(.82);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pfUpOut {
    to {
        opacity: 0;
        transform: scale(.8);
    }
}

@media (max-width: 560px) {
    .pf-card--ticket {
        padding: 16px;
    }

    .pf-cats {
        grid-template-columns: 1fr;
    }

    .pf-dz {
        padding: 20px 14px;
    }
}

.pf-ups[hidden] {
    display: none;
}

.pf-dz.is-busy {
    pointer-events: none;
    opacity: .7;
}

.pf-dz.is-busy .pf-dz__ico {
    animation: pfDzFloat 1s ease-in-out infinite;
}

.pf-fld.is-bad {
    animation: pfShake .45s var(--pf-ease);
}

.pf-fld.is-bad .pf-input,
.pf-fld.is-bad .pf-cat {
    border-color: var(--pf-hot);
}

@keyframes pfShake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-7px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(2px);
    }
}

@property --p {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.pf-ticket .pf-form__err {
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-hot) 12%, transparent);
    color: var(--pf-hot);
    font-size: 12.5px;
    font-weight: 500;
}

.pf-ticket .pf-form__err:not([hidden]) {
    animation: pfLpIn .35s var(--pf-ease) both;
}

.pf-lpd {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.pf-qc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--pf-line);
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 12%, var(--pf-panel)), var(--pf-panel));
    animation: pfRise .55s var(--pf-ease) both;
}

.pf-ring {
    --p: 0;
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: conic-gradient(var(--pf-accent) calc(var(--p) * 1%), color-mix(in srgb, var(--pf-ink) 10%, transparent) 0);
    transition: --p 1s var(--pf-ease);
}

.pf-ring.is-full {
    background: conic-gradient(var(--pf-hot) calc(var(--p) * 1%), color-mix(in srgb, var(--pf-ink) 10%, transparent) 0);
}

.pf-ring__in {
    display: grid;
    place-items: center;
    align-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--pf-panel);
    line-height: 1.1;
}

.pf-ring__n {
    font-family: var(--pf-display);
    font-size: 21px;
}

.pf-ring__l {
    color: var(--pf-mute);
    font-size: 11px;
}

.pf-qc__b {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.pf-qc__t {
    font-size: 14px;
}

.pf-qc__s {
    color: var(--pf-mute);
    font-size: 12.5px;
}

.pf-qc__f {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: var(--pf-faint);
    font-size: 11px;
    line-height: 1.35;
}

.pf-lts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pf-lt {
    --tc: var(--pf-accent);
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 16px;
    background: var(--pf-panel);
    color: var(--pf-ink);
    text-align: left;
    cursor: pointer;
    transition: transform .3s var(--pf-ease), border-color .25s, background-color .25s, box-shadow .3s;
    animation: pfRise .55s var(--pf-ease) both;
}

.pf-lt:nth-child(2) {
    animation-delay: .06s;
}

.pf-lt:nth-child(3) {
    animation-delay: .12s;
}

.pf-lt:nth-child(4) {
    animation-delay: .18s;
}

.pf-lt--warn {
    --tc: var(--pf-warn);
}

.pf-lt--ok {
    --tc: var(--pf-ok);
}

.pf-lt:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tc) 50%, var(--pf-line));
}

.pf-lt.is-on {
    border-color: var(--tc);
    background: color-mix(in srgb, var(--tc) 9%, var(--pf-panel));
    box-shadow: 0 10px 26px -16px var(--tc);
}

.pf-lt__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tc) 15%, transparent);
    color: var(--tc);
    transition: transform .4s var(--pf-ease);
}

.pf-lt:hover .pf-lt__ico {
    transform: rotate(-8deg) scale(1.08);
}

.pf-lt__b {
    display: grid;
    min-width: 0;
}

.pf-lt__n {
    font-family: var(--pf-display);
    font-size: 21px;
    line-height: 1.1;
}

.pf-lt__l {
    overflow: hidden;
    color: var(--pf-mute);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-rps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-rp {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 18px;
    background: var(--pf-panel);
    transition: border-color .25s, box-shadow .35s, transform .35s var(--pf-ease);
    animation: pfRise .55s var(--pf-ease) both;
    animation-delay: calc(var(--i, 0) * 55ms);
}

.pf-rp::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--pf-line);
    transition: background-color .3s;
}

.pf-rp.is-unread::before {
    background: var(--pf-warn);
}

.pf-rp:hover {
    border-color: color-mix(in srgb, var(--pf-accent) 35%, var(--pf-line));
    box-shadow: 0 14px 30px -22px var(--pf-accent);
}

.pf-rp.is-leaving {
    animation: pfLeave .42s var(--pf-ease) both;
    pointer-events: none;
}

.pf-rp__head {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 15px 16px 15px 18px;
    color: inherit;
    text-align: left;
}

button.pf-rp__head {
    cursor: pointer;
}

.pf-rp__ico {
    --rc: var(--pf-accent);
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--rc) 15%, transparent);
    color: var(--rc);
    transition: transform .4s var(--pf-ease);
}

.pf-rp__ico--bug {
    --rc: var(--pf-hot);
}

.pf-rp__ico--konten {
    --rc: var(--pf-warn);
}

.pf-rp__ico--pembayaran {
    --rc: var(--pf-ok);
}

.pf-rp__ico--saran {
    --rc: var(--pf-gold);
}

.pf-rp__ico--user,
.pf-rp__ico--global {
    --rc: var(--pf-pink);
}

.pf-rp:hover .pf-rp__ico {
    transform: scale(1.07) rotate(-5deg);
}

.pf-rp__b {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
}

.pf-rp__t {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-rp__m {
    overflow: hidden;
    color: var(--pf-mute);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-rp__side {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

.pf-rp__chev {
    display: grid;
    color: var(--pf-mute);
    transition: transform .4s var(--pf-ease);
}

.pf-rp.is-open .pf-rp__chev {
    transform: rotate(180deg);
}

.pf-rp__more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--pf-ease);
}

.pf-rp.is-open .pf-rp__more {
    grid-template-rows: 1fr;
}

.pf-rp__moreIn {
    display: grid;
    gap: 12px;
    min-height: 0;
    padding: 0 18px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .35s .05s, padding .45s var(--pf-ease);
}

.pf-rp.is-open .pf-rp__moreIn {
    padding: 4px 18px 18px;
    opacity: 1;
}

.pf-rp__d {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-ink) 4%, transparent);
    color: var(--pf-mute);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.pf-rp__files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-rp__file {
    width: 72px;
    height: 72px;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--pf-ink) 6%, transparent);
    background-position: center;
    background-size: cover;
    transition: transform .3s var(--pf-ease), border-color .25s;
}

.pf-rp__file:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--pf-accent);
}

.pf-trk {
    --stage: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0 18px 14px 18px;
    list-style: none;
}

.pf-trk::before,
.pf-trk::after {
    content: "";
    position: absolute;
    top: 11px;
    left: calc(18px + (100% - 36px) / 6);
    height: 2px;
    border-radius: 2px;
}

.pf-trk::before {
    width: calc((100% - 36px) * 2 / 3);
    background: color-mix(in srgb, var(--pf-ink) 11%, transparent);
}

.pf-trk::after {
    width: calc((100% - 36px) * 2 / 3 * var(--stage) / 2);
    background: var(--pf-accent);
    transform-origin: left;
    animation: pfGrowX .9s .2s var(--pf-ease) both;
}

.pf-trk__s {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--pf-faint);
    font-size: 11px;
}

.pf-trk__d {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid color-mix(in srgb, var(--pf-ink) 14%, transparent);
    border-radius: 50%;
    background: var(--pf-panel);
    font-size: 10.5px;
    font-weight: 700;
    transition: background-color .3s, border-color .3s, color .3s;
}

.pf-trk__s.is-on {
    color: var(--pf-ink);
}

.pf-trk__s.is-on .pf-trk__d {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
    color: #fff;
}

.pf-trk__s.is-now .pf-trk__d {
    animation: pfNow 2s ease-in-out infinite;
}

.pf-lph {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid var(--pf-line);
    border-radius: 20px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--pf-accent) 16%, var(--pf-panel)), var(--pf-panel) 70%);
    animation: pfRise .55s var(--pf-ease) both;
}

.pf-lph__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--pf-accent);
    color: #fff;
    box-shadow: 0 12px 24px -12px var(--pf-accent);
    animation: pfNow 3s ease-in-out infinite;
}

.pf-lph__b {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 180px;
}

.pf-lph__t {
    font-family: var(--pf-display);
    font-size: 16px;
}

.pf-lph__s {
    color: var(--pf-mute);
    font-size: 12.5px;
}

.pf-qpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-accent);
    font-size: 12px;
    font-weight: 600;
    transition: background-color .3s, color .3s;
}

.pf-qpill.is-full {
    background: color-mix(in srgb, var(--pf-hot) 14%, transparent);
    color: var(--pf-hot);
}

.pf-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.pf-rule {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--pf-line);
    border-radius: 15px;
    background: var(--pf-panel);
    transition: transform .3s var(--pf-ease), border-color .25s;
    animation: pfRise .55s var(--pf-ease) both;
    animation-delay: calc(.08s + var(--i, 0) * 70ms);
}

.pf-rule:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pf-accent) 40%, var(--pf-line));
}

.pf-rule__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-accent);
}

.pf-rule__b {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pf-rule__t {
    font-size: 12.5px;
}

.pf-rule__d {
    color: var(--pf-mute);
    font-size: 11.5px;
    line-height: 1.4;
}

.pf-fm {
    display: grid;
    gap: 8px;
    margin-bottom: 4px;
}

.pf-fm__bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.pf-fm__s {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: color-mix(in srgb, var(--pf-ink) 10%, transparent);
}

.pf-fm__s::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: var(--pf-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--pf-ease);
}

.pf-fm__s.is-on::after {
    transform: scaleX(1);
}

.pf-fm.is-ready .pf-fm__s::after {
    background: var(--pf-ok);
}

.pf-fm__n {
    color: var(--pf-mute);
    font-size: 11.5px;
    transition: color .3s;
}

.pf-fm.is-ready .pf-fm__n {
    color: var(--pf-ok);
    font-weight: 600;
}

.pf-step {
    display: grid;
    gap: 14px;
    padding: 18px 0 4px;
    border-top: 1px solid var(--pf-line);
}

.pf-step:first-of-type {
    border-top: 0;
}

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

.pf-step__n {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pf-accent) 16%, transparent);
    color: var(--pf-accent);
    font-size: 12.5px;
    font-weight: 700;
}

.pf-step__b {
    display: grid;
    gap: 1px;
}

.pf-step__t {
    font-size: 14px;
}

.pf-step__s {
    color: var(--pf-mute);
    font-size: 12px;
}

.pf-ticket__foot {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--pf-line);
}

.pf-ticket__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: var(--pf-faint);
    font-size: 11.5px;
    line-height: 1.5;
}

@keyframes pfLeave {
    0% {
        opacity: 1;
        transform: none;
    }
    60% {
        opacity: 0;
        transform: translateX(40px) scale(.97);
    }
    100% {
        opacity: 0;
        transform: translateX(40px) scale(.97);
    }
}

@keyframes pfGrowX {
    from {
        transform: scaleX(0);
    }
}

@keyframes pfNow {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-accent) 45%, transparent);
    }
    50% {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--pf-accent) 0%, transparent);
    }
}

@media (max-width: 760px) {
    .pf-lpd {
        grid-template-columns: 1fr;
    }

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

    .pf-rules {
        grid-template-columns: 1fr;
    }

    .pf-rp__head {
        flex-wrap: wrap;
        padding-right: 14px;
    }

    .pf-rp__side {
        margin-left: 55px;
    }

    .pf-rp.is-picking .pf-rp__side {
        margin-left: 83px;
    }

    .pf-rp__t,
    .pf-rp__m {
        white-space: normal;
    }
}

.pf-lpbar-host {
    margin-bottom: 12px;
}

.pf-lpbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--pf-line);
    border-radius: 14px;
    background: var(--pf-panel);
    transition: border-color .25s, background-color .25s;
    animation: pfRise .4s var(--pf-ease) both;
}

.pf-lpbar.is-on {
    border-color: color-mix(in srgb, var(--pf-accent) 55%, var(--pf-line));
    background: color-mix(in srgb, var(--pf-accent) 8%, var(--pf-panel));
}

.pf-lpbar__t {
    color: var(--pf-mute);
    font-size: 12.5px;
    font-weight: 600;
}

.pf-lpbar.is-on .pf-lpbar__t {
    color: var(--pf-ink);
}

.pf-lpbar__a {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pf-lpk {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--pf-line);
    border-radius: 7px;
    color: transparent;
    transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--pf-ease);
}

.pf-lpk.is-on {
    border-color: var(--pf-accent);
    background: var(--pf-accent);
    color: #fff;
    animation: pfPop .35s var(--pf-ease);
}

.pf-rp.is-picking {
    transition: border-color .25s, background-color .25s, transform .25s var(--pf-ease);
}

.pf-rp.is-picked {
    border-color: var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 9%, var(--pf-panel));
}

@keyframes mcRise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes mcSheen {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes mcSpin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes mcFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }
    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

@keyframes mcGlow {
    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }
    50% {
        opacity: .95;
        transform: scale(1.14);
    }
}

@keyframes mcFocus {
    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
    50% {
        box-shadow: 0 0 26px 3px color-mix(in srgb, var(--pf-accent) 60%, transparent);
    }
}

@keyframes mcPop {
    0% {
        transform: scale(.4);
        opacity: 0;
    }
    60% {
        transform: scale(1.12);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes mcDot {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.7);
        opacity: .4;
    }
}

@keyframes mcBeat {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12) rotate(-4deg);
    }
}

.mcd,
.mcp {
    gap: 18px;
}

.mc-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    overflow: hidden;
    border-radius: 16px;
    color: #fff;
    font-family: var(--pf-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    background: linear-gradient(110deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 50%, var(--pf-gold)), var(--pf-accent));
    background-size: 220% 100%;
    box-shadow: 0 16px 30px -16px var(--pf-accent);
    animation: mcSheen 5s linear infinite;
    transition: transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease), filter .25s;
}

.mc-cta .pf-ico {
    transition: transform .25s var(--pf-ease);
}

.mc-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 22px 36px -16px var(--pf-accent);
}

.mc-cta:hover:not(:disabled) .pf-ico:last-child {
    transform: translateX(4px);
}

.mc-cta:active:not(:disabled) {
    transform: scale(.97);
}

.mc-cta:focus-visible {
    animation: mcSheen 5s linear infinite, mcFocus 1.2s ease-in-out infinite;
}

.mc-cta:disabled {
    animation: none;
    background: color-mix(in srgb, var(--pf-ink) 12%, var(--pf-panel));
    color: var(--pf-mute);
    box-shadow: none;
}

.mcd-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 26px;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(125deg, color-mix(in srgb, var(--pf-gold) 24%, var(--pf-panel)), color-mix(in srgb, var(--pf-pink) 17%, var(--pf-panel)) 60%, color-mix(in srgb, var(--pf-prem) 20%, var(--pf-panel)));
    box-shadow: 0 24px 50px -32px rgba(0, 0, 0, .6);
    animation: mcRise .55s var(--pf-ease) both;
}

.mcd-hero__glow {
    position: absolute;
    top: -90px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pf-gold) 55%, transparent), transparent 68%);
    pointer-events: none;
    animation: mcGlow 5s ease-in-out infinite;
}

.mcd-hero__txt,
.mcd-hero__stats {
    position: relative;
}

.mcd-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 9%, transparent);
    font-size: 12px;
    font-weight: 600;
}

.mcd-hero__t {
    margin: 10px 0 6px;
    font-family: var(--pf-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mcd-hero__p {
    max-width: 46ch;
    color: var(--pf-mute);
}

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

.mcd-stat {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--pf-panel) 70%, transparent);
    backdrop-filter: blur(6px);
}

.mcd-stat__n {
    overflow: hidden;
    font-family: var(--pf-display);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcd-stat__l {
    color: var(--pf-mute);
    font-size: 12px;
}

.mcd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.mcd-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: 22px;
    border-radius: 22px;
    background: var(--pf-panel);
    box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .55);
    animation: mcRise .55s var(--pf-ease) .08s both;
}

.mcd-card__t {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pf-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.mcd-steps {
    display: grid;
    gap: 16px;
    list-style: none;
}

.mcd-step {
    display: flex;
    gap: 14px;
    animation: mcRise .5s var(--pf-ease) both;
    animation-delay: calc(var(--i, 0) * 90ms + 160ms);
}

.mcd-step__n {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pf-accent), var(--pf-gold));
    box-shadow: 0 10px 18px -10px var(--pf-accent);
    color: #fff;
    font-family: var(--pf-display);
    font-weight: 700;
}

.mcd-step__b b {
    display: block;
    font-weight: 600;
}

.mcd-step__b p {
    color: var(--pf-mute);
    font-size: 13px;
}

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

.mcd-field__h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mcd-field__l {
    color: var(--pf-mute);
    font-size: 12.5px;
    font-weight: 600;
}

.mcd-mid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-accent);
    font-size: 12px;
    font-weight: 600;
    transition: transform .2s var(--pf-ease), background-color .2s;
}

.mcd-mid:hover:not(:disabled) {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pf-accent) 22%, transparent);
}

.mcd-mid:disabled {
    opacity: .55;
}

.mcd-msg {
    width: 100%;
    padding: 12px 14px;
    resize: none;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--pf-ink) 6%, transparent);
    color: var(--pf-ink);
    font-size: 13px;
    line-height: 1.55;
    transition: background-color .25s;
}

.mcd-msg:focus-visible {
    background: color-mix(in srgb, var(--pf-ink) 9%, transparent);
    animation: mcFocus 1.4s ease-in-out infinite;
}

.mcd-alert {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pf-warn) 14%, transparent);
}

.mcd-alert__i {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--pf-warn);
    color: #fff;
    animation: mcBeat 2.6s ease-in-out infinite;
}

.mcd-alert__b {
    display: grid;
    gap: 2px;
}

.mcd-alert__b b {
    font-size: 13px;
}

.mcd-alert__b p {
    color: var(--pf-mute);
    font-size: 12px;
    line-height: 1.55;
}

.mcd-watch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pf-ok) 12%, transparent);
    animation: mcRise .4s var(--pf-ease) both;
}

.mcd-watch__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pf-ok);
    animation: mcDot 1.4s ease-in-out infinite;
}

.mcd-watch__t {
    flex: 1;
    min-width: 140px;
    font-size: 13px;
    font-weight: 500;
}

.mcd-watch__a {
    display: flex;
    gap: 8px;
}

.mcd-win {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 0 4px;
    text-align: center;
}

.mcd-win__ico {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pf-ok), color-mix(in srgb, var(--pf-ok) 50%, var(--pf-gold)));
    box-shadow: 0 16px 34px -12px var(--pf-ok);
    color: #fff;
    animation: mcPop .6s var(--pf-ease) both;
}

.mcd-win__t {
    font-family: var(--pf-display);
    font-size: 20px;
    font-weight: 700;
}

.mcd-win__p,
.mcd-win__s {
    color: var(--pf-mute);
}

.mcd-win__pts {
    color: var(--pf-gold);
    font-family: var(--pf-display);
    font-size: 38px;
    font-variant-numeric: tabular-nums;
}

.mcd-win__tot {
    color: var(--pf-ink);
}

.mcp-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 24px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
    background: var(--pf-panel);
    box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .55);
    animation: mcRise .5s var(--pf-ease) both;
}

.mcp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(130deg, color-mix(in srgb, var(--pf-prem) 30%, var(--pf-panel)), color-mix(in srgb, var(--pf-level) 24%, var(--pf-panel)) 60%, color-mix(in srgb, var(--pf-gold) 22%, var(--pf-panel)));
    opacity: 0;
    transition: opacity 1.1s var(--pf-ease);
}

.mcp-hero.is-active::before {
    opacity: 1;
}

.mcp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 34%, color-mix(in srgb, var(--pf-gold) 42%, transparent) 50%, transparent 66%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-120%);
}

.mcp-hero.is-morph::after,
.mcp-hero.is-bump::after {
    animation: mcSweep 1.6s .15s var(--pf-ease) both;
}

.mcp-hero__glow {
    position: absolute;
    top: -110px;
    left: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pf-prem) 55%, transparent), transparent 68%);
    opacity: 0;
    pointer-events: none;
}

.mcp-hero.is-active .mcp-hero__glow {
    animation: mcGlow 5s ease-in-out infinite;
}

.mcp-hero__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--pf-ink) 8%, transparent);
    color: var(--pf-mute);
    transition: color .6s var(--pf-ease), box-shadow .9s var(--pf-ease);
}

.mcp-hero__ico::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--pf-prem), var(--pf-level));
    opacity: 0;
    transition: opacity .9s var(--pf-ease);
}

.mcp-hero__ico > svg {
    position: relative;
}

.mcp-hero.is-active .mcp-hero__ico {
    box-shadow: 0 10px 24px -10px var(--pf-prem);
    color: #fff;
    animation: mcFloat 4.5s ease-in-out infinite;
}

.mcp-hero.is-active .mcp-hero__ico::before {
    opacity: 1;
}

.mcp-hero.is-morph .mcp-hero__ico {
    animation: mcMorphIco 1.5s var(--pf-ease) both, mcFloat 4.5s 1.5s ease-in-out infinite;
}

.mcp-hero__wave {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pf-gold) 60%, transparent), color-mix(in srgb, var(--pf-prem) 40%, transparent) 55%, transparent 72%);
    opacity: 0;
    pointer-events: none;
    animation: mcWave 1.9s .25s ease-out both;
}

.mcp-hero__b {
    position: relative;
    display: grid;
    gap: 6px;
    justify-items: start;
    min-width: 0;
}

.mcp-hero__t {
    font-family: var(--pf-display);
    font-size: 20px;
    font-weight: 700;
}

.mcp-hero__t.is-swap,
.mcp-hero__p.is-swap {
    animation: mcSwap .85s var(--pf-ease) both;
}

.mcp-hero__p,
.mcp-hero__s,
.mcp-hero__k {
    color: var(--pf-mute);
    font-size: 13px;
}

.mcp-hero__rh {
    position: relative;
}

.mcp-hero__rh:empty {
    display: none;
}

.mcp-hero__r {
    position: relative;
    display: grid;
    gap: 2px;
    text-align: right;
}

.mcp-hero__r.is-new {
    animation: mcRise .8s .55s var(--pf-ease) both;
}

.mcp-hero__v {
    font-family: var(--pf-display);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.mcp-hero.is-bump .mcp-hero__v {
    animation: mcBump 1.3s var(--pf-ease);
}

.mcp-plus {
    position: absolute;
    top: -14px;
    right: 0;
    padding: 3px 11px;
    border-radius: 99px;
    background: var(--pf-ok);
    color: #fff;
    font-family: var(--pf-display);
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    animation: mcPlus 2.4s var(--pf-ease) both;
}

.mcp-sparks {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 0;
    height: 0;
    pointer-events: none;
}

.mcp-spark {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pf-gold);
    opacity: 0;
    animation: mcSpark 1.5s var(--w, 0ms) var(--pf-ease) both;
}

.mcp-spark--1 {
    background: var(--pf-prem);
}

.mcp-spark--2 {
    border-radius: 2px;
    background: var(--pf-accent);
}

.mcp-sparks--big .mcp-spark {
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
}

.mcp-herohost:empty,
.mcp-payhost:empty {
    display: none;
}

@keyframes mcxScan {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    10%,
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes mcSweep {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes mcSwap {
    0% {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@keyframes mcMorphIco {
    0% {
        transform: scale(1) rotate(0deg);
    }
    35% {
        transform: scale(.74) rotate(-24deg);
    }
    68% {
        transform: scale(1.26) rotate(14deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes mcWave {
    0% {
        opacity: .75;
        transform: scale(.5);
    }
    100% {
        opacity: 0;
        transform: scale(11);
    }
}

@keyframes mcSpark {
    0% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(0) scale(.2);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(var(--d)) scale(var(--z));
    }
}

@keyframes mcBump {
    0%,
    100% {
        color: inherit;
        transform: scale(1);
    }
    40% {
        color: var(--pf-ok);
        transform: scale(1.22);
    }
}

@keyframes mcPlus {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.7);
    }
    18% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    78% {
        opacity: 1;
        transform: translateY(-14px);
    }
    100% {
        opacity: 0;
        transform: translateY(-26px);
    }
}

@keyframes mcCorner {
    0%,
    100% {
        opacity: .95;
        transform: scale(1);
    }
    50% {
        opacity: .5;
        transform: scale(1.1);
    }
}

@keyframes mcStep {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.18);
    }
}

.mcp-sec {
    display: grid;
    gap: 16px;
}

.mcp-sec__t {
    font-family: var(--pf-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mcp-sec__p {
    color: var(--pf-mute);
    font-size: 13px;
}

.mcp-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    padding-top: 12px;
}

.mcp-plan {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 22px 18px 18px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--pf-panel);
    box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .6);
    text-align: left;
    isolation: isolate;
    animation: mcRise .55s var(--pf-ease) both;
    animation-delay: calc(var(--i, 0) * 80ms);
    transition: transform .3s var(--pf-ease), box-shadow .3s var(--pf-ease);
}

.mcp-plan::before {
    content: "";
    position: absolute;
    inset: -80%;
    z-index: 0;
    background: conic-gradient(from 0deg, transparent 0 52%, var(--pf-gold) 72%, var(--pf-accent) 88%, transparent 100%);
    opacity: 0;
    transition: opacity .35s;
    animation: mcSpin 3.2s linear infinite;
}

.mcp-plan::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 1;
    border-radius: 19px;
    background: var(--pf-panel);
}

.mcp-plan > * {
    position: relative;
    z-index: 2;
}

.mcp-plan:hover {
    transform: translateY(-4px);
}

.mcp-plan.is-featured {
    padding-top: 40px;
    transform: translateY(-6px);
    box-shadow: 0 30px 54px -26px color-mix(in srgb, var(--pf-gold) 70%, transparent);
}

.mcp-plan.is-featured::before {
    opacity: .5;
}

.mcp-plan.is-on {
    transform: translateY(-5px);
    box-shadow: 0 30px 54px -24px color-mix(in srgb, var(--pf-accent) 65%, transparent);
}

.mcp-plan.is-featured.is-on {
    transform: translateY(-10px);
}

.mcp-plan.is-on::before,
.mcp-plan:focus-visible::before {
    opacity: 1;
}

.mcp-plan:active {
    transform: scale(.98);
}

.mcp-plan__rib {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(110deg, var(--pf-accent), var(--pf-gold), var(--pf-accent));
    background-size: 220% 100%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: mcSheen 3.5s linear infinite;
}

.mcp-plan__chk {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pf-accent), var(--pf-gold));
    color: #fff;
    transform: scale(0);
    transition: transform .38s var(--pf-ease);
}

.mcp-plan.is-on .mcp-plan__chk {
    transform: scale(1);
}

.mcp-plan.is-featured .mcp-plan__chk {
    top: 40px;
}

.mcp-plan__name {
    font-family: var(--pf-display);
    font-size: 18px;
    font-weight: 700;
}

.mcp-plan__old {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--pf-mute);
    font-size: 13px;
}

.mcp-plan__old s {
    text-decoration-color: color-mix(in srgb, var(--pf-hot) 75%, transparent);
    text-decoration-thickness: 2px;
}

.mcp-plan__off {
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--pf-hot);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.mcp-plan__price b {
    font-family: var(--pf-display);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mcp-plan.is-featured .mcp-plan__price b {
    background: linear-gradient(110deg, var(--pf-accent), var(--pf-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 32px;
}

.mcp-plan__day {
    color: var(--pf-mute);
    font-size: 12px;
}

.mcp-plan__save {
    color: var(--pf-ok);
    font-size: 12px;
    font-weight: 600;
}

.mcp-plan__bonus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pf-gold) 16%, transparent);
    color: color-mix(in srgb, var(--pf-gold) 80%, var(--pf-ink));
    font-size: 12px;
    font-weight: 600;
}

.mcp-plan--skel {
    min-height: 210px;
    background: linear-gradient(100deg, var(--pf-panel) 30%, color-mix(in srgb, var(--pf-ink) 9%, var(--pf-panel)) 50%, var(--pf-panel) 70%);
    background-size: 220% 100%;
    animation: mcSheen 1.4s linear infinite;
}

.mcp-plan--skel::before,
.mcp-plan--skel::after {
    display: none;
}

.mcp-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--pf-panel);
    box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .55);
    animation: mcRise .5s var(--pf-ease) both;
}

.mcp-cta__i {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.mcp-cta__k {
    color: var(--pf-mute);
    font-size: 12px;
    font-weight: 600;
}

.mcp-cta__n {
    font-family: var(--pf-display);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
}

.mcp-cta__m {
    color: var(--pf-mute);
    font-size: 12px;
}

.mcp-pay {
    min-width: 260px;
}

.mcp-perks {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
}

.mcp-perks__g {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px;
    border-radius: 22px;
    background: var(--pf-panel);
    box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .55);
}

.mcp-perks__g--gold {
    background: linear-gradient(140deg, color-mix(in srgb, var(--pf-gold) 18%, var(--pf-panel)), var(--pf-panel));
}

.mcp-sub {
    font-family: var(--pf-display);
    font-size: 15px;
    font-weight: 600;
}

.mcp-perks__l {
    display: grid;
    gap: 14px;
    list-style: none;
}

.mcp-perk {
    display: flex;
    gap: 12px;
    animation: mcRise .5s var(--pf-ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.mcp-perk__i {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-prem) 14%, transparent);
    color: var(--pf-prem);
    transition: transform .3s var(--pf-ease);
}

.mcp-perks__g--gold .mcp-perk__i {
    background: color-mix(in srgb, var(--pf-gold) 18%, transparent);
    color: var(--pf-gold);
}

.mcp-perk:hover .mcp-perk__i {
    transform: scale(1.12) rotate(-6deg);
}

.mcp-perk__b b {
    font-size: 13.5px;
    font-weight: 600;
}

.mcp-perk__b p {
    color: var(--pf-mute);
    font-size: 12.5px;
}

.mcp-ask {
    display: grid;
    gap: 10px;
    width: min(360px, 100%);
    padding: 14px 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pf-warn) 14%, var(--pf-panel));
    animation: mcRise .35s var(--pf-ease) both;
}

.mcp-ask__t {
    font-size: 13px;
    line-height: 1.5;
}

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

.mcx-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .55s var(--pf-ease), opacity .45s var(--pf-ease);
    animation: mcRise .55s var(--pf-ease) both;
}

.mcx-wrap.is-out {
    grid-template-rows: 0fr;
    opacity: 0;
}

.mcx {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--pf-panel);
    box-shadow: 0 24px 54px -30px rgba(0, 0, 0, .6);
}

.mcx::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pf-accent), var(--pf-gold), var(--pf-ok), var(--pf-accent));
    background-size: 300% 100%;
    animation: mcSheen 5s linear infinite;
}

.mcx[data-state="success"]::before {
    background: var(--pf-ok);
    animation: none;
}

.mcx[data-state="expired"]::before,
.mcx[data-state="error"]::before {
    background: var(--pf-hot);
    animation: none;
}

.mcx.is-ping {
    animation: mcFocus 1.3s ease-in-out 2;
}

.mcx__in {
    display: grid;
    gap: 22px;
    padding: 24px 26px 26px;
}

.mcx__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.mcx__brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
    color: var(--pf-accent);
    font-family: var(--pf-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}

.mcx__t {
    margin-right: auto;
    font-family: var(--pf-display);
    font-size: 18px;
    font-weight: 700;
}

.mcx-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 7%, transparent);
    font-size: 13px;
    font-weight: 500;
    transition: background .4s var(--pf-ease);
}

.mcx-status__d {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pf-warn);
    animation: mcDot 1.4s ease-in-out infinite;
}

.mcx[data-state="success"] .mcx-status {
    background: color-mix(in srgb, var(--pf-ok) 16%, transparent);
}

.mcx[data-state="success"] .mcx-status__d {
    background: var(--pf-ok);
    animation: none;
}

.mcx[data-state="expired"] .mcx-status,
.mcx[data-state="error"] .mcx-status {
    background: color-mix(in srgb, var(--pf-hot) 14%, transparent);
}

.mcx[data-state="expired"] .mcx-status__d,
.mcx[data-state="error"] .mcx-status__d {
    background: var(--pf-hot);
    animation: none;
}

.mcx__body {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.mcx__qr {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.mcx-frame {
    position: relative;
    width: min(300px, 100%);
    padding: 16px;
}

.mcx-c {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 0 solid var(--pf-accent);
    pointer-events: none;
    transition: border-color .4s var(--pf-ease);
    animation: mcCorner 2.4s ease-in-out infinite;
}

.mcx-c--a {
    top: 0;
    left: 0;
    border-top-width: 3px;
    border-left-width: 3px;
    border-top-left-radius: 12px;
}

.mcx-c--b {
    top: 0;
    right: 0;
    border-top-width: 3px;
    border-right-width: 3px;
    border-top-right-radius: 12px;
    animation-delay: .3s;
}

.mcx-c--c {
    right: 0;
    bottom: 0;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-bottom-right-radius: 12px;
    animation-delay: .6s;
}

.mcx-c--d {
    bottom: 0;
    left: 0;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-bottom-left-radius: 12px;
    animation-delay: .9s;
}

.mcx[data-state="success"] .mcx-c {
    border-color: var(--pf-ok);
}

.mcx[data-state="expired"] .mcx-c,
.mcx[data-state="error"] .mcx-c {
    border-color: var(--pf-hot);
    animation: none;
}

.mcx-code {
    position: relative;
    aspect-ratio: 1;
    padding: 12px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6);
}

.mcx-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity .5s var(--pf-ease);
}

.mcx[data-state="pending"] .mcx-img,
.mcx[data-state="success"] .mcx-img,
.mcx[data-state="expired"] .mcx-img {
    opacity: 1;
}

.mcx-scan {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    left: 8px;
    border-radius: 12px;
    background: linear-gradient(180deg, transparent 0, transparent 74%, color-mix(in srgb, var(--pf-accent) 30%, transparent) 90%, var(--pf-accent) 100%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}

.mcx[data-state="pending"] .mcx-scan {
    animation: mcxScan 2.8s ease-in-out infinite;
}

.mcx-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--pf-ease);
}

.mcx-state > * {
    display: none;
    grid-area: 1 / 1;
}

.mcx[data-state="loading"] .mcx-state,
.mcx[data-state="success"] .mcx-state,
.mcx[data-state="expired"] .mcx-state,
.mcx[data-state="error"] .mcx-state {
    opacity: 1;
}

.mcx[data-state="loading"] .mcx-state__spin {
    display: block;
    width: 44px;
    height: 44px;
}

.mcx[data-state="success"] .mcx-state__ok,
.mcx[data-state="expired"] .mcx-state__bad,
.mcx[data-state="error"] .mcx-state__bad {
    display: grid;
    place-items: center;
}

.mcx-state__ok {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--pf-ok);
    box-shadow: 0 16px 34px -12px var(--pf-ok);
    color: #fff;
    animation: mcPop .6s var(--pf-ease) both;
}

.mcx-state__bad {
    color: var(--pf-hot);
    animation: mcPop .45s var(--pf-ease) both;
}

.mcx-note {
    max-width: 300px;
    color: var(--pf-mute);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.mcx__info {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.mcx-sum {
    display: grid;
    margin: 0;
}

.mcx-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pf-ink) 9%, transparent);
    font-size: 13.5px;
}

.mcx-row:last-child {
    box-shadow: none;
}

.mcx-row dt {
    flex: none;
    color: var(--pf-mute);
}

.mcx-row dd {
    min-width: 0;
    margin: 0;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.mcx-row dd.mcx-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
}

.mcx-row dd.mcx-total {
    font-family: var(--pf-display);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.mcx-timer {
    display: grid;
    gap: 8px;
}

.mcx-timer__t {
    color: var(--pf-mute);
    font-size: 13px;
}

.mcx-timer__n {
    color: var(--pf-ink);
    font-family: var(--pf-display);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.mcx[data-state="expired"] .mcx-timer__n,
.mcx[data-state="error"] .mcx-timer__n {
    color: var(--pf-hot);
}

.mcx-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pf-ink) 10%, transparent);
}

.mcx-bar__f {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pf-accent), var(--pf-gold), var(--pf-ok));
    background-size: 300% 100%;
    transform-origin: left;
    transition: transform 1s linear;
    animation: mcSheen 4s linear infinite;
}

.mcx-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mcx-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mcx-step__n {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pf-accent) 16%, transparent);
    color: var(--pf-accent);
    font-family: var(--pf-display);
    font-size: 12px;
    transition: background .5s var(--pf-ease), color .5s var(--pf-ease);
}

.mcx-step__n > * {
    grid-area: 1 / 1;
    transition: opacity .35s var(--pf-ease), transform .45s var(--pf-ease);
}

.mcx-step__n svg {
    opacity: 0;
    transform: scale(.3);
}

.mcx[data-state="pending"] .mcx-step:nth-child(1) .mcx-step__n {
    animation: mcStep 2.2s ease-in-out infinite;
}

.mcx[data-state="pending"] .mcx-step:nth-child(2) .mcx-step__n {
    animation: mcStep 2.2s .5s ease-in-out infinite;
}

.mcx[data-state="success"] .mcx-step__n {
    background: var(--pf-ok);
    color: #fff;
}

.mcx[data-state="success"] .mcx-step__n b {
    opacity: 0;
    transform: scale(.3);
}

.mcx[data-state="success"] .mcx-step__n svg {
    opacity: 1;
    transform: none;
}

.mcx[data-state="success"] .mcx-step:nth-child(2) .mcx-step__n > * {
    transition-delay: .15s;
}

.mcx[data-state="success"] .mcx-step:nth-child(3) .mcx-step__n > * {
    transition-delay: .3s;
}

.mcx-step__b {
    display: grid;
    gap: 1px;
    font-size: 13px;
}

.mcx-step__b span {
    color: var(--pf-mute);
    font-size: 12.5px;
    line-height: 1.5;
}

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

.mcx-b {
    display: none;
}

.mcx[data-state="pending"] .mcx-b--check,
.mcx[data-state="pending"] .mcx-b--down,
.mcx[data-state="pending"] .mcx-b--cancel,
.mcx[data-state="expired"] .mcx-b--retry,
.mcx[data-state="expired"] .mcx-b--close,
.mcx[data-state="error"] .mcx-b--retry,
.mcx[data-state="error"] .mcx-b--close {
    display: inline-flex;
}

.mcx[data-state="pending"] .mcx-b--cancel,
.mcx[data-state="expired"] .mcx-b--retry,
.mcx[data-state="error"] .mcx-b--retry {
    grid-column: 1 / -1;
}

.mcx-b--cancel {
    color: var(--pf-hot);
}

.mcx[data-ask] .mcx-acts {
    display: none;
}

.mcx-ask {
    display: none;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pf-hot) 12%, var(--pf-panel));
    animation: mcRise .35s var(--pf-ease) both;
}

.mcx[data-ask] .mcx-ask {
    display: grid;
}

.mcx-ask__t {
    font-size: 13px;
    line-height: 1.5;
}

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

@media (max-width: 960px) {
    .mcd-hero,
    .mcd-grid,
    .mcp-perks {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .mcp-plan.is-featured {
        grid-column: 1 / -1;
        order: -1;
    }

    .mcp-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mcp-hero__rh {
        grid-column: 1 / -1;
    }

    .mcp-hero__r {
        text-align: left;
    }

    .mcp-plus {
        right: auto;
        left: 0;
    }
}

@media (max-width: 760px) {
    .mcx__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .mcx__in {
        padding: 20px 18px 22px;
    }

    .mcx-frame {
        justify-self: center;
    }
}

@media (max-width: 560px) {
    .mcd-hero {
        padding: 20px;
    }

    .mcd-hero__t {
        font-size: 24px;
    }

    .mcp-plans {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .mcp-pay {
        width: 100%;
        min-width: 0;
    }

    .mcp-ask {
        width: 100%;
    }

    .mcx__t {
        order: 3;
        width: 100%;
        margin-right: 0;
    }

    .mcx-acts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcd *,
    .mcp *,
    .mcx,
    .mcx *,
    .mc-cta {
        animation: none !important;
        transition: none !important;
    }
}

.pf-cd {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pf-mute);
    transition: color .3s var(--pf-ease), background-color .3s var(--pf-ease), border-color .3s var(--pf-ease);
}

.pf-cd.is-locked {
    width: fit-content;
    max-width: 100%;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--pf-warn) 38%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pf-warn) 10%, transparent);
    color: var(--pf-ink);
    animation: pfCdIn .4s var(--pf-ease);
}

.pf-cd.is-locked .pf-ico {
    color: var(--pf-warn);
    animation: pfCdTick 2s ease-in-out infinite;
}

.pf-fld__h.is-locked {
    color: var(--pf-warn);
    animation: pfCdIn .4s var(--pf-ease);
}

.pf-input:disabled {
    opacity: .55;
    cursor: not-allowed;
    animation: none;
}

.pf-btn:disabled {
    cursor: not-allowed;
}

@keyframes pfCdIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pfCdTick {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .55;
        transform: scale(.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-cd.is-locked,
    .pf-cd.is-locked .pf-ico,
    .pf-fld__h.is-locked {
        animation: none;
    }
}

.pf-ti {
    --ti-a: #0e7fb8;
    --ti-b: #5b3fd0;
    --ti-fg: #fff;
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    overflow: hidden;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
    color: var(--ti-fg);
    background: linear-gradient(120deg, var(--ti-a), var(--ti-b));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ti-fg) 22%, transparent), 0 2px 8px -4px var(--ti-b);
}

.pf-ti--r1 {
    --ti-a: #fde047;
    --ti-b: #f59e0b;
    --ti-fg: #3b2500;
}

.pf-ti--r2 {
    --ti-a: #e2e8f0;
    --ti-b: #94a3b8;
    --ti-fg: #1e293b;
}

.pf-ti--r3 {
    --ti-a: #c96a2b;
    --ti-b: #8f3f12;
}

.pf-ti--adm {
    --ti-a: #ef4444;
    --ti-b: #be123c;
}

.pf-ti em {
    padding-left: 6px;
    font-style: normal;
    border-left: 1px solid color-mix(in srgb, var(--ti-fg) 40%, transparent);
}

.pf-ti::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    content: "";
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: pfTiShine 9s ease-in-out 1.5s infinite;
}

.pf-ti.is-prem {
    background: linear-gradient(120deg, var(--ti-a), var(--ti-b), var(--ti-a));
    background-size: 220% 100%;
    animation: pfTiFlow 4s ease-in-out infinite alternate, pfTiGlow 2.6s ease-in-out infinite;
}

.pf-ti.is-prem::after {
    animation-duration: 4s;
    animation-delay: .6s;
}

.pf-ti.is-prem svg {
    animation: pfTiPulse 2s ease-in-out infinite;
}

.pf-user__top .pf-ti,
.pf-lbr__n .pf-ti {
    height: 20px;
    padding: 0 7px;
    font-size: 10px;
}

@keyframes pfTiShine {
    0%,
    72% {
        transform: translateX(-140%) skewX(-18deg);
    }

    100% {
        transform: translateX(380%) skewX(-18deg);
    }
}

@keyframes pfTiFlow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

@keyframes pfTiGlow {
    0%,
    100% {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ti-fg) 22%, transparent), 0 2px 8px -4px var(--ti-b);
    }

    50% {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ti-fg) 30%, transparent), 0 0 12px -1px var(--ti-a);
    }
}

@keyframes pfTiPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
    }
}

.nav .nav_a .nav_back {
    flex: none;
    width: 34px;
    height: 34px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text1);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.nav .nav_a .nav_back svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.nav .nav_a .nav_back:active {
    background: var(--rgba2);
    transform: scale(0.92);
}

.nav .nav_a .nav_back:focus-visible {
    outline: 2px solid var(--primary2);
    outline-offset: 1px;
}

@media (hover: hover) {
    .nav .nav_a .nav_back:hover {
        background: var(--rgba2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav .nav_a .nav_back {
        transition: none;
    }
}

.nav.nav--back .nav_a .nav_bars {
    flex: none;
    margin-left: 2px;
}

@media (max-width: 767.98px) {
    .nav.nav--back .nav_a {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .nav.nav--back .nav_a .logo_m {
        width: clamp(64px, calc(64vw - 100px), 126px);
        margin-left: 4px;
    }
}