/* 个人中心 — Figma PC 2579:3270 / H5 2651:11244·2647:9363 / 未登录 2741:12215·2740:12174 */

body.hg-user-center-page {
    --hg-uc-accent: var(--hg-accent, #fe2e62);
}

.hg-user-center {
    position: relative;
    min-height: 28rem;
}

/* display:flex 会盖掉 UA [hidden]，须显式隐藏 */
.hg-uc-member[hidden],
.hg-uc-guest[hidden] {
    display: none !important;
}

/* —— Profile (Figma 2730:10471 / 2730:10543) —— */
.hg-uc-profile {
    position: relative;
    width: 100%;
    height: 8.5rem; /* 136px 稿面定高 */
    border-radius: 1rem; /* 16px */
    overflow: hidden;
    background: #191919;
    margin: 0 0 1.875rem;
    box-sizing: border-box;
}

.hg-uc-profile__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.hg-uc-profile__collage {
    position: absolute;
    left: 0;
    top: -3.1875rem; /* 稿面 top:-51px */
    display: flex;
    align-items: center;
    gap: 2.125rem; /* 34px */
    height: 20rem; /* 320px */
    width: max-content;
    min-width: 100%;
}

.hg-uc-profile__collage-item {
    position: relative;
    display: block;
    width: 11.25rem; /* 180px */
    flex-shrink: 0;
    overflow: hidden;
}

.hg-uc-profile__collage-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 勿再降亮度：蒙层已是 rgba(25,25,25,.9)，再压会看成纯黑 */
}

.hg-uc-profile__veil {
    position: absolute;
    left: 0;
    top: -1.4375rem; /* 稿面 top:-23 / h:212，相对 136 卡片 */
    width: 100%;
    height: 13.25rem; /* 212px */
    background: rgba(25, 25, 25, 0.9);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.hg-uc-profile__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4375rem 1.25rem; /* 23px 20px */
    box-sizing: border-box;
    height: 100%;
}

.hg-uc-profile__user {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.hg-uc-profile__avatar-wrap {
    flex-shrink: 0;
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    box-sizing: border-box;
}

.hg-uc-profile__avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hg-uc-profile__meta {
    min-width: 0;
}

.hg-uc-profile__name {
    margin: 0;
    padding: 0;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 2.8125rem;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hg-uc-profile__id {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgba(255, 255, 255, 0.65);
}

.hg-uc-profile__home-card {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0.5rem 1.875rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #fe2e62 0%, #ff5781 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(254, 46, 98, 0.35);
    box-sizing: border-box;
}

.hg-uc-profile__home-card:hover {
    filter: brightness(1.05);
}

/* —— Tabs —— */
.hg-uc-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin: 0 0 2.5rem;
    padding: 0;
}

.hg-uc-tabs__item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
}

.hg-uc-tabs__item.is-active {
    color: var(--hg-uc-accent);
    font-weight: 600;
}

.hg-uc-tabs__item.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1.875rem;
    height: 2px;
    border-radius: 999px;
    background: var(--hg-uc-accent);
}

/* —— Sub tabs 收藏 → 吃瓜/视频（Figma PC 2580:4259 / H5 2651） —— */
.hg-uc-subtabs {
    display: flex;
    align-items: flex-start; /* 文字顶对齐；圆点用占位保证等高 */
    justify-content: flex-start; /* PC 稿面左对齐 */
    gap: 1.25rem; /* 20px */
    min-height: 2.1875rem; /* 35px */
    margin: 0 0 2.5rem;
    padding: 0;
    box-sizing: border-box;
}

.hg-uc-subtabs__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem; /* 4px */
    min-height: 2.1875rem; /* 22.5 + 4 + 4 */
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    line-height: 1.40625rem; /* 22.5px */
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.hg-uc-subtabs__item.is-active {
    color: #fff;
    font-weight: 600;
}

/* 未选中也保留 4px 圆点位，避免「吃瓜/视频」上下错位 */
.hg-uc-subtabs__item::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
}

.hg-uc-subtabs__item.is-active::after {
    background: var(--hg-uc-accent);
}

.hg-uc-list {
    min-height: 8rem;
}

/* PC：收藏/点赞视频列表一行 5 个 */
body.hg-user-center-page .hg-uc-list .hg-theater-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* PC：收藏吃瓜文本卡 2 列（Figma 2580:4265） */
body.hg-user-center-page .hg-uc-list .hg-uc-post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem; /* 20px */
}

.hg-uc-post-card {
    display: block;
    box-sizing: border-box;
    padding: 1.0481rem; /* ~16.77px */
    border-radius: 0.875rem; /* 14px */
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hg-uc-post-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.hg-uc-post-card__title {
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 1rem; /* 16px */
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hg-uc-post-card__meta {
    margin: 0.625rem 0 0; /* 10px 内容间距 + 视觉对齐稿面 */
    padding: 0.375rem 0 0; /* ~6px */
    font-size: 0.75rem; /* 12px */
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hg-uc-loading {
    margin: 2rem 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9375rem;
}

.hg-uc-pagination[hidden] {
    display: none !important;
}

.hg-uc-subtabs[hidden],
.hg-uc-list .hg-empty[hidden],
.hg-theater-grid[hidden],
.hg-uc-post-grid[hidden] {
    display: none !important;
}

/* —— Guest modal —— */
.hg-uc-guest {
    position: relative;
    min-height: 22rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 0 6rem;
    box-sizing: border-box;
}

.hg-uc-guest-modal {
    position: relative;
    width: 37.5rem;
    max-width: calc(100% - 2rem);
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 77, 184, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.hg-uc-guest-modal::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -40%;
    width: 120%;
    height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(254, 46, 98, 0.18), transparent 65%);
    pointer-events: none;
}

.hg-uc-guest-modal__close {
    position: absolute;
    top: 1.1875rem;
    right: 1.3125rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.hg-uc-guest-modal__close img {
    display: block;
    width: 15px;
    height: 15px;
}

.hg-uc-guest-modal__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 6.1875rem 2.6875rem 3.125rem;
    box-sizing: border-box;
}

.hg-uc-guest-modal__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    object-fit: cover;
    margin-bottom: 1.25rem;
}

.hg-uc-guest-modal__title {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: center;
}

.hg-uc-guest-modal__title--h5 {
    display: none;
}

.hg-uc-guest-modal__desc {
    margin: 0 0 2.5rem;
    font-size: 1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.hg-uc-guest-modal__desc--h5 {
    display: none;
}

.hg-uc-guest-modal__actions {
    display: flex;
    gap: 1.25rem;
    width: 100%;
}

.hg-uc-guest-modal__btn {
    flex: 1;
    height: 3.25rem;
    border-radius: 0.3125rem;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    cursor: pointer;
}

.hg-uc-guest-modal__btn--primary {
    background: var(--hg-uc-accent);
    box-shadow: 0 4px 12px rgba(255, 30, 148, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hg-uc-guest-modal__btn--secondary {
    background: #171717;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hg-uc-guest-modal__btn--primary:hover {
    filter: brightness(1.05);
}

/* —— H5 —— */
@media (max-width: 767px) {
    body.hg-user-center-page #body > .container {
        padding-left: 0.6667rem;
        padding-right: 0.6667rem;
    }

    .hg-uc-profile {
        margin-bottom: 1.0667rem;
        border-radius: 0.4267rem;
    }

    .hg-uc-profile {
        height: 3.9733rem;
    }

    .hg-uc-profile__collage {
        top: -1.36rem;
        gap: 0.5333rem;
        height: 7.12rem;
    }

    .hg-uc-profile__collage-item {
        width: 4.8rem;
        /* H5 等比缩小稿面高度 */
        height: auto !important;
        align-self: center;
        aspect-ratio: 180 / 280;
    }

    .hg-uc-profile__inner {
        padding: 0.5333rem;
        gap: 0.5333rem;
    }

    .hg-uc-profile__user {
        gap: 0.6667rem;
    }

    .hg-uc-profile__avatar-wrap {
        width: 2.9067rem;
        height: 2.9067rem;
        border-width: 0.1067rem;
    }

    .hg-uc-profile__name {
        font-size: 0.8533rem;
        line-height: 1.2rem;
    }

    .hg-uc-profile__id {
        font-size: 0.64rem;
        line-height: 1.04rem;
        margin-top: 0.16rem;
        color: rgba(255, 255, 255, 0.55);
    }

    .hg-uc-profile__home-card {
        height: 1.5467rem;
        padding: 0.2133rem 0.8rem;
        font-size: 0.6933rem;
        background: linear-gradient(90deg, #fe2e62, #ff5781);
    }

    .hg-uc-tabs {
        gap: 1.0667rem;
        margin-bottom: 1.0667rem;
    }

    .hg-uc-tabs__item {
        font-size: 0.8rem;
        padding-bottom: 0.32rem;
    }

    .hg-uc-tabs__item.is-active::after {
        width: 1.6rem;
        height: 0.1067rem;
    }

    .hg-uc-subtabs {
        justify-content: center; /* H5 居中 */
        margin: 0 0 1.0667rem;
        gap: 1.0667rem;
        min-height: auto;
    }

    .hg-uc-subtabs__item {
        font-size: 0.7467rem;
        gap: 0.2667rem;
        line-height: 1.2;
    }

    .hg-uc-subtabs__item.is-active::after {
        width: 0.16rem;
        height: 0.16rem;
    }

    /* H5：视频一行 2 个 */
    body.hg-user-center-page .hg-theater-grid,
    body.hg-user-center-page .hg-uc-list .hg-theater-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5333rem;
    }

    /* H5：收藏吃瓜单列文本卡（Figma 2651:11383，750 稿） */
    body.hg-user-center-page .hg-uc-list .hg-uc-post-grid {
        grid-template-columns: 1fr;
        gap: 0.5333rem; /* 20px */
    }

    .hg-uc-post-card {
        padding: 0.56rem 0.4533rem; /* 21px 17px @750 */
        border-radius: 0.2667rem; /* 10px */
    }

    .hg-uc-post-card__title {
        margin: 0;
        font-size: 0.7467rem; /* 28px @750 → 14px */
        line-height: 1.4286; /* 40/28 */
        white-space: nowrap;
    }

    .hg-uc-post-card__meta {
        margin: 0.2667rem 0 0; /* 10px */
        padding: 0.32rem 0 0; /* 12px */
        font-size: 0.64rem; /* 24px @750 → 12px */
        line-height: 1.5; /* 18px @12px */
    }

    /* Guest H5 card */
    .hg-uc-guest {
        padding: 2rem 0 4rem;
        min-height: 16rem;
    }

    .hg-uc-guest-modal {
        width: 100%;
        max-width: 18.6667rem;
        border-radius: 0.5333rem;
    }

    .hg-uc-guest-modal__close {
        display: none;
    }

    .hg-uc-guest-modal__body {
        padding: 1.3067rem 0.7733rem 1.6rem;
        gap: 0.4267rem;
    }

    .hg-uc-guest-modal__avatar {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0.5333rem;
        border-width: 0.0533rem;
        margin-bottom: 0.5333rem;
    }

    .hg-uc-guest-modal__title--pc,
    .hg-uc-guest-modal__desc--pc {
        display: none;
    }

    .hg-uc-guest-modal__title--h5 {
        display: block;
        font-size: 0.96rem;
        line-height: 1.2rem;
    }

    .hg-uc-guest-modal__desc--h5 {
        display: block;
        margin: 0 0 1.0667rem;
        font-size: 0.64rem;
        line-height: 0.59rem;
        color: rgba(255, 255, 255, 0.65);
        max-width: 13.7333rem;
    }

    .hg-uc-guest-modal__actions {
        flex-direction: column;
        gap: 0;
    }

    .hg-uc-guest-modal__btn--secondary {
        display: none;
    }

    .hg-uc-guest-modal__btn--primary {
        width: 100%;
        height: 2.0533rem;
        border-radius: 0.5333rem;
        font-size: 0.8rem;
        background: linear-gradient(90deg, #fe2e62, #ff5781);
        box-shadow: 0 0 0.474rem rgba(254, 46, 98, 0.48);
    }
}