:root {
    --pf-tab-h: var(--tb-h, 3.25rem);
}

html,
body {
    background: #0F0F0F;
    color: #fff;
}

#app {
    width: 100vw;
    min-height: 100vh;
    background: #0F0F0F;
}

.pf-root {
    min-height: 100vh;
    padding-bottom: calc(var(--pf-tab-h) + 0.8rem);
    background: radial-gradient(circle at top center, rgba(190, 0, 35, .58), rgba(18, 7, 10, .96) 44%, #0d0a0b 100%);
}

.pf-head {
    padding: 2.3125rem 1rem 2.125rem;
}

.pf-user {
    display: flex;
    align-items: center;
    gap: .4375rem;
    font-family: 'Manrop 700', sans-serif;
}

.pf-avatar {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.pf-name {
    color: #fff;
    font-size: 1.1875rem;
    font-family: 'Manrope 700', sans-serif;
}

.pf-list {
    padding: 0 1rem 1rem;
}

.pf-block {
    margin-bottom: 1.4375rem;
}

.pf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.375rem;
    font-family: 'Gilroy 500', sans-serif;
}

.pf-item-left {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.pf-item-ic {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

.pf-item-title {
    color: #fff;
    font-size: 1rem;
    font-family: 'Gilroy 500', sans-serif;
}

.pf-item-arr {
    width: 1.0513rem;
    height: 1.0513rem;
    object-fit: contain;
}

.pf-preview-item {
    display: flex;
    gap: .8125rem;
    margin-top: .375rem;
}

.pf-preview-cover {
    width: 4.3388rem;
    height: 6.1994rem;
    border-radius: .3381rem;
    object-fit: cover;
    flex-shrink: 0;
}

.pf-preview-meta {
    flex: 1;
    padding-top: 1.375rem;
}

.pf-preview-title {
    color: #fff;
    font-size: .8125rem;
    font-family: 'SF pro 500', sans-serif;
}

.pf-preview-sub {
    margin-top: .4375rem;
    color: rgba(255, 255, 255, .45);
    font-size: .6875rem;
    font-family: 'SF pro 500', sans-serif;
}

.pf-preview-ep {
    margin-top: .4375rem;
    color: #909090;
    font-size: .6875rem;
    font-family: 'SF pro 500', sans-serif;
}


.pf-version {
    padding: 0.8rem 0 0.5rem;
    color: rgba(255, 255, 255, .4);
    font-size: 0.72rem;
    text-align: center;
    font-family: 'SF pro 500', sans-serif;
}

.pf-copy {
    padding: 0 0 .1875rem;
    color: rgba(255, 255, 255, .4);
    font-size: 0.72rem;
    text-align: center;
    font-family: 'SF pro 500', sans-serif;
}

.tb-tabbar {
    background: rgba(8, 8, 8, .94);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

@supports (min-height: 100dvh) {
    .pf-root {
        min-height: 100dvh;
    }
}

/* PWA 添加到主屏幕引导 */
.pf-pwa-mask {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
}

.pf-pwa-card {
    width: 100%;
    max-width: 20rem;
    background: #1A1A1A;
    border-radius: .875rem;
    padding: 1.5rem 1.25rem 1.125rem;
    text-align: center;
}

.pf-pwa-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.pf-pwa-title {
    margin-top: .875rem;
    color: #FFFFFF;
    font-size: 1.0625rem;
    font-family: 'SF pro 700', sans-serif;

}

.pf-pwa-desc {
    margin: .625rem auto 0;
    max-width: 15rem;
    color: #909090;
    font-size: .8125rem;
    line-height: 1.5;
    font-family: 'SF pro 500', sans-serif;
}

.pf-pwa-btn {
    margin-top: 1.25rem;
    height: 2.75rem;
    border-radius: 1.375rem;
    background: linear-gradient(90deg, #FF6B81 0%, #FA3767 100%);
    color: #FFFFFF;
    font-size: .9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'SF pro 500', sans-serif;
}

.pf-pwa-later {
    margin-top: .875rem;
    color: #888888;
    font-size: .8125rem;
    cursor: pointer;
    font-family: 'SF pro 400', sans-serif;
}