/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background-color: #f5f5f5;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 顶部导航栏 */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 18px;
    font-weight: bold;
    color: #ff6b9d;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 搜索条 - 胶囊形浅灰样式 */
.search-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 12px;
    min-width: 100px;
    max-width: 160px;
    border-radius: 18px;
    background: #E8E8E8;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.search-box:active {
    background: #E0E0E0;
}

.search-box .icon-search {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-box .icon-search::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    font-size: 0;
}

.search-box-text {
    font-size: 14px;
    color: #777;
    white-space: nowrap;
    user-select: none;
}

.icon-search::before {
    content: "🔍";
    font-size: 20px;
}

.icon-close {
    font-style: normal;
    font-weight: bold;
    line-height: 1;
}

/* 未登录时显示的登录按钮 */
.header-login-btn {
    padding: 6px 14px;
    font-size: 14px;
    color: #6A5ACD;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(106, 90, 205, 0.35);
    border-radius: 18px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.header-login-btn:active {
    background: rgba(255, 255, 255, 1);
}

.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 顶部头像下拉菜单（位置由 JS 根据头像动态设置） */
.header-avatar-menu {
    display: none;
    position: fixed;
    z-index: 1000;
    min-width: 140px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.header-avatar-menu.active {
    display: block;
}

.header-avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

.header-avatar-menu-item:active {
    background: #f0f0f0;
}

.header-avatar-menu-item .header-avatar-menu-icon {
    font-size: 18px;
}

.header-avatar-menu-icon--svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
}

.header-avatar-menu-icon--svg svg {
    display: block;
    width: 18px;
    height: 18px;
}

.header-avatar-menu-logout {
    color: #dc2626;
}

.header-avatar-menu-logout .header-avatar-menu-icon--svg {
    color: #dc2626;
    opacity: 0.95;
}

/* 四 Tab 统一页面渐变（略加深饱和度，避免整体发白发灰） */
:root {
    --app-page-bg: linear-gradient(
        145deg,
        #b8cceb 0%,
        #cbb9e6 38%,
        #dcb8d4 72%,
        #c4cae8 100%
    );
}

body:has(#homePage.active),
body:has(#dynamicPage.active),
body:has(#messagePage.active),
body:has(#minePage.active) {
    background: var(--app-page-bg);
    background-attachment: fixed;
    min-height: 100vh;
}

/* 「我的」页：与截图一致的浅紫纯色底，与其它 Tab 渐变区分 */
body:has(#minePage.active) {
    background: #f3e8ff;
}

/* 顶栏：毛玻璃 + 浅色字，与统一渐变底协调（四 Tab、全屏宽一致） */
body:has(#homePage.active) .top-header,
body:has(#dynamicPage.active) .top-header,
body:has(#messagePage.active) .top-header,
body:has(#minePage.active) .top-header {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

body:has(#homePage.active) .logo,
body:has(#dynamicPage.active) .logo,
body:has(#messagePage.active) .logo,
body:has(#minePage.active) .logo {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

body:has(#homePage.active) .search-box,
body:has(#dynamicPage.active) .search-box,
body:has(#messagePage.active) .search-box,
body:has(#minePage.active) .search-box {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body:has(#homePage.active) .search-box:active,
body:has(#dynamicPage.active) .search-box:active,
body:has(#messagePage.active) .search-box:active,
body:has(#minePage.active) .search-box:active {
    background: rgba(255, 255, 255, 0.98);
}

body:has(#homePage.active) .header-login-btn,
body:has(#dynamicPage.active) .header-login-btn,
body:has(#messagePage.active) .header-login-btn,
body:has(#minePage.active) .header-login-btn {
    color: #fff;
    background: rgba(255, 107, 157, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

body:has(#homePage.active) .header-login-btn:active,
body:has(#dynamicPage.active) .header-login-btn:active,
body:has(#messagePage.active) .header-login-btn:active,
body:has(#minePage.active) .header-login-btn:active {
    background: rgba(255, 107, 157, 0.65);
}

/* 主要内容区域：margin-top 须 ≥ 顶栏高度(48px)，勿改成 20px 否则会整体上移与顶栏重叠 */
.main-content {
    margin-top: 48px;
    margin-bottom: 60px;
    min-height: calc(100vh - 108px);
    padding-bottom: 20px;
    padding-top: 12px;
}

/* 四 Tab：统一主区背景与顶距（与 body 渐变一致，避免衔接色差） */
.main-content:has(#homePage.active),
.main-content:has(#dynamicPage.active),
.main-content:has(#messagePage.active),
.main-content:has(#minePage.active) {
    min-height: calc(100vh - 96px);
    background: var(--app-page-bg);
    padding-top: 8px;
}

.main-content:has(#minePage.active) {
    background: #f3e8ff;
}

.page-section {
    display: none;
    padding: 0 15px;
    padding-top: 0;
    margin-top: 0;
}

.page-section.active {
    display: block;
}

/* 轮播图 */
.banner-slider {
    margin: 0 0 15px 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: clamp(170px, 26vw, 260px);
    overflow: hidden;
    background: #fff;
}

.slider-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0));
    z-index: 2;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slider-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.slider-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    pointer-events: none;
}

.slider-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: transform 0.2s ease, width 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
}

.slider-dot.active {
    width: 26px;
    height: 8px;
    background: rgba(255, 107, 157, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 18px rgba(255, 107, 157, 0.28);
}

/* 分类标签 + 筛选同一行并排 */
.category-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: nowrap;
    position: relative;
    z-index: 50;
}

.category-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
}

.category-tabs .tab-item {
    flex-shrink: 0;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.tab-item {
    padding: 8px 20px;
    background: #fff;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    overflow: hidden;
    isolation: isolate;
}

.tab-item.active {
    background: #ff6b9d;
    color: #fff;
}

/* 筛选按钮（与标签统一风格，适配网页） */
.filter-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.filter-icon-wrap.hidden {
    display: none;
}

.filter-icon-btn {
    padding: 8px 16px;
    height: auto;
    min-height: 36px;
    border: none;
    border-radius: 20px;
    background: #fff;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.filter-icon-btn:hover {
    background: #fff;
    color: #666;
}

.filter-icon-btn:active {
    transform: scale(0.98);
}

.filter-btn-text {
    white-space: nowrap;
}

.icon-filter {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.icon-filter::before {
    content: '';
    display: block;
    width: 2px;
    height: 10px;
    background: currentColor;
    border-radius: 1px;
    margin: 2px auto 0;
    box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor;
}

/* H5：分类可横向滑动 + 筛选紧凑胶囊（与标签同风格），避免单图标显得空、贴边被裁切 */
@media (max-width: 767px) {
    #homePage.page-section {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .category-row {
        gap: 8px;
        margin: 10px 0 12px;
        align-items: center;
    }

    .category-tabs {
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    .category-tabs .tab-item {
        padding: 6px 12px;
        font-size: 13px;
    }

    .filter-icon-wrap {
        flex-shrink: 0;
    }

    .filter-icon-btn {
        padding: 5px 9px;
        min-height: 30px;
        font-size: 12px;
        font-weight: 600;
        gap: 3px;
        border-radius: 999px;
        line-height: 1.15;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        justify-content: center;
        box-sizing: border-box;
    }

    .filter-icon-btn .filter-btn-text {
        display: inline;
        font-size: 11px;
        letter-spacing: -0.02em;
    }

    .filter-icon-btn .icon-filter {
        width: 12px;
        height: 12px;
        opacity: 0.88;
    }

    /* 竖条图标在窄按钮里居中，避免看起来「歪」或像一团 */
    .filter-icon-btn .icon-filter::before {
        width: 2px;
        height: 9px;
        margin: 1px auto 0;
        box-shadow: 4px 0 0 currentColor, 8px 0 0 currentColor;
    }
}

/* 筛选下拉面板（网页适配：紧凑、靠按钮定位） */
#filterModal.modal {
    background: rgba(0, 0, 0, 0.15);
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
}

#filterModal .modal-content {
    max-width: 280px;
    min-width: 240px;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-filter .modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.modal-filter .modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.modal-filter .modal-body {
    padding: 14px 16px;
}

.filter-modal-group {
    margin-bottom: 14px;
}

.filter-modal-group:last-child {
    margin-bottom: 0;
}

.filter-modal-label {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
}

.filter-modal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-modal-option {
    padding: 6px 14px;
    font-size: 13px;
    color: #555;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-modal-option:hover {
    background: #f0f0f0;
    border-color: #e0e0e0;
    color: #333;
}

.filter-modal-option.active {
    background: #ff6b9d;
    border-color: #ff6b9d;
    color: #fff;
}

.modal-filter .modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.modal-filter .modal-footer .btn-secondary,
.modal-filter .modal-footer .btn-primary {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
}

/* 保留旧 filter 相关类（供其他可能引用） */
.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    font-weight: 500;
}

.filter-item {
    position: relative;
    padding: 6px 14px;
    background: #fff;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.filter-item.open .filter-dropdown {
    display: block;
}

/* 动态卡片右上角删除按钮（仅自己发布的动态显示） */
.dynamic-delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 12px;
    border: 1px solid rgba(255, 82, 82, 0.3);
    background: rgba(255, 82, 82, 0.08);
    color: #ff5252;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(255, 82, 82, 0.1);
    z-index: 10;
    max-width: 80px;
    overflow: hidden;
}

.dynamic-delete-btn:hover {
    background: rgba(255, 82, 82, 0.15);
    color: #ff1744;
    border-color: rgba(255, 82, 82, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255, 82, 82, 0.2);
}

.dynamic-delete-btn:active {
    transform: translateY(0);
    background: rgba(255, 82, 82, 0.25);
    box-shadow: 0 1px 2px rgba(255, 82, 82, 0.15);
}

.filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 100px;
    z-index: 1000;
    overflow: hidden;
}

.filter-option {
    padding: 10px 15px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
}

.filter-option:hover,
.filter-option.active {
    background: #e8e8e8;
    color: #1a1a1a;
}

/* 用户列表 */
.user-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.user-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
}

.user-card:active {
    transform: scale(0.98);
}

.user-card-cover {
    position: relative;
    width: 100%;
    /* 原 133.33%（约 3:4 竖版）偏高；略压扁封面以降低整卡高度 */
    padding-top: 118%;
    overflow: hidden;
}

.user-card-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-card-status {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
}
.user-card-status.online {
    background: #52c41a !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(82, 196, 26, 0.4);
}
.user-card-status.offline {
    background: #8c8c8c !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.user-card-status.busy {
    background: #faad14 !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(250, 173, 20, 0.3);
}

/* 首页资料卡 · 通话 / 搭讪（与 APP item_main_home_* 的 btn_chat / btn_dashan 一致，资源来自 mipmap） */
.user-card-call-btn {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 4;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.user-card-call-btn .user-card-cover-action-img,
.user-card-call-btn img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.user-card-call-btn:active {
    transform: scale(0.96);
    opacity: 0.92;
}

.user-card-sayhi-btn {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 5;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.user-card-sayhi-btn .user-card-cover-action-img,
.user-card-sayhi-btn img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.user-card-sayhi-btn:active {
    transform: scale(0.96);
    opacity: 0.93;
}

.user-card-info {
    padding: 8px 10px 9px;
}

.user-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.user-card-name {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    max-width: 9em;
}

/* 首页用户卡：昵称旁视频/语音角标（o_main_use_*） */
.user-card-call-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 2px;
}

.user-card-call-icon {
    width: 14px;
    height: 14px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.user-card-price-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

.user-card-price-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

.user-card-price-text {
    font-size: 12px;
    color: #999;
    line-height: 1.2;
}

.user-card-auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #ff6b9d;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.user-card-vip {
    display: inline-block;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
}

.user-card-level {
    display: inline-block;
    padding: 2px 6px;
    background: #f0f0f0;
    color: #666;
    border-radius: 3px;
    font-size: 10px;
    flex-shrink: 0;
}

.user-card-desc {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 动态页面（标题区、分段 tab 与消息侧栏共用样式，见 .message-sidebar-header / .message-tabs） ========== */
#dynamicPage {
    padding: 0 0 20px !important;
    overflow: visible;
    min-height: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

#dynamicList {
    overflow: visible;
    min-height: 0;
}

#dynamicList .dynamic-meta-row {
    flex-wrap: wrap;
}

/* 动态列表 - 两列网格，与上方 tabs 同宽对齐 */
.dynamic-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-height: 0;
    align-items: start;
}

.dynamic-list .empty-state {
    grid-column: 1 / -1;
}

.dynamic-item {
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
    position: relative;
    height: auto;
    min-height: 0;
}

.dynamic-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
    position: relative;
}

.dynamic-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid #f3f4f6;
}

.dynamic-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding-right: 8px;
}

.dynamic-username {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.dynamic-time {
    font-size: 11px;
    color: #9ca3af;
}

.dynamic-content {
    margin-bottom: 8px;
    line-height: 1.45;
    color: #374151;
    font-size: 13px;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dynamic-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 12px;
}

.dynamic-image {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.dynamic-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dynamic-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid #f3f4f6;
    gap: 8px;
}

.dynamic-item .dynamic-video,
.dynamic-item .dynamic-video img {
    max-height: 180px !important;
    object-fit: cover;
}

/* 动态卡片点赞/评论 - 更大更清晰 */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    cursor: pointer;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    background: #f5f5f7;
    transition: color 0.2s ease, background 0.2s ease;
    flex: 1;
    max-width: 50%;
}

.action-btn span:first-child {
    font-size: 18px;
    line-height: 1;
}

.action-btn:hover {
    color: #ff6b9d;
    background: rgba(255, 107, 157, 0.08);
}

.action-btn.active {
    color: #ff6b9d;
    background: rgba(255, 107, 157, 0.12);
}

.action-btn.active span:first-child {
    font-size: 18px;
}

/* ========== 消息页面 - 双栏布局 ========== */
/* 消息页激活时：禁止页面滚动，去除多余内边距 */
body:has(#messagePage.active) {
    overflow: hidden;
}
.main-content:has(#messagePage.active) {
    overflow: hidden;
    /* 与底部固定导航留出间距（高度为 border-box，内边距算在总高内，勿与 height 重复扣减） */
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    /* 让消息页整体成为圆角卡片，而不是铺满直角 */
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    height: calc(100vh - 48px - 12px - 60px);
    min-height: 0;
    box-sizing: border-box;
}

#messagePage {
    padding: 0 !important;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

.message-layout {
    display: flex;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.message-sidebar {
    width: 320px;
    min-width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e5e5e5;
}

.message-sidebar-header,
#dynamicPage .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    margin-bottom: 0;
}

.message-sidebar-header h2,
#dynamicPage .page-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #191919;
    margin: 0;
    letter-spacing: normal;
}

.message-sidebar .message-tabs {
    margin: 0;
    border-radius: 0;
    padding: 0 12px 12px;
}

.message-sidebar .message-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.message-sidebar .message-list::-webkit-scrollbar {
    display: none;
}

.message-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(255, 255, 255, 0.55);
}

.message-main-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
}

.message-main-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.message-main-empty-text {
    font-size: 15px;
    color: #999;
}

.message-main-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.message-main-chat .chat-header {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.message-main-chat .chat-messages {
    flex: 1;
}

.message-main-chat .chat-input-area {
    flex-shrink: 0;
    /* 仅保留安全区内边距；与底栏的间距由 #messagePage / .main-content 高度与下方规则统一预留，避免此处再垫 96px 造成整块输入区下方大块空白 */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.chat-header-safety {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}

.chat-header-link-btn {
    padding: 6px 10px;
    font-size: 13px;
    color: #666;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.chat-header-link-btn:active {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.chat-header-link-btn--report {
    color: #c62828;
}

.chat-header-link-btn--report:active {
    color: #b71c1c;
    background: rgba(198, 40, 40, 0.08);
}

.chat-header-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.chat-header-btn svg {
    width: 20px;
    height: 20px;
}

.chat-header-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #191919;
}

/* 移动端消息布局：无选中时显示列表，有选中时全屏聊天 */
@media (max-width: 767px) {
    .main-content:has(#messagePage.active) {
        height: calc(100vh - 48px - 12px - 60px);
    }
    #messagePage {
        margin: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .message-layout {
        flex-direction: row;
        height: 100%;
    }

    .message-sidebar {
        min-width: 0;
        border-right: none;
    }

    /* 无选中：侧边栏全宽，主区域隐藏 */
    #messagePage:not(.has-chat) .message-sidebar {
        flex: 1;
        width: 100%;
    }

    #messagePage:not(.has-chat) .message-main {
        display: none;
    }

    /* 有选中：侧边栏隐藏，主区域全屏聊天 */
    #messagePage.has-chat .message-sidebar {
        display: none;
    }

    #messagePage.has-chat .message-main {
        flex: 1;
        width: 100%;
        min-width: 0;
    }

    .message-main-chat {
        height: 100%;
    }

    /* 聊天全屏时：整块主栏与底部导航之间留白（灰底 #f5f5f5），不把空白垫在输入区白底内部 */
    #messagePage.has-chat .message-main {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* 动态页与消息页同一主区内边距（仅 H5，PC 沿用 .main-content 的 40px 左右边距） */
    .main-content:has(#dynamicPage.active) {
        padding-left: 12px;
        padding-right: 12px;
        /* 顶栏搜索区与下方白卡分层（截图：避免「动态」整块贴住顶栏） */
        padding-top: 28px;
    }

    /* 白底标题区与顶栏再错开一档 */
    #dynamicPage.page-section {
        margin-top: 4px;
    }

    /* H5：动态分段条缩小 — 全部/关注 不要占过高（截图标注） */
    #dynamicPage .dynamic-tabs {
        margin: 8px 0 10px;
        border-radius: 10px;
        padding: 3px;
        box-sizing: border-box;
    }

    #dynamicPage .dynamic-tabs .tab-item {
        padding: 6px 10px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 8px;
        line-height: 1.25;
    }

    #dynamicPage .dynamic-tabs .tab-item.active {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    }

    /* 标题区略加大上内边距，与顶栏视觉分层 */
    #dynamicPage .page-header {
        padding-top: 14px;
        padding-bottom: 12px;
    }
}

/* 消息 / 动态 分段控制器（#dynamicPage .dynamic-tabs 与 .message-sidebar .message-tabs 另有对齐覆盖） */
.message-tabs,
.dynamic-tabs {
    display: flex;
    gap: 0;
    background: #f0f2f5;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

.message-tabs .tab-item,
.dynamic-tabs .tab-item {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    transition: all 0.25s ease;
    margin: 0;
}

.message-tabs .tab-item:hover,
.dynamic-tabs .tab-item:hover {
    color: #374151;
}

.message-tabs .tab-item.active,
.dynamic-tabs .tab-item.active {
    background: #fff;
    color: #ff6b9d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 消息列表 */
.message-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.message-item:hover {
    background: #fafafa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.message-item:active {
    transform: scale(0.98);
}

.message-item.chat-item {
    padding: 12px 14px;
    padding-right: 120px; /* 为备注按钮和删除按钮预留空间，避免覆盖内容 */
}

.message-item.chat-item.is-active {
    background: rgba(255, 107, 157, 0.10);
    outline: 1px solid rgba(255, 107, 157, 0.45); /* 不占布局，不影响卡片原有尺寸/内边距 */
    outline-offset: -1px;
    box-shadow: 0 4px 14px rgba(255, 107, 157, 0.10);
}

.message-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid #f3f4f6;
}

.message-item:hover .message-avatar {
    border-color: #ff6b9d20;
}

.message-item .message-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.message-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 昵称不换行 */
    min-width: 0;
    flex: 1;
}

.message-time {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
}

.message-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 2px;
}
.chat-message.self .message-meta { align-items: flex-end; }
.chat-message.other .message-meta { align-items: flex-start; }
.message-read {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}

.message-text-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.message-text {
    font-size: 14px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(255, 107, 157, 0.35);
}

/* 聊天列表删除按钮 */
.chat-delete-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 16px;
    color: #ff3b30;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.message-item:hover .chat-delete-btn {
    opacity: 1;
}

.chat-delete-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    border-color: rgba(255, 59, 48, 0.5);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.3);
}

.chat-delete-btn:active {
    transform: translateY(-50%) scale(0.95);
    background: rgba(255, 59, 48, 0.3);
}

/* 聊天列表备注按钮 */
.message-item .chat-remark-btn {
    position: absolute;
    top: 50%;
    right: 72px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 107, 157, 0.1);
    border: 1px solid rgba(255, 107, 157, 0.3);
    border-radius: 50%;
    color: #ff6b9d;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    z-index: 10;
}

.message-item:hover .chat-remark-btn {
    opacity: 1;
}

.chat-remark-btn:hover {
    background: rgba(255, 107, 157, 0.2);
    border-color: rgba(255, 107, 157, 0.5);
    transform: translateY(-50%) scale(1.05);
}

.chat-remark-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* 聊天窗口头部备注按钮 - 紧贴昵称，与关闭按钮分开 */
.chat-user-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    max-width: 100%;
}

.chat-header .chat-remark-btn {
    position: static;
    transform: none;
    opacity: 1;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    font-size: 14px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(255, 107, 157, 0.25);
    border-radius: 999px;
    color: #ff6b9d;
    margin-left: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.chat-header .chat-remark-btn:hover {
    background: rgba(255, 107, 157, 0.08);
    border-color: rgba(255, 107, 157, 0.45);
}

.chat-header .chat-remark-btn:active {
    background: rgba(255, 107, 157, 0.14);
}

.chat-header .btn-close {
    margin-left: 16px;
}

/* 备注模态框 */
.remark-modal {
    width: 90%;
    max-width: 340px;
    min-width: 280px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.remark-modal .modal-header {
    padding: 18px 20px 12px;
    border-bottom: none;
}

.remark-modal .modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.remark-modal .close-btn {
    color: #999;
    font-size: 20px;
}

.remark-modal .close-btn:hover {
    color: #666;
}

.remark-modal .modal-body {
    padding: 8px 20px 20px;
}

.remark-modal .remark-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.5;
}

.remark-modal .remark-label strong {
    color: #333;
    font-weight: 600;
}

.remark-modal .remark-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.remark-modal .remark-input:focus {
    outline: none;
    border-color: #ff6b9d;
}

.remark-modal .remark-tip {
    font-size: 12px;
    color: #999;
}

.remark-modal .modal-footer {
    display: flex;
    justify-content: stretch;
    padding: 0 20px 20px;
    border-top: none;
}

.remark-modal .btn-primary {
    width: 100%;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    background: #ff6b9d;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.remark-modal .btn-primary:hover {
    background: #ff5a8a;
}

/* 礼物消息：与 APP item_chat_gift_left / item_chat_gift_right 一致（无渐变气泡，横排图标+名称 + × + 数量） */
.gift-message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0;
    max-width: 100%;
}

.gift-message .gift-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.gift-message .gift-icon-wrapper {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.gift-message .gift-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    padding: 0;
    border-radius: 0;
}

.gift-message .gift-name {
    font-size: 12px;
    font-weight: 400;
    color: #323232;
    text-align: center;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gift-message .gift-multiply {
    flex-shrink: 0;
    width: 16px;
    margin: 0 8px;
    padding-top: 2px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #FEE03A;
    text-align: center;
}

.gift-message .gift-count {
    flex-shrink: 0;
    min-height: 24px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #323232;
    line-height: 1;
}

/* 礼物特效容器 */
.modal-chat {
    position: relative;
}

#gift-effect-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.gift-effect-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1001;
    max-width: 80%;
    max-height: 80%;
}

.gift-effect-gif {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 消息空状态 */
#messageList .empty-state.message-empty {
    background: #fff;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.message-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    line-height: 1;
}

.message-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.message-empty-desc {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 24px;
}

.message-empty-btn {
    padding: 10px 28px;
    border-radius: 24px;
    font-weight: 500;
}

/* 消息列表加载中、登录提示等通用空状态 */
#messageList .empty-state:not(.message-empty) {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    font-size: 15px;
    color: #6b7280;
}

/* 我的页面 — 资料卡：纯白大卡 + 轻阴影，无描边（与截图一致） */
.mine-profile-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px 16px 16px;
    margin: 0 0 14px;
    border: none;
    box-shadow: 0 4px 24px rgba(17, 24, 39, 0.08);
    overflow: visible;
}

.mine-profile-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mine-profile-header-row:focus {
    outline: 2px solid rgba(129, 140, 248, 0.45);
    outline-offset: 2px;
    border-radius: 12px;
}

.mine-profile-text {
    flex: 1;
    min-width: 0;
}

.mine-profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mine-profile-card .username {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.25;
}

.mine-vip-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.mine-profile-id-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 整段「ID: xxxx」放在浅蓝胶囊内、白字（与截图一致） */
.mine-id-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(96, 165, 250, 0.35);
}

.mine-profile-level {
    display: none;
}

.mine-profile-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* 编辑资料：浅紫底 + 紫字 + 细紫边（与截图一致） */
.mine-edit-profile-btn {
    margin: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
}

.mine-edit-profile-btn:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #6d28d9;
}

.mine-edit-profile-btn:active {
    background: #e9e5ff;
}

.avatar-wrapper {
    width: 70px;
    height: 70px;
    position: relative;
}

.mine-profile-card .mine-profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid #e9d5ff;
    box-shadow: none;
}

.mine-profile-card .avatar-edit-icon {
    display: none;
}

.mine-profile-stats.user-stats {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding: 16px 4px 14px;
    margin-top: 6px;
}

.mine-profile-stats .stat-item {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 2px 4px;
}

.mine-profile-stats .stat-item[role='button']:focus {
    outline: 2px solid rgba(129, 140, 248, 0.45);
    outline-offset: 2px;
    border-radius: 8px;
}

.mine-profile-stats .stat-value {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.mine-profile-stats .stat-label {
    font-size: 12px;
    color: #9ca3af;
    opacity: 1;
    font-weight: 400;
}

/* 增值功能：与统计区之间留白 + 浅灰描边子卡片（与截图一致） */
.mine-value-added-block {
    margin: 14px 0 0;
    padding: 14px 12px 14px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}

.mine-value-added-heading {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px 2px;
    letter-spacing: 0.02em;
}

.mine-value-added-grid {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: flex-start;
    overflow: visible;
    padding-top: 10px;
    margin-top: 0;
}

.mine-value-added-item {
    position: relative;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding-top: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}

.mine-value-added-item:active {
    transform: translateY(1px);
}

.mine-value-added-icon {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.mine-value-added-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.mine-value-added-emoji {
    display: none;
    font-size: 34px;
    line-height: 1;
}

.mine-value-added-panel {
    border-radius: 12px;
    padding: 22px 5px 10px;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    border: none;
}

/* 与截图色值：#FFFBEB / #FFF1F0 / #F5F3FF */
.mine-value-added-panel--vip {
    background: #fffbeb;
}

.mine-value-added-panel--invite {
    background: #fff1f0;
}

.mine-value-added-panel--family {
    background: #f5f3ff;
}

.mine-value-added-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 3px;
    line-height: 1.25;
}

.mine-value-added-sub {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.4;
}

.mine-value-added-item:hover .mine-value-added-panel {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* 增值功能图标向上溢出时勿裁剪 */
#minePage {
    overflow: visible;
}

/* 其他页面仍可能使用 .username / .user-stats 等类名时的兜底 */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-details {
    flex: 1;
}

.username {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.user-level {
    font-size: 13px;
    opacity: 0.9;
}

.user-id {
    font-size: 13px;
    margin-top: 6px;
}

.user-stats {
    display: flex;
    gap: 20px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
}

.stat-label {
    font-size: 12px;
    opacity: 0.9;
}

/* 我的 - 认证 / 勿扰（H5 紧凑布局，避免占屏过高） */
.feature-cards-section {
    padding: 10px 12px;
    background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.feature-cards-grid {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.feature-card {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 8px 6px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.feature-card--disturb {
    cursor: default;
}

.feature-card-icon-wrap {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.feature-card-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.feature-card-icon-fallback {
    display: none;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}

.feature-card-icon-fallback span {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

.feature-card-label {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.2;
}

.feature-card-label--disturb {
    margin-bottom: 4px;
}

.feature-card--disturb .disturb-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.disturb-switch-track {
    width: 40px;
    height: 22px;
    background: #ccc;
    border-radius: 11px;
    position: relative;
    transition: background 0.3s;
}

.disturb-switch-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transform: translateX(0);
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 基本功能区域（移动端默认 4 列，避免 6 列过挤） */
.basic-functions-section {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.basic-functions-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
    padding-left: 2px;
}

.basic-functions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.basic-function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.basic-function-item:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
}

.basic-function-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.basic-function-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.basic-function-icon-emoji {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.basic-function-text {
    font-size: 12px;
    color: #333;
    text-align: center;
    font-weight: 500;
    line-height: 1.25;
}

.mine-menu-other {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 15px;
}

.mine-menu {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-text {
    flex: 1;
    font-size: 15px;
}

.menu-arrow {
    color: #ccc;
}

.menu-item.logout-item {
    margin-top: 20px;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    color: #dc2626;
}

.menu-item.logout-item .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.menu-item.logout-item .menu-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.menu-item.logout-item .menu-text {
    color: inherit;
    font-weight: 600;
}

/* 底部导航栏 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    display: flex;
    z-index: 1000;
}

/* 主 App 四 Tab：底栏与顶栏一致，半透毛玻璃叠在统一渐变上 */
body:has(#homePage.active) .bottom-nav,
body:has(#dynamicPage.active) .bottom-nav,
body:has(#messagePage.active) .bottom-nav,
body:has(#minePage.active) .bottom-nav {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* 与 APP TabButton tbn_text_color_unchecked @color/gray1 */
    color: #969696;
    position: relative;
    transition: color 0.3s;
    min-width: 0;
}

/* 与 APP TabButton tbn_text_color_checked @color/global */
.nav-item.active {
    color: #7014e2;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 3px;
}

/* 底部导航：APP 同款多帧 PNG */
.nav-icon-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 3px;
}
.nav-tab-img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
    flex-shrink: 0;
}

.nav-item span {
    font-size: 12px;
    white-space: nowrap;
    display: inline-block;
}

.badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    background: #ff4757;
    color: #fff;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    white-space: nowrap;
}

/* 确保徽章不遮挡文字，显示在图标上方 */
.nav-item .badge {
    top: -5px;
    right: calc(50% - 25px);
    transform: translateX(50%);
    pointer-events: none;
}

/* 弹窗样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

/* 添加上级弹窗需要更高的层级，确保显示在邀请奖励弹窗之上 */
#setSuperiorModal {
    z-index: 2100 !important;
}

/* 登录弹窗：高于用户主页等同级 .modal（#userHomeModal 在 DOM 中靠后会盖住 #loginModal） */
#loginModal {
    z-index: 3500 !important;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-small {
    max-width: 400px;
}

/* 应用内确认弹窗 */
#appConfirmModal {
    z-index: 4000 !important;
}

.modal-confirm {
    max-width: 320px;
    padding: 20px;
}

.app-confirm-msg {
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

.app-confirm-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-confirm-cancel,
.btn-confirm-ok {
    flex: 1;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
}

.btn-confirm-cancel {
    background: #f0f0f0;
    color: #666;
}

.btn-confirm-cancel:active {
    background: #e0e0e0;
}

.btn-confirm-ok {
    background: #6A5ACD;
    color: #fff;
}

.btn-confirm-ok:active {
    background: #5a4abd;
}

/* 首页 / 资料卡通话：视频 / 语音 / 取消（与全局主题 #ff6b9d、资料卡 footer 一致） */
#homeCallTypeModal {
    z-index: 4000 !important;
}

.modal-call-type {
    max-width: 300px;
    padding: 22px 20px 18px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(232, 77, 122, 0.18);
}

.modal-call-type-msg {
    font-size: 15px;
    color: #1a1a2e;
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.55;
}

.modal-call-type-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-call-type-video,
.btn-call-type-voice,
.btn-call-type-cancel {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s, transform 0.1s, background 0.2s;
}

.btn-call-type-video {
    background: linear-gradient(135deg, #ff6b9d 0%, #e84d7a 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4);
}

.btn-call-type-video:active {
    opacity: 0.92;
    transform: scale(0.98);
}

.btn-call-type-voice {
    background: #fff;
    color: #e84d7a;
    border: 1.5px solid #ff6b9d;
}

.btn-call-type-voice:active {
    background: #fff5f8;
}

.btn-call-type-cancel {
    background: #f1f3f5;
    color: #495057;
    font-weight: 500;
}

.btn-call-type-cancel:active {
    background: #e9ecef;
}

/* 应用内提示弹窗（Toast） */
#appToastModal {
    z-index: 4000 !important;
}

.modal-toast {
    max-width: 300px;
    padding: 20px;
}

.app-toast-msg {
    font-size: 15px;
    color: #333;
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.5;
}

.btn-toast-ok {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 15px;
    background: #6A5ACD;
    color: #fff;
    border: none;
    cursor: pointer;
}

.btn-toast-ok:active {
    background: #5a4abd;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: bold;
}

.btn-close,
.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #666;
}

.modal-body {
    padding: 15px;
}

/* 系统设置（头像下拉 · 与 APP 个性设置对应） */
#systemSettingsModal {
    z-index: 3400 !important;
}

.modal-content-system-settings {
    max-width: 420px;
    width: 92%;
    padding: 0;
    overflow: hidden;
}

.modal-content-system-settings .modal-body.system-settings-body {
    padding: 0 0 8px;
}

.system-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
    font-size: 15px;
    color: #333;
}

.system-setting-row:last-child {
    border-bottom: none;
}

.system-setting-row-toggle .system-setting-label {
    flex: 1;
}

.system-setting-row-link {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.system-setting-row-link:active {
    background: #faf8ff;
}

.system-setting-chevron {
    margin-left: 8px;
    color: #c8c8c8;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.system-setting-version,
.system-setting-cache-hint {
    margin-left: 8px;
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    max-width: 42%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-setting-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.system-setting-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.system-setting-switch-track {
    display: block;
    width: 44px;
    height: 26px;
    background: #d0d0d0;
    border-radius: 999px;
    transition: background 0.2s;
    position: relative;
}

.system-setting-switch-track::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.system-setting-switch input:checked + .system-setting-switch-track {
    background: #6A5ACD;
}

.system-setting-switch input:checked + .system-setting-switch-track::after {
    transform: translateX(18px);
}

.system-setting-switch input:focus-visible + .system-setting-switch-track {
    outline: 2px solid rgba(106, 90, 205, 0.45);
    outline-offset: 2px;
}

/* 系统设置 · 协议/关于（iframe 窗口） */
#policyPageModal {
    z-index: 3600 !important;
}

.modal-policy-browser {
    max-width: 480px;
    width: 92%;
    max-height: 75vh;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal-policy-browser .modal-header {
    flex-shrink: 0;
}

.policy-browser-body {
    flex: 0 1 auto;
    max-height: min(58vh, 520px);
    min-height: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

#policyPageIframe {
    width: 100%;
    /* 随弹窗收窄，避免短文也占满一屏；长文在 iframe 内滚动 */
    height: min(48vh, 380px);
    min-height: 180px;
    max-height: min(58vh, 480px);
    border: 0;
    background: #fff;
    flex: none;
}

/* 黑名单 */
#blacklistModal {
    z-index: 3610 !important;
}

.modal-blacklist {
    max-width: 420px;
    width: 92%;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.blacklist-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px !important;
}

.blacklist-list-content {
    min-height: 80px;
}

.blacklist-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.blacklist-row:last-child {
    border-bottom: none;
}

.blacklist-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f5;
}

.blacklist-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-blacklist-remove {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #6A5ACD;
    background: #fff;
    color: #6A5ACD;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-blacklist-remove:active {
    background: #f5f3ff;
}

#blacklistLoadMore {
    margin-top: 12px;
}

/* 注销账号 */
#cancelAccountModal {
    z-index: 3620 !important;
}

.modal-cancel-account {
    max-width: 420px;
    width: 92%;
    max-height: 82vh;
    overflow-y: auto;
    padding: 0;
}

.cancel-account-body {
    padding: 12px 16px 20px !important;
}

.cancel-account-warning {
    font-size: 14px;
    color: #666;
    line-height: 1.55;
    margin: 0 0 14px;
}

.cancel-condition-list {
    margin-bottom: 16px;
}

.cancel-condition-item {
    padding: 12px;
    border-radius: 8px;
    background: #fafafa;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.cancel-condition-item.is-ok {
    border-color: #c8e6c9;
    background: #f1faf1;
}

.cancel-condition-item.is-no {
    border-color: #ffcdd2;
    background: #fff8f8;
}

.cancel-condition-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.cancel-condition-content {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.cancel-condition-status {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
}

.cancel-condition-item.is-ok .cancel-condition-status {
    color: #2e7d32;
}

.cancel-condition-item.is-no .cancel-condition-status {
    color: #c62828;
}

#cancelAccountSubmitBtn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 表单样式 */
.form-group {
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

/* 表单行布局（用于验证码输入框和按钮） */
.form-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    width: 100%;
}

.form-row .form-input-code {
    flex: 1;
    min-width: 0;
    width: auto !important;
}

.form-row .btn-get-code {
    white-space: nowrap;
    padding: 12px 20px;
    flex-shrink: 0;
    width: auto !important;
    min-width: 110px;
    height: auto;
}

.form-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    resize: vertical;
}

.upload-area {
    border: 2px dashed #ddd;
    border-radius: 4px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
    color: #999;
}

.upload-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.upload-preview-item {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.upload-preview-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-preview-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-file {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.remove-file:hover {
    background: rgba(255, 59, 48, 0.9);
    border-color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.5);
}

.remove-file:active {
    transform: scale(0.95);
}

.btn-primary {
    background: #ff6b9d;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
}

.btn-primary:active {
    opacity: 0.8;
}

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

/* 加载更多 */
.load-more {
    text-align: center;
    padding: 20px;
    color: #999;
    cursor: pointer;
}

.load-more.loading {
    color: #ff6b9d;
}

/* 页面头部 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    margin-bottom: 15px;
}

.page-header h2 {
    font-size: 18px;
    font-weight: bold;
}

.btn-publish {
    background: rgba(255, 107, 157, 0.9);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}

/* 消息页一键已读按钮 */
.btn-read-all {
    background: rgba(255, 107, 157, 0.9);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}
.btn-read-all:active {
    opacity: 0.9;
}

/* 搜索弹窗样式优化 */
.modal-search {
    max-width: 600px;
    width: 90%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 24px;
    padding: 0 16px;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.search-input-wrapper:focus-within {
    background: #fff;
    border-color: #ff6b9d;
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

/* 与顶部搜索图标一致：同一套 SVG */
.search-icon {
    margin-right: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-icon::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    font-size: 0;
}

.search-input {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #333;
    outline: none;
}

.search-input::placeholder {
    color: #999;
}

.search-clear-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #ddd;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    flex-shrink: 0;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.search-clear-btn:hover {
    background: #ff6b9d;
    transform: scale(1.1);
}

.btn-search-cancel {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
}

.btn-search-cancel:hover {
    background: #f5f5f5;
    color: #333;
}

.btn-search-cancel:active {
    background: #e8e8e8;
}

.search-results {
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.search-results::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s;
    gap: 14px;
    background: #fff;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f8f9fa;
    padding-left: 24px;
}

.search-result-item:active {
    background: #f0f0f0;
}

.search-result-item .message-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #f0f0f0;
    transition: border-color 0.2s;
}

.search-result-item:hover .message-avatar {
    border-color: #ff6b9d;
}

.search-result-item .message-content {
    flex: 1;
    min-width: 0;
}

.search-result-item .message-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-item .message-text {
    font-size: 13px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

/* 搜索加载状态 */
.search-loading {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

.search-loading::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #ff6b9d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 搜索空状态样式 */
.search-results .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 14px;
    background: #fff;
}

.search-results .empty-state::before {
    content: "🔍";
    display: block;
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.search-results .empty-state small {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #ccc;
}

/* PC端搜索弹窗优化 */
@media (min-width: 768px) {
    .modal-search {
        max-width: 700px;
    }
    
    .search-header {
        padding: 24px;
    }
    
    .search-input {
        font-size: 16px;
    }
    
    .search-result-item {
        padding: 18px 24px;
    }
    
    .search-result-item:hover {
        padding-left: 28px;
    }
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

/* PC端适配 - 优化性能，简化设计 */
@media (min-width: 768px) {
    /* 与 H5 共用变量，避免 PC 单独深紫底与主内容脱节 */
    body {
        background: var(--app-page-bg);
        min-height: 100vh;
        position: relative;
    }

    /* 顶部导航栏：毛玻璃与 body 渐变统一 */
    .top-header {
        height: 54px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(18px) saturate(1.35);
        -webkit-backdrop-filter: blur(18px) saturate(1.35);
        box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }

    .header-content {
        padding: 0 40px;
        max-width: 1400px;
        height: 100%;
    }

    .logo {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }

    .search-box {
        height: 38px;
        padding: 0 16px 0 14px;
        min-width: 110px;
        max-width: 180px;
        border-radius: 19px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .search-box:hover {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .search-box .icon-search::before {
        width: 17px;
        height: 17px;
        filter: none;
    }

    .user-avatar {
        width: 42px;
        height: 42px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        transition: transform 0.2s;
    }

    .user-avatar:hover {
        transform: scale(1.05);
    }

    .header-login-btn {
        color: #fff;
        background: rgba(255, 107, 157, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.45);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    .header-login-btn:hover {
        background: rgba(255, 107, 157, 0.65);
        border-color: rgba(255, 255, 255, 0.65);
    }

    .header-avatar-menu {
        min-width: 160px;
    }

    .header-avatar-menu-item:hover {
        background: #f5f5f5;
    }

    /* 主内容区域（顶栏 54px + 与内容间距） */
    .main-content {
        max-width: 1400px;
        margin: 54px auto 0;
        padding: 12px 40px 80px;
        position: relative;
        z-index: 1;
    }

    /* 消息区：底栏 PC 为 bottom:20px 悬浮，需预留 20+60(nav)+ 与内容间距 */
    .main-content:has(#messagePage.active) {
        height: calc(100vh - 54px - 12px - 20px - 60px - 20px);
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }

    .page-section {
        padding: 0;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 轮播图 - 简化设计 */
    .banner-slider {
        margin: 0 0 8px !important;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
        max-width: 100%;
    }

    .slider-wrapper {
        height: clamp(190px, 22vw, 280px);
    }

    /* 分类标签 - 现代化设计 */
    .category-tabs {
        justify-content: flex-start;
        gap: 10px;
        margin: 6px 0 8px;
        padding: 0;
        flex-wrap: wrap;
    }

    .category-tabs .tab-item {
        padding: 10px 24px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #333;
        transition: background 0.2s;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .category-tabs .tab-item:hover {
        background: rgba(255, 255, 255, 1);
    }

    .category-tabs .tab-item.active {
        background: #ff6b9d;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        font-weight: 700;
    }

    /* 筛选按钮 PC 端 */
    .filter-icon-btn {
        padding: 10px 18px;
        font-size: 14px;
    }

    .filter-icon-btn:hover {
        background: #fff;
    }

    /* 用户列表 - 现代化卡片网格 */
    .user-list {
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
        margin-bottom: 15px;
    }

    .user-card {
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
    }

    .user-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .user-card:active {
        transform: translateY(0);
    }

    .user-card-cover {
        position: relative;
        overflow: hidden;
        padding-top: 116%;
    }

    .user-card-info {
        padding: 10px 12px;
        background: #fff;
    }

    .user-card-name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }

    .user-card-desc {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
    }

    .user-card-status {
        font-weight: 600;
    }
    .user-card-status.online {
        background: #52c41a !important;
        box-shadow: 0 1px 4px rgba(82, 196, 26, 0.4);
    }
    .user-card-status.offline {
        background: #8c8c8c !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }
    .user-card-status.busy {
        background: #faad14 !important;
        box-shadow: 0 1px 4px rgba(250, 173, 20, 0.3);
    }

    /* 动态列表PC端优化 */
    .dynamic-images {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .dynamic-item {
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        transition: all 0.3s;
    }

    .dynamic-item:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

    /* 底部导航栏PC端优化 - 简化设计 */
    .bottom-nav {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        height: 60px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        border-radius: 50px;
        padding: 0 15px;
        max-width: 550px;
        width: auto;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 8px;
    }

    .nav-item {
        padding: 10px 20px;
        flex-direction: row;
        gap: 8px;
        height: auto;
        border-radius: 50px;
        transition: background 0.2s, color 0.2s;
        color: #969696;
    }

    .nav-item:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    .nav-item:not(.active):hover {
        color: #333;
    }

    /* PC：选中项不要紫底胶囊，仅字色与 H5/APP 一致 */
    .nav-item.active {
        background: transparent;
        color: #7014e2;
        box-shadow: none;
    }

    .nav-item.active:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #7014e2;
    }

    .nav-item i {
        font-size: 20px;
        margin-bottom: 0;
        position: relative;
        z-index: 1;
    }

    .nav-icon-slot {
        width: 28px;
        height: 28px;
        margin-bottom: 0;
    }
    .nav-tab-img {
        width: 28px;
        height: 28px;
    }

    .nav-item span {
        font-size: 14px;
        font-weight: 600;
        position: relative;
        z-index: 1;
    }

    /* 加载更多 - 简化按钮 */
    .load-more {
        padding: 14px 28px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
        border-radius: 50px;
        margin: 15px auto;
        max-width: 260px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #333;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        display: block;
    }

    .load-more:hover {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .load-more.loading {
        background: rgba(255, 255, 255, 0.2);
        cursor: not-allowed;
    }
}

/* PC端消息双栏布局 */
@media (min-width: 768px) {
    #messagePage {
        padding: 0;
        max-width: none;
        margin: 0;
    }

    .message-sidebar {
        width: 360px;
    }

    .message-list {
        max-width: 100%;
        gap: 8px;
    }

    .message-item {
        border-radius: 16px;
        padding: 18px 20px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.2s;
    }

    .message-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .message-avatar {
        width: 56px;
        height: 56px;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-right: 10px;
    }

    .message-name {
        font-size: 17px;
    }

    .message-text {
        font-size: 14px;
    }

    /* 消息空状态 - PC端 */
    #messageList .empty-state {
        padding: 64px 40px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* PC端我的页面优化 */
    .mine-profile-card {
        border-radius: 20px;
        margin-bottom: 24px;
        padding: 22px 22px 20px;
        box-shadow: 0 8px 32px rgba(17, 24, 39, 0.1);
        overflow: visible;
    }

    .mine-value-added-block {
        margin-top: 16px;
        padding: 16px 14px 16px;
        border-radius: 14px;
    }

    .mine-value-added-grid {
        gap: 12px;
        padding-top: 14px;
    }

    .mine-value-added-icon {
        top: -20px;
    }

    .feature-cards-section {
        padding: 15px 20px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .feature-card {
        padding: 12px 14px;
    }

    .feature-card-icon-wrap,
    .feature-card-icon-img,
    .feature-card-icon-fallback {
        width: 36px;
        height: 36px;
    }

    .feature-card-label {
        font-size: 13px;
    }

    .disturb-switch-track {
        width: 44px;
        height: 24px;
        border-radius: 12px;
    }

    .disturb-switch-thumb {
        width: 20px;
        height: 20px;
    }

    .disturb-switch input:checked + .disturb-switch-track .disturb-switch-thumb {
        transform: translateX(20px) !important;
    }

    .basic-functions-title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .basic-functions-section {
        border-radius: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .basic-functions-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }

    .basic-function-item {
        padding: 16px 12px;
    }

    .basic-function-icon-wrapper {
        width: 56px;
        height: 56px;
        margin-bottom: 10px;
    }

    .basic-function-icon {
        width: 56px;
        height: 56px;
    }

    .basic-function-icon-emoji {
        width: 56px;
        height: 56px;
        font-size: 36px;
    }

    .basic-function-text {
        font-size: 14px;
    }

    .mine-menu-other {
        border-radius: 20px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 20px;
    }

    .mine-menu {
        background: transparent;
        border-radius: 0;
        overflow: visible;
        margin-bottom: 0;
    }

    .menu-item {
        padding: 20px 25px;
        transition: background 0.2s;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: #fff;
    }

    .menu-item:hover {
        background: rgba(0, 0, 0, 0.03);
    }

    .menu-item:last-child {
        border-bottom: none;
    }

    /* PC端动态：顶栏、分段条与列表同宽居中；恢复圆角灰底分段器（勿套用消息侧栏 H5 的直角轨道） */
    #dynamicPage .page-header {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
        border-radius: 20px;
        padding: 25px 30px;
        margin-bottom: 16px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    #dynamicPage .page-header h2 {
        font-size: 24px;
        font-weight: 700;
        color: #1a1a2e;
    }

    #dynamicPage .dynamic-tabs,
    .dynamic-list {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    #dynamicPage .dynamic-tabs {
        border-radius: 12px;
        padding: 4px;
        margin-bottom: 16px;
    }

    .dynamic-item {
        padding: 25px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.2s;
    }

    .dynamic-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .dynamic-header {
        margin-bottom: 18px;
    }

    .dynamic-avatar {
        width: 55px;
        height: 55px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .dynamic-username {
        font-size: 17px;
        font-weight: 600;
        color: #1a1a2e;
    }

    .dynamic-content {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 18px;
        color: #374151;
    }

    /* PC端页面头部优化 */
    .page-header {
        border-radius: 20px;
        margin-bottom: 30px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 25px 30px;
    }

    .page-header h2 {
        font-size: 24px;
        font-weight: 700;
        color: #1a1a2e;
    }

    .btn-publish {
        padding: 12px 30px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 50px;
        background: #ff6b9d;
        border: none;
        color: #fff;
        transition: background 0.2s;
        box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
    }

    .btn-publish:hover {
        background: #ff5a8a;
        box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
    }

    .btn-read-all {
        padding: 10px 22px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 50px;
        background: rgba(255, 107, 157, 0.9);
        border: none;
        color: #fff;
    }
    .btn-read-all:hover {
        background: rgba(255, 107, 157, 1);
    }

    /* PC端弹窗优化 - 简化设计 */
    .modal {
        background: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
        border-radius: 24px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        animation: modalSlideIn 0.3s ease-out;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .modal-header {
        padding: 30px 35px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        background: #fff;
    }

    .modal-header h3 {
        font-size: 24px;
        font-weight: 700;
        color: #333;
    }

    .btn-close {
        color: #999;
        transition: color 0.2s;
    }

    .btn-close:hover {
        color: #333;
    }

    .modal-body {
        padding: 35px;
        background: #fff;
    }

    /* PC端用户卡片弹窗优化 */
    .modal-large {
        max-width: 550px;
        max-height: 80vh;
        width: 85%;
    }

    .user-home-header {
        min-height: 320px;
    }

    .user-home-cover {
        min-height: 320px;
    }

    .user-home-info {
        margin-top: 140px;
        padding: 12px 10px 10px;
        min-height: 130px;
    }

    .user-home-info--app {
        margin-top: 188px;
        padding: 12px 14px 12px;
    }

    .user-home-info--app .user-home-avatar-wrapper {
        width: 70px;
        height: 70px;
        margin: -46px 0 8px;
    }

    .user-home-avatar-wrapper {
        width: 65px;
        height: 65px;
        margin: -45px auto 6px;
    }

    .user-home-info--app .user-home-name {
        font-size: 18px;
    }

    .user-home-name {
        font-size: 17px;
    }

    .user-home-body {
        flex: 1 1 0%;
        min-height: 0;
        max-height: 280px;
        overflow-y: auto;
    }

    .user-home-tabs .tab-item {
        padding: 10px;
        font-size: 13px;
    }

    .user-home-content {
        padding: 10px;
    }

    .user-home-footer {
        padding: 12px 14px 18px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
    }

    /* PC端表单优化 */
    .form-input {
        padding: 16px 20px;
        font-size: 15px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: #333;
        transition: border-color 0.2s;
    }

    .form-input::placeholder {
        color: #999;
    }

    .form-input:focus {
        border-color: #ff6b9d;
        outline: none;
    }

    .form-textarea {
        padding: 16px 20px;
        font-size: 15px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: #333;
        transition: border-color 0.2s;
    }

    .form-textarea::placeholder {
        color: #999;
    }

    .form-textarea:focus {
        border-color: #ff6b9d;
        outline: none;
    }

    .btn-primary {
        padding: 16px 32px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 50px;
        background: #ff6b9d;
        border: none;
        color: #fff;
        transition: background 0.2s;
        box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
    }

    .btn-primary:hover {
        background: #ff5a8a;
        box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
    }

    /* PC端聊天窗口优化 */
    .modal-chat {
        max-width: 800px;
        width: 90%;
        height: 85vh;
        max-height: 800px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }

    .chat-header {
        padding: 20px 25px;
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .chat-user-info img {
        width: 45px;
        height: 45px;
    }

    .chat-user-name {
        font-size: 18px;
    }

    .chat-header .btn-close {
        width: 36px;
        height: 36px;
        font-size: 26px;
        color: #666;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .chat-header .btn-close:hover {
        color: #ff6b9d;
        background: rgba(255, 107, 157, 0.15);
        transform: rotate(90deg) scale(1.1);
    }

    .chat-messages {
        padding: 20px;
        background: #f5f5f5;
    }

    .chat-input-area {
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .chat-input-toolbar {
        padding: 12px 20px;
        gap: 14px;
    }

    .chat-tool-btn {
        min-width: 56px;
        padding: 8px 10px;
        gap: 5px;
        border-radius: 10px;
    }

    .chat-tool-icon {
        width: 32px;
        height: 32px;
    }

    .chat-tool-icon svg {
        width: 24px;
        height: 24px;
    }

    .chat-tool-label {
        font-size: 12px;
    }

    .chat-tool-btn:hover {
        background: rgba(255, 107, 157, 0.1);
        transform: scale(1.05);
    }

    .chat-input-wrapper {
        padding: 12px 20px;
    }

    .chat-input {
        padding: 12px 18px;
        font-size: 15px;
        border-radius: 24px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .chat-input:focus {
        border-color: #ff6b9d;
        box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.1);
        outline: none;
    }

    .chat-send-btn {
        padding: 12px 28px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 24px;
        background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
        transition: all 0.3s;
    }

    .chat-send-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
    }

    .chat-send-btn:active {
        transform: translateY(0);
    }
}

/* 大屏幕PC端优化 */
@media (min-width: 1200px) {
    .main-content {
        max-width: 1400px;
        padding: 12px 50px 80px;
    }

    .user-list {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }

    .slider-wrapper {
        height: clamp(210px, 18vw, 320px);
    }

    .header-content {
        max-width: 1400px;
        padding: 0 50px;
    }

    .bottom-nav {
        max-width: 600px;
        padding: 0 20px;
    }

    .message-list,
    .dynamic-list {
        max-width: 1000px;
    }

    #dynamicPage .page-header,
    #dynamicPage .dynamic-tabs {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .category-tabs .tab-item {
        padding: 10px 24px;
        font-size: 15px;
    }
}

/* 超大屏幕优化 */
@media (min-width: 1600px) {
    .main-content {
        max-width: 1600px;
        padding: 12px 60px 90px;
    }

    .user-list {
        grid-template-columns: repeat(7, 1fr);
        gap: 22px;
    }

    .slider-wrapper {
        height: clamp(240px, 16vw, 360px);
    }

    .header-content {
        max-width: 1600px;
        padding: 0 60px;
    }

    .bottom-nav {
        max-width: 650px;
        padding: 0 25px;
        height: 60px;
    }

    .nav-item {
        padding: 10px 20px;
    }

    .nav-item i {
        font-size: 20px;
    }

    .nav-icon-slot {
        width: 28px;
        height: 28px;
    }
    .nav-tab-img {
        width: 28px;
        height: 28px;
    }

    .nav-item span {
        font-size: 14px;
    }

    .message-list,
    .dynamic-list {
        max-width: 1200px;
    }

    #dynamicPage .page-header,
    #dynamicPage .dynamic-tabs {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .category-tabs .tab-item {
        padding: 11px 26px;
        font-size: 15px;
    }
}

/* PC端滚动条和细节优化 */
@media (min-width: 768px) {
    /* 隐藏滚动条（仍可鼠标滚轮 / 触控滑动），避免彩色条占视觉 */
    * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    *::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    /* PC端空状态优化 */
    .empty-state {
        padding: 80px 40px;
        font-size: 16px;
        color: #999;
    }

    .empty-state::before {
        content: "📭";
        display: block;
        font-size: 64px;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    /* PC端用户卡片状态标签优化 */
    .user-card-status {
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 500;
    }

    /* PC端轮播图指示器优化 */
    .slider-dots {
        bottom: 12px;
        gap: 10px;
        padding: 0;
    }

    .slider-dot {
        width: 6px;
        height: 6px;
    }

    .slider-dot:hover {
        transform: scale(1.25);
    }

    .slider-dot.active {
        width: 28px;
        height: 8px;
        border-radius: 999px;
    }
}

/* PC端视频通话界面优化 */
@media (max-width: 480px) {
    .video-call-duration-wrap {
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (min-width: 1024px) {
    /* PC端本地视频窗口更大 */
    .video-local {
        width: 200px;
        height: 266px;
        top: 30px;
        right: 30px;
        left: auto;
        border-radius: 12px;
        border: 3px solid rgba(255, 255, 255, 0.4);
        cursor: pointer;
    }
    
    /* 确保默认状态下的本地视频不会变大 */
    .video-local:not(.fullscreen):not(.small-window) {
        width: 200px !important;
        height: 266px !important;
    }

    .video-local:hover {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    /* PC端控制按钮 */
    .video-call-controls {
        bottom: 48px;
        gap: 14px;
        padding: 14px 24px;
    }

    .video-control-btn {
        width: 56px;
        height: 56px;
    }

    .video-control-icon {
        width: 24px;
        height: 24px;
    }

    .video-control-label {
        font-size: 11px;
    }

    .video-control-hangup {
        width: 60px;
        height: 60px;
    }

    /* PC端：右侧为本地预览留空；卡片略大于移动端但仍偏轻量，少挡画面 */
    .video-call-container > .video-call-peer-overlay {
        padding-right: max(24px, calc(env(safe-area-inset-right, 0px) + 228px));
    }
    .video-call-peer-card {
        max-width: min(340px, calc(100vw - 260px));
        padding: 9px 14px 9px 9px;
        gap: 11px;
    }
    .video-avatar {
        width: 48px;
        height: 48px;
    }
    .video-user-name {
        font-size: 16px;
    }
    .video-status {
        font-size: 12px;
    }

    /* PC端全屏切换时的样式 */
    /* 本地视频全屏时 */
    .video-local.fullscreen {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 1 !important;
    }
    
    .video-local.fullscreen video {
        object-fit: contain !important;
    }
    
    /* 远程视频全屏时 */
    .video-remote.fullscreen {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 1 !important;
    }
    
    .video-remote.fullscreen video {
        border-radius: 0 !important;
        object-fit: contain !important;
    }
    
    /* 小窗口样式（当对方全屏时） */
    .video-local.small-window {
        width: 200px !important;
        height: 266px !important;
        max-width: 200px !important;
        max-height: 266px !important;
        min-width: 200px !important;
        min-height: 266px !important;
        top: 30px !important;
        right: 30px !important;
        left: auto !important;
        bottom: auto !important;
        border-radius: 12px !important;
        border: 3px solid rgba(255, 255, 255, 0.4) !important;
        z-index: 2 !important;
        cursor: pointer;
    }
    
    .video-local.small-window:hover {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .video-remote.small-window {
        width: 200px !important;
        height: 266px !important;
        max-width: 200px !important;
        max-height: 266px !important;
        min-width: 200px !important;
        min-height: 266px !important;
        top: 30px !important;
        right: 30px !important;
        left: auto !important;
        bottom: auto !important;
        border-radius: 12px !important;
        border: 3px solid rgba(255, 255, 255, 0.4) !important;
        z-index: 2 !important;
        cursor: pointer;
    }
    
    .video-remote.small-window:hover {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    /* PC端视频切换提示 */
    .video-local::after,
    .video-remote::after {
        content: '点击切换全屏';
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        white-space: nowrap;
    }

    .video-local:hover::after,
    .video-remote:hover::after {
        opacity: 1;
    }

    .video-local.fullscreen::after,
    .video-remote.fullscreen::after {
        content: '点击切换回小窗口';
    }

    /* PC端键盘快捷键提示 */
    .video-call-shortcuts {
        display: flex;
        position: absolute;
        top: 24px;
        left: 24px;
        flex-wrap: wrap;
        gap: 8px 16px;
        background: rgba(15, 15, 20, 0.6);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        color: rgba(255, 255, 255, 0.85);
        padding: 10px 16px;
        border-radius: 12px;
        font-size: 12px;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .video-call-container:hover .video-call-shortcuts {
        opacity: 1;
    }

    .video-call-shortcuts-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        line-height: 1.4;
    }

    .video-call-shortcuts kbd {
        display: inline-block;
        padding: 3px 8px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
        font-size: 11px;
        font-weight: 500;
    }
}

/* 平板端优化 */
@media (min-width: 768px) and (max-width: 1023px) {
    .video-local {
        width: 160px;
        height: 213px;
    }
    
    /* 确保小窗口位置和大小正确 */
    .video-local.small-window,
    .video-remote.small-window {
        width: 160px !important;
        height: 213px !important;
        max-width: 160px !important;
        max-height: 213px !important;
        min-width: 160px !important;
        min-height: 213px !important;
        top: 30px !important;
        right: 30px !important;
        left: auto !important;
        bottom: auto !important;
    }

    .video-call-controls {
        bottom: 40px;
        gap: 12px;
    }

    .video-control-btn {
        width: 54px;
        height: 54px;
    }

    .video-control-icon {
        width: 22px;
        height: 22px;
    }

    .video-control-label {
        font-size: 10px;
    }
}

/* 超大屏幕优化 */
@media (min-width: 1920px) {
    .video-local {
        width: 240px;
        height: 320px;
    }
    
    /* 确保小窗口位置和大小正确 */
    .video-local.small-window,
    .video-remote.small-window {
        width: 240px !important;
        height: 320px !important;
        max-width: 240px !important;
        max-height: 320px !important;
        min-width: 240px !important;
        min-height: 320px !important;
        top: 30px !important;
        right: 30px !important;
        left: auto !important;
        bottom: auto !important;
    }

    .video-remote.fullscreen {
        width: 240px;
        height: 320px;
    }

    .video-call-controls {
        bottom: 56px;
        gap: 16px;
        padding: 16px 28px;
    }

    .video-control-btn {
        width: 60px;
        height: 60px;
    }

    .video-control-icon {
        width: 26px;
        height: 26px;
    }

    .video-control-label {
        font-size: 12px;
    }

    .video-control-hangup {
        width: 64px;
        height: 64px;
    }
}

/* 图标字体 */
@font-face {
    font-family: 'iconfont';
    src: url('data:application/x-font-woff2;charset=utf-8;base64,') format('woff2');
}

.icon-home::before { content: "🏠"; }
.icon-dynamic::before { content: "📝"; }
.icon-message::before { content: "💬"; }
.icon-mine::before { content: "👤"; }
.icon-search::before { content: "🔍"; }
.icon-camera::before { content: "📷"; }
.icon-arrow-down::before { content: "▼"; }

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-card,
.dynamic-item,
.message-item {
    animation: fadeIn 0.3s ease-out;
}

/* 用户主页弹窗 */
.modal-large {
    max-width: 600px;
    max-height: 85vh;
    width: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#userHomeModal .modal-large {
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.12);
}

/* H5：弹窗限制在动态视口 + 安全区内；头部压缩；Tab 区 flex 占满剩余高度并滚动，避免底部通话/关注被裁切 */
@media (max-width: 767px) {
    #userHomeModal.modal.active {
        align-items: center;
        justify-content: center;
        padding: max(6px, env(safe-area-inset-top, 0px)) 10px max(6px, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    #userHomeModal .modal-large {
        width: 92%;
        max-width: none;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
        margin: 0 auto;
        border-radius: 18px;
    }

    /* H5：保证头图区高度，白卡下移多露背景墙 */
    #userHomeModal .user-home-header {
        min-height: clamp(240px, 42vw, 300px);
    }

    #userHomeModal .user-home-cover {
        min-height: clamp(240px, 42vw, 300px);
    }

    #userHomeModal .user-home-info--app {
        margin-top: clamp(120px, 36vw, 168px);
        padding: 6px 10px 8px;
        min-height: 0;
    }

    #userHomeModal .user-home-info--app .user-home-avatar-wrapper {
        width: 58px;
        height: 58px;
        margin: -40px 0 4px;
    }

    #userHomeModal .user-home-app-left {
        width: 62px;
    }

    #userHomeModal .user-home-avatar-wrapper img {
        border-width: 3px;
    }

    #userHomeModal .user-home-info--app .user-home-name {
        font-size: 16px;
    }

    #userHomeModal .user-home-fans-val {
        font-size: 15px;
    }

    #userHomeModal .user-home-line-geo {
        font-size: 12px;
        margin-top: 6px;
    }

    #userHomeModal .user-home-line-rates {
        font-size: 11px;
        margin-top: 6px;
    }

    #userHomeModal .user-home-info--app .user-home-voice-chip {
        padding: 1px 6px 1px 4px;
        font-size: 9px;
        transform: translate(-50%, 44%);
    }

    #userHomeModal .user-home-tabs .tab-item {
        padding: 8px 4px;
        font-size: 12px;
    }

    #userHomeModal .user-home-content {
        padding: 8px;
    }

    #userHomeModal .user-home-detail--tab {
        padding-top: 4px;
    }

    #userHomeModal .user-home-footer {
        padding: 8px 12px 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }

    #userHomeModal .btn-user-home-video-call,
    #userHomeModal .btn-user-home-voice-call {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 13px;
    }

    #userHomeModal .btn-user-home-action {
        min-height: 48px;
        padding: 6px 4px;
    }

    #userHomeModal .user-home-dynamic-grid .dynamic-video img {
        max-height: 88px !important;
    }
}

.user-home-header {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    flex-shrink: 0;
}

.user-home-header .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s, box-shadow 0.2s;
}

.user-home-header .btn-close:active {
    transform: scale(0.95);
}

.user-home-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
    background: linear-gradient(160deg, #ff8fab 0%, #ff6b9d 50%, #e84d7a 100%);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
}

.user-home-info {
    position: relative;
    padding: 20px 16px 16px;
    background: #fff;
    margin-top: 140px;
    border-radius: 24px 24px 0 0;
    z-index: 10;
    min-height: 140px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
}

/* 资料卡 · 对齐 APP：左侧头像叠在封面下沿 + 语音胶囊；右侧昵称/VIP/在线/Lv；右上粉丝；性别+城市|ID；价格行；关注·接听率 */
.user-home-info--app {
    padding: 12px 14px 14px;
    /* margin-top 越大，背景墙露出越多 */
    margin-top: 188px;
    min-height: 0;
}

.user-home-app-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.user-home-app-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 76px;
}

.user-home-info--app .user-home-avatar-wrapper {
    margin: -52px 0 4px;
    width: 76px;
    height: 76px;
}

/* 语音介绍：叠在头像底部居中（与 APP 一致），认证角标仍在右下 */
.user-home-info--app .user-home-voice-chip {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 42%);
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 7px 2px 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #b197fc 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    -webkit-tap-highlight-color: transparent;
    z-index: 12;
    max-width: calc(100% + 8px);
    white-space: nowrap;
}

.user-home-info--app .user-home-voice-chip .user-home-voice-play-ic {
    font-size: 9px;
    line-height: 1;
    opacity: 0.95;
    flex-shrink: 0;
}

.user-home-app-main {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.user-home-app-title-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.user-home-name-row--app {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.user-home-info--app .user-home-name {
    font-size: 19px;
    font-weight: 700;
}

.user-home-online-pill {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(81, 207, 102, 0.16);
    color: #2f9e44;
    font-size: 11px;
    font-weight: 600;
}

.user-home-online-pill.is-visible {
    display: inline-flex;
}

.user-home-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #51cf66;
    flex-shrink: 0;
}

.user-home-level--app {
    font-size: 11px;
    padding: 2px 7px;
}

.user-home-app-fans {
    text-align: right;
    flex-shrink: 0;
    min-width: 44px;
}

.user-home-fans-val {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.15;
}

.user-home-fans-lbl {
    font-size: 11px;
    color: #868e96;
    margin-top: 2px;
}

.user-home-line-geo {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: #343a40;
    line-height: 1.4;
}

.user-home-line-geo.is-visible {
    display: flex;
}

.user-home-sex-ic {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.user-home-sex--f {
    background: linear-gradient(135deg, #ff8fab, #ff6b9d);
    color: #fff;
}

.user-home-sex--m {
    background: linear-gradient(135deg, #74c0fc, #4dabf7);
    color: #fff;
}

.user-home-geo-pipe {
    color: #ced4da;
    flex-shrink: 0;
    user-select: none;
}

.user-home-line-rates {
    margin-top: 8px;
    font-size: 12px;
    color: #868e96;
    line-height: 1.55;
}

.user-home-rate-gap {
    display: inline-block;
    width: 14px;
}

.user-home-line-sub {
    margin-top: 6px;
    font-size: 11px;
    color: #adb5bd;
}

.user-home-sub-dot {
    padding: 0 6px;
    color: #dee2e6;
}

.user-home-avatar-wrapper {
    position: relative;
    width: 76px;
    height: 76px;
    margin: -52px auto 10px;
    z-index: 11;
}

.user-home-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.user-home-auth {
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 13;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #ff6b9d, #e84d7a);
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.user-home-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.user-home-name {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.3px;
}

.user-home-vip {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #8b6914;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.35);
}

.user-home-level {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.user-home-status {
    text-align: center;
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 14px;
}

.user-home-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #adb5bd;
    margin-right: 6px;
    vertical-align: middle;
}

.user-home-status.online::before {
    background: #51cf66;
}

.user-home-stats {
    display: flex;
    justify-content: space-around;
    padding: 14px 8px;
    background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
    border-radius: 12px;
    margin: 0 4px;
}

.user-home-stat-item {
    text-align: center;
}

.user-home-stat-item .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.user-home-stat-item .stat-label {
    font-size: 12px;
    color: #868e96;
}

/* 个人资料详情：位置、介绍、签名、主播形象、评价 */
.user-home-detail {
    padding: 12px 4px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.user-home-detail-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 13px;
}

.user-home-detail-row:last-child {
    margin-bottom: 0;
}

.user-home-detail-label {
    flex-shrink: 0;
    width: 72px;
    color: #868e96;
}

.user-home-detail-value {
    flex: 1;
    min-width: 0;
    color: #333;
    line-height: 1.5;
}

.user-home-labels,
.user-home-evaluates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.user-home-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
}

.user-home-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #f0f2f5;
}

/* 与 APP 一致：资料 | 视频 | 相册 | 动态，下划线激活态 */
.user-home-tabs {
    display: flex;
    background: #fff;
    padding: 0 4px;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid #e9ecef;
}

.user-home-tabs .tab-item {
    flex: 1;
    min-width: 0;
    padding: 12px 6px;
    text-align: center;
    color: #868e96;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: color 0.2s, border-color 0.2s;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.user-home-tabs .tab-item:hover:not(.active) {
    color: #495057;
}

.user-home-tabs .tab-item.active {
    color: #ff6b9d;
    font-weight: 700;
    border-bottom-color: #ff6b9d;
    background: transparent;
    box-shadow: none;
}

/* 地区 | ID 与 通话价格 同一行（窄屏自动换行） */
.user-home-meta-row {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin: 0 10px 10px;
    padding: 8px 12px;
    line-height: 1.45;
    font-size: 12px;
    text-align: center;
    color: #868e96;
    background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
    border-radius: 10px;
}

.user-home-meta-row.is-visible {
    display: flex;
}

.user-home-meta-id {
    color: #868e96;
}

.user-home-meta-between {
    color: #ced4da;
    flex-shrink: 0;
    user-select: none;
}

.user-home-meta-rates {
    color: #666;
}

.user-home-rate-sep {
    color: #ced4da;
    padding: 0 4px;
}

.user-home-detail--tab {
    padding: 4px 0 8px;
}

.user-home-content {
    padding: 12px;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.user-home-content .tab-content {
    display: none;
}

.user-home-content .tab-content.active {
    display: block;
}

/* 个人资料弹窗内动态列表：强制深色文字，避免与白底冲突 */
.user-home-content .dynamic-item,
#userHomeModal .dynamic-item {
    background: #fff;
}

.user-home-content .dynamic-username,
#userHomeModal .dynamic-username {
    color: #1a1a2e !important;
}

.user-home-content .dynamic-time,
#userHomeModal .dynamic-time {
    color: #6b7280 !important;
}

.user-home-content .dynamic-content,
#userHomeModal .dynamic-content {
    color: #374151 !important;
}

.user-home-content .dynamic-actions .action-btn,
#userHomeModal .dynamic-actions .action-btn {
    color: #6b7280 !important;
}

.user-home-content .dynamic-actions .action-btn.active,
#userHomeModal .dynamic-actions .action-btn.active {
    color: #ff6b9d !important;
}

/* 资料卡弹窗 · 动态 Tab：多列网格，卡片紧凑（与全站动态页单列大卡区分） */
.user-home-dynamic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    /* stretch：同一行卡片等高，配合 .dynamic-item 内 flex + .dynamic-actions margin-top:auto 底对齐 */
    align-items: stretch;
}

.user-home-dynamic-grid > .dynamic-item {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.user-home-dynamic-grid .dynamic-actions {
    margin-top: auto;
}

/* 资料卡动态：固定一排两个（不再随屏宽变三列） */
#userHomeModal .user-home-dynamic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#userHomeModal .user-home-dynamic-grid .dynamic-item {
    padding: 8px;
    border-radius: 10px;
}

#userHomeModal .user-home-dynamic-grid .dynamic-header {
    margin-bottom: 4px;
    gap: 6px;
}

#userHomeModal .user-home-dynamic-grid .dynamic-avatar {
    width: 28px;
    height: 28px;
    border-width: 1px;
}

#userHomeModal .user-home-dynamic-grid .dynamic-username {
    font-size: 12px;
}

/* 资料卡动态 · 元信息：默认一行（宽屏）；H5 见下方 media 两行 */
#userHomeModal .user-home-dynamic-grid .dynamic-meta-row,
#userHomeModal .user-home-dynamic-grid .dynamic-user-info > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

#userHomeModal .user-home-dynamic-grid .dynamic-location {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
}

#userHomeModal .user-home-dynamic-grid .dynamic-location svg {
    flex-shrink: 0;
}

#userHomeModal .user-home-dynamic-grid .dynamic-location span {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#userHomeModal .user-home-dynamic-grid .dynamic-user-info span[style*='width: 1px'] {
    flex-shrink: 0;
}

#userHomeModal .user-home-dynamic-grid .dynamic-time {
    font-size: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    color: #9ca3af;
}

/* H5：位置独占第一行（最多两行），日期第二行，避免窄卡挤没地区文案 */
@media (max-width: 767px) {
    #userHomeModal .user-home-dynamic-grid .dynamic-meta-row,
    #userHomeModal .user-home-dynamic-grid .dynamic-user-info > div:nth-child(2) {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
    }

    #userHomeModal .user-home-dynamic-grid .dynamic-location {
        flex: none;
        width: 100%;
        align-items: flex-start;
        overflow: visible;
        font-size: 10px !important;
        line-height: 1.35;
    }

    #userHomeModal .user-home-dynamic-grid .dynamic-location span {
        flex: none;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-overflow: unset;
        width: 100%;
    }

    #userHomeModal .user-home-dynamic-grid .dynamic-user-info span[style*='width: 1px'] {
        display: none;
    }

    #userHomeModal .user-home-dynamic-grid .dynamic-time {
        width: 100%;
    }
}

#userHomeModal .user-home-dynamic-grid .dynamic-content {
    font-size: 12px;
    margin-bottom: 4px;
    -webkit-line-clamp: 2;
}

#userHomeModal .user-home-dynamic-grid .dynamic-video {
    margin-top: 4px !important;
}

#userHomeModal .user-home-dynamic-grid .dynamic-video img {
    max-height: 110px !important;
    border-radius: 6px;
}

#userHomeModal .user-home-dynamic-grid .dynamic-video > div:nth-child(2) {
    width: 40px !important;
    height: 40px !important;
}

#userHomeModal .user-home-dynamic-grid .dynamic-video > div:nth-child(2) span {
    font-size: 18px !important;
    margin-left: 3px !important;
}

#userHomeModal .user-home-dynamic-grid .dynamic-video > div:nth-child(3) {
    bottom: 4px !important;
    right: 4px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
}

#userHomeModal .user-home-dynamic-grid .dynamic-voice {
    margin-top: 4px !important;
    padding: 8px !important;
}

#userHomeModal .user-home-dynamic-grid .dynamic-images {
    margin-top: 4px !important;
    margin-bottom: 4px;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

#userHomeModal .user-home-dynamic-grid .dynamic-image {
    margin: 0 !important;
}

#userHomeModal .user-home-dynamic-grid .dynamic-image img {
    max-width: 100% !important;
    max-height: 80px;
    object-fit: cover;
}

#userHomeModal .user-home-dynamic-grid .dynamic-actions {
    padding-top: 6px;
    margin-top: auto;
    gap: 4px;
}

#userHomeModal .user-home-dynamic-grid .action-btn {
    padding: 4px 6px;
    font-size: 11px;
    gap: 4px;
    border-radius: 12px;
}

#userHomeModal .user-home-dynamic-grid .action-btn span:first-child {
    font-size: 14px;
}

#userHomeModal .user-home-dynamic-grid .dynamic-delete-btn span:last-child {
    display: none;
}

.user-home-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.user-home-photo-item {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.user-home-photo-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 用户主页底部：通话优先 → 关注/礼物/消息 → 弱化拉黑举报 */
.user-home-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #fafbfc 0%, #fff 28%);
    border-top: 1px solid #eee;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.04);
}

/* 视频 / 语音通话 */
.user-home-footer-call {
    display: none;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: stretch;
}

.user-home-footer-call.is-visible {
    display: flex;
}

.uh-call-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.uh-call-btn-text {
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* 视频 / 语音：同款白底描边；图标为彩色 PNG（勿对图标使用 filter） */
.btn-user-home-video-call,
.btn-user-home-voice-call {
    flex: 1;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    color: #c2185b;
    border: 1.5px solid rgba(255, 107, 157, 0.55);
    box-shadow: 0 2px 8px rgba(232, 77, 122, 0.08);
}

.btn-user-home-video-call:active,
.btn-user-home-voice-call:active {
    background: #fff8fa;
    opacity: 0.96;
    transform: scale(0.98);
}

/* 关注 / 礼物 / 消息 / 直播 */
.user-home-footer-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.btn-user-home-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 6px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    background: #fff;
    border: 1px solid #e9ecef;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn-user-home-action .btn-icon {
    font-size: 20px;
    line-height: 1;
}

.btn-user-home-action .btn-text {
    font-size: 12px;
    font-weight: 600;
}

.btn-user-home-action:active {
    background: #f8f9fa;
}

.btn-user-home-action--follow.active {
    background: linear-gradient(135deg, #ff6b9d 0%, #e84d7a 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.35);
}

.btn-user-home-action--follow.active .btn-icon,
.btn-user-home-action--follow.active .btn-text {
    color: #fff;
}

.btn-user-home-action--live {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 8px;
    min-height: 48px;
    background: linear-gradient(135deg, #ff6b9d 0%, #e84d7a 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(255, 107, 157, 0.35);
}

.btn-user-home-action--live .btn-icon,
.btn-user-home-action--live .btn-text {
    color: #fff;
}

/* 拉黑 / 举报：弱化为文字链 */
.user-home-footer-safety--inline {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-top: 4px;
    margin-top: 2px;
}

.user-home-footer-safety--inline.is-visible {
    display: flex;
}

.user-home-safety-sep {
    width: 1px;
    height: 12px;
    margin: 0 14px;
    background: #dee2e6;
    flex-shrink: 0;
}

.btn-user-home-safety {
    background: none;
    border: none;
    padding: 8px 10px;
    font-size: 13px;
    color: #868e96;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn-user-home-safety:active {
    color: #ff6b9d;
}

#reportUserModal {
    z-index: 3700 !important;
}

.modal-report-user {
    max-width: 400px;
    width: 92%;
}

.report-user-body {
    padding-top: 8px !important;
}

.report-user-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px;
    line-height: 1.45;
}

.report-class-list {
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.report-class-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
}

.report-class-option:active {
    background: #f8f6ff;
}

.report-class-option input {
    flex-shrink: 0;
}

.btn-secondary {
    flex: 1;
    padding: 12px 14px;
    background: #fff;
    color: #495057;
    border: 1.5px solid #dee2e6;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s;
}

.btn-secondary:hover {
    border-color: #ff6b9d;
    color: #ff6b9d;
}

.btn-secondary:active {
    background: #f8f9fa;
}

.btn-secondary.active {
    background: linear-gradient(135deg, #ff6b9d 0%, #e84d7a 100%);
    color: #fff;
    border-color: transparent;
}

.btn-secondary .btn-icon {
    font-size: 18px;
}

.user-home-footer .btn-primary {
    flex: 2;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ff6b9d 0%, #e84d7a 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4);
}

.user-home-footer .btn-primary:active {
    opacity: 0.9;
    transform: scale(0.98);
}

/* 聊天窗口样式 */
.modal-chat {
    max-width: 500px;
    width: 100%;
    height: 80vh;
    max-height: 700px;
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    position: relative;
    z-index: 10;
}

.chat-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.chat-user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-user-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 昵称不换行 */
    /* 不再占满整行，避免把“修改昵称/备注”按钮推到最右 */
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 32px);
}

.chat-header .btn-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
    z-index: 11;
    position: relative;
}

.chat-header .btn-close:hover {
    color: #ff6b9d;
    background: rgba(255, 107, 157, 0.1);
    border-radius: 50%;
    transform: rotate(90deg);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    background: #f5f5f5;
    min-height: 0; /* 确保flex容器可以正确收缩 */
    max-height: 100%; /* 确保不超过父容器高度 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
    position: relative; /* 确保滚动事件正常工作 */
}
/* 消息模块内隐藏滚动条 */
#messagePage .chat-messages {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#messagePage .chat-messages::-webkit-scrollbar {
    display: none;
}

.chat-loading-more {
    text-align: center;
    padding: 10px;
    color: #999;
    font-size: 14px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 10px;
}

.chat-message {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    animation: fadeIn 0.3s ease-out;
    gap: 10px;
}

.chat-message.self {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.chat-message.other {
    flex-direction: row;
    justify-content: flex-start;
}

.chat-message-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: #e0e0e0;
}

.chat-message-wrapper {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 60px);
}

/* 文本气泡：与 APP item_chat_text_left / item_chat_text_right 一致 */
.message-content {
    position: relative;
    max-width: 100%;
    padding: 7px 8px 7px 10px;
    border-radius: 5px;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.4;
    min-height: 40px;
    box-sizing: border-box;
}

.chat-message.self .message-content:not(.gift-message-container):not(.chat-call-message-container):not([style*="transparent"]) {
    background: #B587EE;
    color: #fff;
    padding: 7px 10px 7px 8px;
    font-size: 15px;
    border-bottom-right-radius: 4px;
    box-shadow: none;
}

.chat-message.self .message-content:not(.gift-message-container):not(.chat-call-message-container):not([style*="transparent"])::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #B587EE;
}

.chat-message.other .message-content:not(.gift-message-container):not(.chat-call-message-container):not([style*="transparent"]) {
    background: #fff;
    color: #323232;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-message.other .message-content:not(.gift-message-container):not(.chat-call-message-container):not([style*="transparent"])::after {
    content: '';
    position: absolute;
    left: -5px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #fff;
    filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.04));
}

.chat-message.self .message-content:not(.gift-message-container):not(.chat-call-message-container):not([style*="transparent"]) a {
    color: #fff;
}

/* 礼物消息的父容器透明，移除白色背景和边框 */
.message-content.gift-message-container,
.message-content[style*="transparent"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.chat-message.other .message-content.gift-message-container,
.chat-message.self .message-content.gift-message-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 通话消息：与 APP item_chat_chat_left/right 一致（白/紫气泡 + 图标 + 小三角） */
.message-content.chat-call-message-container,
.message-content.chat-call-message-container[style*="transparent"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.chat-message.other .message-content.chat-call-message-container,
.chat-message.self .message-content.chat-call-message-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.chat-call-message {
    display: inline-block;
    max-width: 100%;
}
.chat-call-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.4;
}
.chat-call-bubble--in {
    background: #fff;
    color: #333;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 7px 8px 7px 10px;
}
.chat-call-bubble--in .chat-call-icon-wrap {
    color: #888;
    margin-right: 8px;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
}
.chat-call-bubble--in .chat-call-text {
    color: #333;
}
.chat-call-bubble--in::after {
    content: '';
    position: absolute;
    left: -5px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #fff;
}
.chat-call-bubble--out {
    background: #B587EE;
    color: #fff;
    padding: 7px 10px 7px 8px;
    border-bottom-right-radius: 4px;
}
.chat-call-bubble--out .chat-call-text {
    color: #fff;
    margin-right: 8px;
}
.chat-call-bubble--out .chat-call-icon-wrap {
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
}
.chat-call-bubble--out::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #B587EE;
}
.chat-call-svg {
    display: block;
}

.chat-message .message-content img.image-message {
    max-width: 240px;
    max-height: 240px;
    border-radius: 12px;
    vertical-align: top;
}

.chat-message .message-content .video-message {
    border-radius: 12px;
}

.voice-message {
    display: inline-block;
    padding: 8px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
}

.message-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 5px;
    padding: 0 5px;
}

.chat-message.self .message-meta {
    align-items: flex-end;
}

.message-time {
    font-size: 11px;
    color: #c8c8c8;
}

.chat-message .message-read {
    font-size: 11px;
    color: #c8c8c8;
}

.chat-input-area {
    border-top: 1px solid #f0f0f0;
    background: #fff;
    position: relative;
}

.emoji-picker {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 100%;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow: auto;
    z-index: 50;
    -webkit-overflow-scrolling: touch;
}

.emoji-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(255, 255, 255, 0.98);
    position: sticky;
    top: 0;
    z-index: 1;
}
.emoji-tabs::-webkit-scrollbar { display: none; }

.emoji-tab {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #555;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.emoji-tab.active {
    border-color: rgba(255, 107, 157, 0.35);
    background: rgba(255, 107, 157, 0.10);
    color: #ff6b9d;
}

.emoji-body {
    padding: 10px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.emoji-btn {
    border: none;
    background: transparent;
    border-radius: 10px;
    padding: 4px 0;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease;
}

.emoji-btn:hover {
    background: rgba(255, 107, 157, 0.12);
}

.emoji-btn:active {
    background: rgba(255, 107, 157, 0.18);
}

.emoji-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.chat-emoji-inline {
    width: 22px;
    height: 22px;
    vertical-align: -4px;
    object-fit: contain;
}

.chat-input-toolbar {
    display: flex;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.chat-tool-btn {
    min-width: 52px;
    padding: 6px 8px;
    border: none;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.25s ease;
    color: #555;
}

.chat-tool-btn:hover {
    background: rgba(255, 107, 157, 0.1);
    color: #ff6b9d;
}

.chat-tool-btn:active {
    background: rgba(255, 107, 157, 0.2);
}

.chat-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.chat-tool-icon svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.chat-tool-label {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}

.chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 15px;
}

.chat-input-emoji-btn {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #6b7280;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.chat-input-emoji-btn:hover {
    border-color: rgba(255, 107, 157, 0.35);
    background: rgba(255, 107, 157, 0.06);
    color: #ff6b9d;
}

.chat-input-emoji-btn:active {
    background: rgba(255, 107, 157, 0.12);
}

.chat-input-emoji-btn svg {
    width: 22px;
    height: 22px;
}

.chat-input {
    flex: 1;
    min-height: 64px;
    max-height: 200px;
    padding: 16px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 32px;
    font-size: 16px;
    line-height: 1.5;
    font-family: inherit;
    outline: none;
    background: #fff;
    overflow-y: auto;
    word-break: break-word;
}

.chat-input-rich:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af;
}

.chat-input-rich {
    white-space: pre-wrap;
}

.chat-input-rich img.chat-emoji-inline {
    vertical-align: -4px;
}

.chat-input:focus {
    border-color: #ff6b9d;
}

.chat-send-btn {
    height: 64px;
    padding: 0 22px;
    background: #ff6b9d;
    color: #fff;
    border: none;
    border-radius: 32px;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-send-btn:active {
    opacity: 0.8;
}

/* 视频通话界面样式 */
.modal-video-call {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    padding: 0;
    background: #000;
    border-radius: 0;
    /* PC端优化 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

/* 通话时长（集成在底部控制栏左侧） */
.video-call-duration-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.video-call-duration-wrap .video-call-duration-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.video-call-duration-wrap #videoCallDuration {
    min-width: 3.2em;
}

.video-remote {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.video-remote-view-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.video-remote video {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    background: transparent;
}

/* 等待/拨号中：对方信息在左上角玻璃卡片内，避免居中大字堆叠 */
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 96px;
    box-sizing: border-box;
    background: radial-gradient(120% 70% at 18% 12%, rgba(55, 65, 110, 0.35) 0%, transparent 52%),
        linear-gradient(168deg, #0b1020 0%, #070a14 55%, #05060c 100%);
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
}

/* 挂在 .video-call-container 上：相对整屏定位，不随远端/本地谁全屏而跑进小窗；z-index 低于底部控制栏 */
.video-call-container > .video-call-peer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 64px;
    padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 132px));
    box-sizing: border-box;
}

.video-call-container > .video-call-peer-overlay .video-call-peer-card {
    pointer-events: auto;
}

.video-call-peer-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: min(300px, calc(100vw - 24px));
    padding: 8px 12px 8px 8px;
    pointer-events: auto;
    /* 半透明玻璃，减轻挡画面感；拨打/接通同一套尺寸 */
    background: rgba(6, 8, 14, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.video-call-peer-meta {
    flex: 1;
    min-width: 0;
}

/* 当有视频时，隐藏占位符 */
.video-remote:has(video) .video-placeholder,
.video-remote video ~ .video-placeholder {
    display: none !important;
}

.video-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.video-user-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px 0;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.98);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.video-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}

.video-status #videoCallStatus {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
    animation: videoCallStatusPulse 1.6s ease-in-out infinite;
}

@keyframes videoCallStatusPulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* 通话已接通：状态点改为绿色 */
.video-call-peer-card.is-connected .video-status-dot {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
    animation: none;
}

.video-local {
    position: absolute;
    top: 24px;
    right: 24px;
    left: auto;
    width: 120px;
    height: 160px;
    background: #0f0f14;
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.video-local video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
}

/*
 * 已接通后：主画面居中竖屏区（9:16），避免竖屏流被横向铺满。
 * 拨打/等待接听（无 .is-connected）仍为全屏背景，不出现左右黑条竖条。
 * 小窗始终 cover 去黑边。仅 CSS，不改 trtc.js。
 */
#videoCallModal:not(.voice-call-mode) .video-call-container:has(.video-call-peer-card.is-connected) #remoteVideo:not(.small-window),
#videoCallModal:not(.voice-call-mode) .video-call-container:has(.video-call-peer-card.is-connected) .video-local.fullscreen {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(100vw, calc(100vh * 9 / 16)) !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: 100vh !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#videoCallModal:not(.voice-call-mode) .video-call-container:has(.video-call-peer-card.is-connected) #remoteVideo:not(.small-window) video,
#videoCallModal:not(.voice-call-mode) .video-call-container:has(.video-call-peer-card.is-connected) .video-local.fullscreen video {
    object-fit: cover !important;
}

#videoCallModal:not(.voice-call-mode) .video-remote.small-window video,
#videoCallModal:not(.voice-call-mode) .video-local:not(.fullscreen) video {
    object-fit: cover !important;
}

.video-placeholder-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* 移动端快捷键默认隐藏（PC端在 media query 中显示） */
.video-call-shortcuts {
    display: none;
}

.video-call-controls {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 12;
    align-items: center;
    padding: 12px 20px;
    background: rgba(15, 15, 20, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 48px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.video-control-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 2px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.video-control-btn:active {
    transform: scale(0.96);
}

.video-control-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-control-icon svg {
    width: 100%;
    height: 100%;
}

.video-control-label {
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.9;
    letter-spacing: 0.02em;
}

/* 语音通话模式：保持深色渐变背景，不显示视频画面 */
.modal-video-call.voice-call-mode,
.modal-video-call.voice-call-mode .video-call-container,
.modal-video-call.voice-call-mode .video-remote {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
}
.modal-video-call.voice-call-mode .video-remote .video-placeholder {
    display: flex !important;
    z-index: 25;
    background: transparent !important; /* 使用父级紫色背景 */
}
/* 用 opacity+position 隐藏视频，保留 display 让音频正常播放（display:none 会导致无声音或延迟） */
.modal-video-call.voice-call-mode .video-remote video {
    opacity: 0 !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    left: -9999px !important;
    z-index: 1 !important;
}
/* 语音通话：与视频通话同一套轻量卡片尺寸 */
.modal-video-call.voice-call-mode .video-call-peer-overlay .video-avatar {
    width: 44px;
    height: 44px;
}
.modal-video-call.voice-call-mode .video-user-name {
    font-size: 15px;
}
.modal-video-call.voice-call-mode .video-status {
    font-size: 12px;
}

.video-control-btn.muted {
    background: rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5;
}

.video-control-btn.muted:hover {
    background: rgba(239, 68, 68, 0.7) !important;
    color: #fff;
}

.video-control-hangup {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    width: 56px;
    height: 56px;
}

.video-control-hangup:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.45);
}

/* 视频通话邀请界面 */
.modal-video-invite {
    max-width: 380px;
    width: 90%;
    padding: 44px 32px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.video-invite-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-invite-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 3px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

.video-invite-name {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.video-invite-type {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 28px;
}

.video-invite-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.btn-video-reject,
.btn-video-accept {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-video-reject {
    background: #f1f5f9;
    color: #475569;
}

.btn-video-reject:hover {
    background: #e2e8f0;
    color: #334155;
}

.btn-video-accept {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.btn-video-accept:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

/* 通话结束弹窗样式 */
.modal-call-end {
    max-width: 380px;
    padding: 32px 28px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}

.call-end-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}

.call-end-info {
    margin-bottom: 28px;
}

.call-end-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.call-end-item:last-child {
    border-bottom: none;
}

.call-end-label {
    font-size: 15px;
    color: #64748b;
}

.call-end-value {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.btn-call-end-confirm {
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.btn-call-end-confirm:hover {
    opacity: 0.95;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.btn-call-end-confirm:active {
    opacity: 0.9;
}

/* ========== 评论弹窗样式 ========== */
#commentModal {
    z-index: 3000 !important;
}

.modal-comment {
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(30, 30, 40, 0.98);
}

.modal-comment .modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(40, 40, 50, 0.9);
}

.modal-comment .modal-header h3 {
    color: #fff;
}

.modal-comment .btn-close {
    color: #fff;
}

.modal-comment .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 0;
    min-height: 0;
    background: rgba(30, 30, 40, 0.98);
}

.comment-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    min-height: 200px;
    max-height: calc(85vh - 200px);
    background: rgba(30, 30, 40, 0.98);
}

.comment-list .empty-state {
    color: rgba(255, 255, 255, 0.6);
}

.comment-list::-webkit-scrollbar {
    width: 6px;
}

.comment-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.comment-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.comment-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.comment-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: none;
    transition: background 0.2s ease;
}

.comment-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.comment-item:last-child {
    margin-bottom: 0;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    object-fit: cover;
    background: #f5f5f5;
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comment-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-right: 8px;
}

.comment-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.comment-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

.comment-input-area {
    flex-shrink: 0;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(40, 40, 50, 0.9);
}

.comment-input-area .form-textarea {
    margin-bottom: 12px;
    resize: none;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    color: #fff;
    background: rgba(30, 30, 40, 0.8);
    transition: all 0.2s;
}

.comment-input-area .form-textarea:focus {
    outline: none;
    border-color: #ff6b9d;
    background: rgba(40, 40, 50, 0.9);
}

.comment-input-area .form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.comment-input-area .btn-primary {
    margin-top: 0;
    width: 100%;
    background: #ff6b9d;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.comment-input-area .btn-primary:hover {
    background: #ff5a8a;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

/* 关注/粉丝列表弹窗样式 */
.modal-follow-list {
    width: 75% !important;
    max-width: 450px !important;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.modal-follow-list .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-follow-list .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.follow-list-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    max-height: calc(80vh - 70px);
}

.follow-list-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
}

.follow-list-item:hover {
    background: #f9f9f9;
}

.follow-list-item:last-child {
    border-bottom: none;
}

.follow-list-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.follow-list-info {
    flex: 1;
    min-width: 0;
}

.follow-list-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.follow-list-desc {
    font-size: 13px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.follow-list-btn {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 16px;
    border: 1px solid #ff6b9d;
    background: #fff;
    color: #ff6b9d;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.follow-list-btn:hover {
    background: #ff6b9d;
    color: #fff;
}

.follow-list-btn.active {
    background: #e0e0e0;
    border-color: #e0e0e0;
    color: #999;
}

.follow-list-btn.active:hover {
    background: #d0d0d0;
    border-color: #d0d0d0;
}

.comment-input-area .btn-primary:active {
    background: #ff4a7a;
    box-shadow: 0 2px 6px rgba(255, 107, 157, 0.3);
}

/* 关注/粉丝列表弹窗移动端优化 */
@media (max-width: 767px) {
    .basic-functions-section {
        padding: 12px;
        margin-top: 12px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .basic-functions-title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .basic-functions-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .basic-function-item {
        padding: 10px 6px;
    }

    .basic-function-icon-wrapper {
        width: 40px;
        height: 40px;
        margin-bottom: 6px;
    }

    .basic-function-icon {
        width: 40px;
        height: 40px;
    }

    .basic-function-icon-emoji {
        width: 40px;
        height: 40px;
        font-size: 28px;
    }

    .basic-function-text {
        font-size: 11px;
        line-height: 1.2;
    }

    .modal-follow-list {
        width: 85% !important;
        max-width: 85% !important;
        max-height: 65vh;
        border-radius: 12px;
    }
    
    .modal-follow-list .modal-header {
        padding: 12px 15px;
    }
    
    .modal-follow-list .modal-header h3 {
        font-size: 15px;
    }
    
    .follow-list-content {
        padding: 5px 0;
        max-height: calc(65vh - 50px);
    }
    
    .follow-list-item {
        padding: 8px 12px;
    }
    
    .follow-list-avatar {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    
    .follow-list-name {
        font-size: 14px;
    }
    
    .follow-list-desc {
        font-size: 12px;
    }
    
    .follow-list-btn {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* 虚拟视频弹窗样式 */
#virtualVideoModal {
    z-index: 3000 !important;
}

.virtual-video-modal {
    max-width: 500px;
    width: 90%;
    position: relative;
    z-index: 3001;
}

/* 虚拟视频功能说明 */
.virtual-video-intro {
    padding: 15px;
    background: #fafbfc;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e8e9ea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.virtual-video-intro .intro-title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

.virtual-video-intro .intro-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* 虚拟视频状态 */
.virtual-video-status {
    margin-bottom: 20px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 20px;
    font-size: 14px;
}

.status-badge.status-on {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.status-off {
    background: #f5f5f5;
    color: #757575;
}

.status-icon {
    font-size: 8px;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-badge.status-on .status-icon {
    background: #4caf50;
    color: transparent;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.4);
}

.status-badge.status-off .status-icon {
    background: #ccc;
    color: transparent;
}

.status-text {
    font-size: 14px;
    font-weight: 500;
}

.video-preview-container {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 15px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
    max-height: 200px;
    object-fit: contain;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.video-play-overlay:hover {
    background: rgba(0, 0, 0, 0.8);
}

.play-icon {
    color: #fff;
    font-size: 24px;
    margin-left: 4px;
}

.video-info {
    text-align: center;
}

.video-name {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    margin-bottom: 5px;
    word-break: break-all;
}

.video-size {
    font-size: 13px;
    color: #999;
}

.virtual-video-empty {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 20px;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.empty-text {
    font-size: 14px;
    color: #999;
}

.virtual-video-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.virtual-video-actions .btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    border: none;
    transition: background 0.2s, opacity 0.2s;
}

.btn-primary {
    background: #6A5ACD;
    color: #fff;
}

.btn-primary:active {
    background: #5a4abd;
}

.btn-danger {
    background: #f44336;
    color: #fff;
}

.btn-danger:active {
    background: #d32f2f;
}

.virtual-video-settings {
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.setting-label span:first-child {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.setting-desc {
    font-size: 13px;
    color: #999;
}

/* 开关样式 */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #6A5ACD;
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* 视频预览弹窗 */
/* 视频预览弹窗 */
/* 视频预览弹窗 - 确保显示在虚拟视频设置弹窗之上 */
#videoPreviewModal {
    z-index: 4000 !important;
}

.video-preview-modal {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    position: relative;
    z-index: 4001;
}

.video-preview-body {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.video-preview-body video {
    border-radius: 8px;
    background: #000;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .virtual-video-modal {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .video-thumbnail-wrapper {
        max-width: 100%;
    }
    
    .virtual-video-actions {
        flex-direction: column;
    }
    
    .video-preview-modal {
        width: 95%;
    }
}

/* ==================== 直播间弹窗样式 ==================== */
#liveRoomModal {
    z-index: 5000 !important;
}

.live-room-modal {
    max-width: 800px;
    max-height: 80vh;
    width: 90%;
    height: auto;
    position: relative;
    z-index: 5001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
    border-radius: 12px;
}

.live-room-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #000;
}

.live-video-container {
    position: relative;
    width: 100%;
    min-height: 240px;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    background: #000;
    overflow: hidden;
}

.live-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: contain;
    background: #000;
}

.live-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.live-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    text-align: center;
    z-index: 10;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
}

.live-info-bar {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.live-anchor-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.live-anchor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.live-anchor-name {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

.live-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4444;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.live-room-modal .modal-header {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    flex-shrink: 0;
}

.live-room-modal .modal-header h3 {
    color: #fff;
    margin: 0;
    font-size: 16px;
}

.live-room-modal .close-btn {
    color: #fff;
    font-size: 28px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.live-room-modal .close-btn:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .live-room-modal {
        max-width: 95vw;
        max-height: 85vh;
        border-radius: 8px;
    }

    .live-video-container {
        padding-bottom: 56.25%; /* 移动端也使用16:9比例 */
    }

    .live-info-bar {
        padding: 12px 15px;
    }

    .live-anchor-avatar {
        width: 36px;
        height: 36px;
    }

    .live-anchor-name {
        font-size: 14px;
    }
}

/* ==================== 礼物弹窗样式 ==================== */
.modal-gift {
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-gift .modal-header {
    flex-shrink: 0;
    padding: 20px 20px 15px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-gift .modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-gift .modal-body {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

.modal-gift .modal-footer {
    flex-shrink: 0;
    padding: 15px 20px 20px;
    border-top: 1px solid #f0f0f0;
}

/* 余额显示 */
.gift-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

.gift-balance-label {
    font-weight: 500;
}

.gift-balance-value {
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
}

/* 礼物列表容器 */
.gift-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    padding: 5px 0 20px 0;
    width: 100%;
}

/* 礼物卡片 */
.gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gift-item:hover {
    border-color: #ff6b9d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
}

.gift-item.selected {
    border-color: #ff6b9d;
    background: linear-gradient(135deg, #fff5f7 0%, #ffeef2 100%);
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.3);
}

.gift-item.selected::before {
    content: "✓";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: #ff6b9d;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
}

/* 礼物图片 */
.gift-thumb {
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 4px;
}

.gift-item.selected .gift-thumb {
    transform: scale(1.05);
}

/* 礼物名称 */
.gift-name {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    text-align: center;
    margin-bottom: 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* 礼物价格 */
.gift-price {
    font-size: 14px;
    color: #ff6b9d;
    font-weight: 700;
    text-align: center;
}

.gift-price::after {
    content: " 币";
    font-size: 11px;
    font-weight: 500;
    color: #999;
}

/* 礼物数量选择器 */
.gift-count-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.gift-count-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.gift-count-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gift-count-btn {
    flex: 1;
    min-width: 60px;
    padding: 10px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gift-count-btn:hover {
    border-color: #ff6b9d;
    color: #ff6b9d;
}

.gift-count-btn.active {
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
    border-color: #ff6b9d;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.gift-count-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: #fff;
    transition: border-color 0.2s;
}

.gift-count-input:focus {
    outline: none;
    border-color: #ff6b9d;
}

.gift-count-input::placeholder {
    color: #999;
}

/* 选中礼物信息 */
.gift-selected-info {
    padding: 16px;
    background: linear-gradient(135deg, #fff5f7 0%, #ffeef2 100%);
    border-radius: 8px;
    border: 2px solid #ff6b9d;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.gift-selected-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.gift-selected-price {
    font-size: 14px;
    color: #666;
}

.gift-total-price {
    font-size: 18px;
    font-weight: 700;
    color: #ff6b9d;
    margin-top: 4px;
}

.gift-total-price.insufficient {
    color: #ff4444;
}

/* 发送礼物按钮 */
.modal-gift .modal-footer .btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}

.modal-gift .modal-footer .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 157, 0.4);
}

.modal-gift .modal-footer .btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.modal-gift .modal-footer .btn-primary:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .modal-gift {
        width: 95%;
        max-height: 90vh;
    }
    
    .gift-grid {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 10px;
    }
    
    .gift-thumb {
        height: 70px;
    }
    
    .gift-name {
        font-size: 12px;
    }
    
    .gift-price {
        font-size: 13px;
    }
    
    .gift-count-options {
        gap: 6px;
    }
    
    .gift-count-btn {
        min-width: 50px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* 滚动条样式 */
.gift-list::-webkit-scrollbar {
    width: 6px;
}

.gift-list::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.gift-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.gift-list::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ==================== 新功能弹窗样式（使用feature-前缀，不影响全局布局） ==================== */
.modal-feature {
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-feature .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
}

/* 背景墙弹窗特殊样式 */
#backWallModal .modal-body {
    padding: 20px;
    background: #f8f9fa;
}

.modal-feature-small {
    max-width: 400px;
    width: 85%;
}

.feature-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: transparent;
    padding: 0;
    border-bottom: 1px solid #e8e8e8;
}

.feature-tabs .tab-item {
    flex: 1;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    color: #999 !important;
    font-size: 14px;
    background: transparent !important;
    border-radius: 0;
    transition: all 0.2s ease;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    position: relative;
}

.feature-tabs .tab-item:hover {
    color: #666 !important;
}

.feature-tabs .tab-item.active {
    color: #333 !important;
    font-weight: 600;
    border-bottom-color: #333;
}

.feature-content .tab-content {
    display: none;
}

.feature-content .tab-content.active {
    display: block;
}

.feature-task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.task-info {
    flex: 1;
}

.task-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.task-desc {
    font-size: 12px;
    color: #999;
}

.task-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-state {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
}

.task-state.state-pending {
    color: #999;
    background: #f5f5f5;
}

.task-state.state-ready {
    color: #ff6b9d;
    background: #fff5f7;
}

.task-state.state-completed {
    color: #999;
    background: #f5f5f5;
}

.task-progress {
    font-size: 12px;
    color: #666;
}

.feature-user-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.feature-actions {
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.feature-actions .btn-primary {
    flex: 1;
    min-width: 120px;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.feature-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}

.feature-actions .feature-filter {
    flex: 0 0 auto;
    min-width: 130px;
    font-weight: 500;
}

.feature-list {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.feature-list .feature-grid {
    width: 100%;
    box-sizing: border-box;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

.feature-grid-item {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.grid-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #f5f5f5;
}

.grid-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #ffa726;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

/* 视频/相册状态标签样式 */
.feature-grid-item .status-badge {
    top: 8px;
    right: 8px;
}

.feature-grid-item .status-badge[data-status="0"] {
    background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
}

.feature-grid-item .status-badge[data-status="1"] {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
}

.feature-grid-item .status-badge[data-status="2"] {
    background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
}

/* 视频播放按钮 */
.video-thumb-wrapper {
    cursor: pointer;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-thumb-wrapper:hover .video-play-btn {
    opacity: 1;
}

.video-play-btn .play-icon {
    color: #ff6b9d;
    font-size: 24px;
    margin-left: 3px;
    line-height: 1;
}

.private-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 16px;
}

.grid-info {
    padding: 8px;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
}

.grid-title {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
    line-height: 1.4;
}

.grid-stats {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.grid-stats .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    color: #6b7280;
    font-size: 11px;
}

.grid-stats .action-btn:hover {
    background: rgba(255, 107, 157, 0.08);
    color: #ff6b9d;
}

.grid-stats .action-btn.active {
    color: #ff6b9d;
    background: rgba(255, 107, 157, 0.12);
}

.grid-stats .action-btn span:first-child {
    font-size: 14px;
    line-height: 1;
}

.grid-actions {
    padding: 8px;
    display: flex;
    gap: 6px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: flex-end;
}

.grid-actions .btn-sm:only-child {
    /* 如果只有一个按钮，让它占满宽度 */
    flex: 1;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    box-sizing: border-box;
}

.btn-sm.btn-primary {
    background: #ff6b9d;
    color: #fff;
}

.btn-sm.btn-primary:hover {
    background: #ff5a8a;
}

.btn-sm.btn-secondary {
    background: #f0f0f0;
    color: #666;
}

.btn-sm.btn-secondary:hover {
    background: #e0e0e0;
    color: #333;
}

.btn-sm.btn-danger {
    background: #f44336;
    color: #fff;
}

.btn-sm.btn-danger:hover {
    background: #d32f2f;
}

.grid-actions .btn-sm {
    flex: 1;
    min-width: 60px;
    padding: 6px 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    box-sizing: border-box;
}

.feature-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 10px;
}

.item-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.item-count {
    font-size: 12px;
    color: #999;
}

.feature-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.feature-setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.setting-label span:first-child {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.setting-desc {
    font-size: 12px;
    color: #999;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #ff6b9d;
}

input:checked + .slider:before {
    transform: translateX(22px);
}

.feature-status {
    text-align: center;
    padding: 20px 0;
}

.status-indicator {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.status-indicator.status-on {
    background: #ff6b9d;
    color: #fff;
}

.status-indicator.status-off {
    background: #e0e0e0;
    color: #999;
}

.status-text {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.feature-form {
    margin-top: 15px;
}

.feature-form .form-group {
    margin-bottom: 12px;
}

.feature-form label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.feature-form .form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    color: #333;
}

.feature-form input[type="text"].form-input,
.feature-form input[type="number"].form-input {
    /* 文本输入框不显示下拉箭头 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding-right: 10px;
}

.feature-form select.form-input {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
}

.feature-form select.form-input option {
    padding: 8px;
    color: #333;
    background: #fff;
}

.feature-form .form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    color: #333;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}

.feature-form .form-textarea:focus {
    outline: none;
    border-color: #ff6b9d;
}

.feature-form .form-input:focus {
    outline: none;
    border-color: #ff6b9d;
}

/* 文件选择框样式 */
.file-input-wrapper {
    position: relative;
    width: 100%;
}

.file-input-wrapper .file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.file-input-label {
    display: block;
    width: 100%;
    padding: 12px;
    border: 2px dashed #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
}

.file-input-label:hover {
    border-color: #ff6b9d;
    background: #fff5f7;
}

.file-input-text {
    display: block;
    color: #666;
    font-size: 14px;
}

.file-input-wrapper .file-input:focus + .file-input-label {
    border-color: #ff6b9d;
    outline: none;
}

.file-input-wrapper .file-input:focus + .file-input-label .file-input-text {
    color: #ff6b9d;
}

/* 照片预览网格 */
.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.photo-preview-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 比例 */
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
}

.photo-preview-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview-item .btn-remove-photo {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.photo-preview-item .btn-remove-photo:hover {
    background: rgba(255, 0, 0, 0.8);
}

/* 编辑资料头像上传 */
.avatar-upload-wrapper {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.avatar-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #e0e0e0;
    transition: all 0.3s;
}

.avatar-preview:hover {
    border-color: #ff6b9d;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-upload-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.avatar-preview:hover .avatar-upload-overlay {
    transform: translateY(0);
}

.feature-filter {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.feature-filter:hover {
    border-color: #ff6b9d;
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.15);
}

.feature-filter:focus {
    outline: none;
    border-color: #ff6b9d;
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

/* 礼物柜统计信息 */
.gift-cabinet-stats {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
    border-radius: 8px;
    margin-bottom: 15px;
}

.gift-cabinet-stats .stat-item {
    flex: 1;
    text-align: center;
    color: #fff;
}

.gift-cabinet-stats .stat-label {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.gift-cabinet-stats .stat-value {
    font-size: 20px;
    font-weight: bold;
}

.gift-cabinet-item {
    transition: transform 0.2s, box-shadow 0.2s;
}

.gift-cabinet-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-price-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-price-item {
    padding: 12px 15px;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.feature-price-item:hover {
    border-color: #ff6b9d;
    background: #fff5f7;
}

.price-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.feature-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-dynamic-item {
    padding: 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.dynamic-content {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.5;
}

.dynamic-time {
    font-size: 12px;
    color: #999;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .modal-feature,
    .modal-feature-small {
        width: 95%;
        max-height: 90vh;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .grid-actions {
        flex-direction: column;
        gap: 6px;
    }
    
    .grid-actions .btn-sm {
        width: 100%;
        flex: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 769px) {
    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 编辑资料 - 语音上传 */
.voice-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.voice-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 8px;
}

.voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-play-voice {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #ff6b9d;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-play-voice:hover {
    background: #ff5a8a;
}

.btn-play-voice:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.voice-duration {
    font-size: 14px;
    color: #666;
}

.btn-remove-voice {
    padding: 4px 12px;
    background: #ff4757;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-remove-voice:hover {
    background: #ff3742;
}

/* 编辑资料 - 形象标签 */
.label-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.label-list {
    min-height: 60px;
}

.label-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.label-option {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    background: #fff;
}

.label-option:hover {
    background: #f5f5f5;
}

.label-option.selected {
    background: rgba(255, 107, 157, 0.1);
    border-color: #ff6b9d;
}

.selected-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 30px;
}

.selected-label-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
}

.selected-label-item span {
    color: #fff;
}

.btn-remove-label {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0;
}

.btn-remove-label:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 编辑资料 - 所在城市 */
.city-selector {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.city-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    color: #333;
}

.city-select-btn:hover {
    border-color: #ff6b9d;
    background: #fff5f8;
}

.city-select-arrow {
    color: #999;
    font-size: 12px;
    transition: transform 0.3s;
}

.city-select-btn:hover .city-select-arrow {
    color: #ff6b9d;
}

/* 城市选择器弹窗 */
.city-picker-wrapper {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.city-picker-columns {
    display: flex;
    flex: 1;
    gap: 1px;
    background: #e8e9ea;
    overflow: hidden;
    border-radius: 6px;
}

.city-picker-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

.city-picker-title {
    padding: 12px;
    background: #f5f5f5;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #e8e9ea;
}

.city-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.city-picker-item {
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-picker-item:hover {
    background: #f5f5f5;
    color: #ff6b9d;
}

.city-picker-item.active {
    background: #fff5f8;
    color: #ff6b9d;
    font-weight: 500;
}

.city-picker-actions {
    display: flex;
    gap: 10px;
    padding: 15px 0 0;
    margin-top: 15px;
    border-top: 1px solid #e8e9ea;
}

.city-picker-actions .btn-secondary,
.city-picker-actions .btn-primary {
    flex: 1;
    padding: 10px;
    font-size: 14px;
}

/* 城市选择器列表滚动条 */
.city-picker-list::-webkit-scrollbar {
    width: 4px;
}

.city-picker-list::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.city-picker-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

.city-picker-list::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* 动态发布位置选择样式 */
.dynamic-location-wrap {
    user-select: none;
}

.dynamic-location-info {
    flex: 1;
    min-width: 0;
}

.dynamic-location-info svg {
    color: #666;
}

.dynamic-location-switch {
    flex-shrink: 0;
}

.location-switch-track {
    position: relative;
    transition: background 0.3s ease;
}

.location-switch-track:has(input:checked) {
    background: #ff6b9d !important;
}

.location-switch-thumb {
    transition: transform 0.3s ease;
}

#dynamicLocationCheckbox:checked ~ .location-switch-track {
    background: #ff6b9d !important;
}

#dynamicLocationCheckbox:checked ~ .location-switch-track .location-switch-thumb {
    transform: translateX(20px) !important;
}

/* 增值功能卡片样式 */
.value-added-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.value-added-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.value-added-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 1;
}

.value-added-card:hover::before {
    opacity: 1;
}

.value-added-card:active {
    transform: translateY(-1px) scale(1.01);
}

/* 增值功能网格容器 */
.value-added-grid {
    position: relative;
}

/* 增值功能区域统一间距 */
.value-added-section {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 钱包操作卡片样式 */
.wallet-action-card {
    transition: all 0.3s ease;
}

.wallet-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #ff6b9d !important;
}

.wallet-action-card:active {
    transform: translateY(0);
}

/* 钱包区域样式 */
.wallet-section {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#minePage .wallet-section {
    border-radius: 22px;
    box-shadow: 0 4px 22px rgba(15, 23, 42, 0.07);
}

.wallet-balance-display:hover {
    opacity: 0.8;
}

.wallet-balance-display:active {
    opacity: 0.6;
}

/* 我的明细标签页样式 */
.wallet-detail-tabs {
    position: relative;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 20px;
}

.wallet-detail-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
    position: relative;
}

.wallet-detail-tab.active {
    color: #333;
    font-weight: 600;
}

.wallet-detail-tab-indicator {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: #ff6b9d;
    border-radius: 2px 2px 0 0;
    transition: left 0.3s, width 0.3s;
}

.wallet-detail-content {
    background: #fff;
    min-height: 600px;
}

/* 我的收益样式 */
.wallet-profit-container {
    padding: 0;
}

.wallet-profit-header {
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.wallet-profit-input-card input:focus {
    outline: none;
}

.wallet-profit-account-item:hover {
    background: #f8f8f8;
}

.wallet-profit-account-item:active {
    background: #f0f0f0;
}

/* 我的收益输入框样式优化 */
.wallet-profit-input {
    transition: all 0.3s ease;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.wallet-profit-input:focus {
    outline: none;
    border-color: #ff6b9d !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1) !important;
}

/* 确保输入框容器不会溢出 */
.wallet-profit-input-card {
    overflow: hidden;
    box-sizing: border-box;
}

.wallet-profit-input-card > div {
    box-sizing: border-box;
}

.wallet-profit-input-btn {
    transition: all 0.2s ease;
}

.wallet-profit-input-btn:hover {
    background: #f0f0f0 !important;
    border-color: #ff6b9d !important;
    color: #ff6b9d !important;
}

.wallet-profit-input-btn:active {
    background: #e0e0e0 !important;
}

.wallet-profit-account-add:hover {
    background: linear-gradient(135deg, #fff5f8 0%, #ffffff 100%) !important;
}

.wallet-profit-account-delete:hover {
    background: #fcc !important;
    border-color: #f99 !important;
}

/* 我的收益标签页样式 */
.wallet-profit-tabs {
    position: relative;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 20px;
}

.wallet-profit-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
    position: relative;
}

.wallet-profit-tab.active {
    color: #ff6b9d;
    font-weight: 600;
}

.wallet-profit-tab-indicator {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: #ff6b9d;
    border-radius: 2px 2px 0 0;
    transition: left 0.3s, width 0.3s;
}

.wallet-profit-content {
    position: relative;
    min-height: 400px;
}

.wallet-profit-tab-content {
    display: none;
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
}

.wallet-profit-tab-content.active {
    display: block;
}

/* 提现记录样式 */
.wallet-profit-record-container {
    padding: 0;
}

.wallet-profit-record-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wallet-profit-record-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.wallet-profit-record-item:hover {
    background: #fafafa;
}

.wallet-profit-record-item:last-child {
    border-bottom: none;
}

.record-left {
    flex: 1;
}

.record-amount {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.record-votes {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.record-money {
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c;
}

.record-time {
    font-size: 13px;
    color: #999;
}

.record-right {
    text-align: right;
}

.record-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

.record-status.status-success {
    background: #d4edda;
    color: #155724;
}

.record-status.status-failed {
    background: #f8d7da;
    color: #721c24;
}

.record-status.status-pending {
    background: #fff3cd;
    color: #856404;
}

/* 提现记录分页样式 */
.wallet-profit-record-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
    margin-top: 10px;
}

.btn-pagination {
    padding: 8px 16px;
    background: #ff6b9d;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-pagination:hover {
    background: #ff5a8a;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.btn-pagination:active {
    transform: translateY(0);
}

.pagination-info {
    font-size: 14px;
    color: #666;
}

/* 邀请奖励标签页样式 */
.invite-tabs {
    position: relative;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 20px;
}

.invite-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
    position: relative;
}

.invite-tab.active {
    color: #ff6b9d;
    font-weight: 600;
}

.invite-tab-indicator {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: #ff6b9d;
    border-radius: 2px 2px 0 0;
    transition: left 0.3s, width 0.3s;
}

.invite-content {
    position: relative;
    min-height: 400px;
}

.invite-tab-content {
    display: none;
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
}

.invite-tab-content.active {
    display: block;
}

/* 邀请码样式 */
.invite-code-container {
    padding: 0;
}

.invite-code-title {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    padding-top: 10px;
}

.invite-code-display {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #fff5f8 0%, #ffffff 100%);
    border-radius: 12px;
}

.code-char {
    display: inline-block;
    width: 40px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #ff6b9d;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #ff6b9d;
    letter-spacing: 0;
}

.invite-superior {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.superior-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.superior-label {
    font-size: 15px;
    color: #333;
}

.superior-value {
    font-size: 15px;
    color: #ff6b9d;
    font-weight: 500;
}

.superior-value a {
    color: #ff6b9d;
    text-decoration: none;
}

.invite-steps {
    text-align: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
    font-size: 14px;
    color: #666;
}

.invite-reward-info {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #fff5f8 0%, #ffffff 100%);
    border-radius: 8px;
}

.reward-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #333;
}

.reward-value {
    font-size: 18px;
    font-weight: 700;
    color: #ff6b9d;
}

/* 我的分享样式 */
.invite-share-container {
    padding: 0;
}

.invite-share-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invite-share-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.invite-share-item:last-child {
    border-bottom: none;
}

.share-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.share-info {
    flex: 1;
}

.share-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0 0 5px 0;
}

.share-id {
    font-size: 13px;
    color: #999;
    margin: 0;
}

.share-reward {
    display: flex;
    align-items: center;
    gap: 5px;
}

.coin-icon {
    width: 20px;
    height: 20px;
}

.coin-value {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b9d;
}

.invite-share-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin-top: 10px;
}

/* 攻略说明样式 */
.invite-guide-container {
    padding: 0;
}

.guide-section {
    margin-bottom: 30px;
}

.guide-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ff6b9d;
}

.guide-content {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
}

.guide-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.guide-table {
    margin-top: 15px;
}

.guide-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.guide-table th,
.guide-table td {
    padding: 12px;
    text-align: center;
    border: 1px solid #e8e8e8;
}

.guide-table th {
    background: #ff6b9d;
    color: #fff;
    font-weight: 600;
}

.guide-table td {
    color: #333;
}

.guide-text {
    margin-top: 15px;
}

.guide-text p {
    margin: 10px 0;
    line-height: 1.8;
    color: #666;
    font-size: 14px;
}

/* 添加上级样式 */
.set-superior-container {
    padding: 20px;
}

.set-superior-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.set-superior-code-input {
    position: relative;
    margin-bottom: 30px;
}

.code-display {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: linear-gradient(135deg, #fff5f8 0%, #ffffff 100%);
    border-radius: 12px;
    cursor: text;
    border: 2px solid #e8e8e8;
    transition: border-color 0.3s;
}

.code-display:focus-within {
    border-color: #ff6b9d;
}

/* 邀请码显示字符（只读） */
.invite-code-char {
    display: inline-block;
    width: 40px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #ff6b9d;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #ff6b9d;
    letter-spacing: 0;
}

/* 添加上级输入框字符（可编辑） */
.set-superior-code-input .code-char {
    display: inline-block;
    width: 45px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #ff6b9d;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #ff6b9d;
    letter-spacing: 0;
    transition: all 0.3s;
    cursor: text;
}

.set-superior-code-input .code-char:empty::before {
    content: '\00a0';
}

.set-superior-tips {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.tips-title {
    font-size: 15px;
    font-weight: 600;
    color: #856404;
    margin-bottom: 8px;
}

.tips-content {
    font-size: 14px;
    color: #856404;
    line-height: 1.6;
}

/* ==================== 创建公会表单样式 ==================== */
.create-family-modal {
    max-width: 90%;
    width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    margin: 10px auto;
}

.create-family-modal .modal-header {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
}

.create-family-modal .modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.create-family-modal .modal-body {
    padding: 15px;
}

.create-family-form-section {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.create-family-section-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
}

.create-family-form-group {
    margin-bottom: 12px;
}

.create-family-form-group:last-child {
    margin-bottom: 0;
}

.create-family-label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
}

.create-family-label .required {
    color: #ff4757;
}

.create-family-input,
.create-family-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
}

.create-family-input:focus,
.create-family-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.create-family-textarea {
    resize: vertical;
    min-height: 60px;
}

.create-family-hint {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

.create-family-char-count {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    text-align: right;
}

.create-family-char-count .count {
    color: #667eea;
}

.create-family-divide-wrapper {
    position: relative;
}

.create-family-divide-wrapper .percent {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    pointer-events: none;
}

.create-family-divide-wrapper .create-family-input {
    padding-right: 40px;
}

.create-family-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.create-family-upload-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    text-align: center;
}

.create-family-upload-label .required {
    color: #ff4757;
}

.create-family-upload-area {
    position: relative;
    width: 100%;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
}

.create-family-upload-preview {
    width: 100%;
    height: 100%;
    border: 1px dashed #ccc;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f5f5f5;
    position: relative;
}

.create-family-upload-preview .upload-placeholder {
    text-align: center;
    color: #999;
}

.create-family-upload-preview .upload-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.create-family-upload-preview .upload-text {
    font-size: 11px;
}

.create-family-upload-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
}

.create-family-upload-img.show {
    display: block;
}

.create-family-upload-delete {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    font-size: 12px;
}

.create-family-upload-delete.show {
    display: flex;
}

.create-family-icon-wrapper {
    display: flex;
    justify-content: center;
}

.create-family-icon-area {
    position: relative;
    width: 80px;
    height: 80px;
}

.create-family-icon-preview {
    width: 80px;
    height: 80px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f5f5f5;
    position: relative;
}

.create-family-icon-preview .upload-placeholder {
    text-align: center;
    color: #999;
}

.create-family-icon-preview .upload-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.create-family-icon-preview .upload-text {
    font-size: 11px;
}

.create-family-icon-img {
    display: none;
    width: 80px;
    height: 80px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
}

.create-family-icon-img.show {
    display: block;
}

.create-family-icon-delete {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    font-size: 12px;
}

.create-family-icon-delete.show {
    display: flex;
}

.create-family-submit-area {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.create-family-submit-btn {
    width: 100%;
    padding: 10px;
    background: #667eea;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.create-family-submit-btn:active {
    background: #5568d3;
}

.create-family-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 主播认证页面优化样式 */
#authorThumbPreview:hover,
#authorVideoPreview:hover {
    border-color: #999;
    background: #f5f5f5;
}

#authorBackwallAddBtn:hover {
    border-color: #999;
    background: #f5f5f5;
}

#authorThumbDelete:hover,
#authorVideoDelete:hover,
.backwall-delete:hover {
    background: rgba(0,0,0,0.8) !important;
}


/* 功能卡片区域样式 */
.feature-card {
    transition: all 0.3s ease;
}

.feature-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.feature-card--disturb:hover,
.feature-card--disturb:active {
    transform: none;
    box-shadow: none;
}

.feature-card:active {
    transform: translateY(0);
}

/* 勿扰模式开关样式 */
.disturb-switch-track {
    transition: background 0.3s ease;
}

.disturb-switch-thumb {
    transition: transform 0.3s ease;
}

.disturb-switch input:checked + .disturb-switch-track {
    background: #ff6b9d !important;
}

.disturb-switch input:checked + .disturb-switch-track .disturb-switch-thumb {
    transform: translateX(18px) !important;
}

.disturb-switch input:not(:checked) + .disturb-switch-track {
    background: #ccc !important;
}

.disturb-switch input:not(:checked) + .disturb-switch-track .disturb-switch-thumb {
    transform: translateX(0) !important;
}

/* 防止点击卡片时触发开关 */
#disturbCard {
    cursor: default;
}

#disturbCard .disturb-switch {
    cursor: pointer;
}

/* 背景墙网格布局 - 现代化设计 */
.backwall-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12px;
}

.backwall-item {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.backwall-thumb {
    position: relative;
    width: 100%;
    padding-top: 133.33%; /* 1.33比例，与app端一致 */
    background: #f5f7fa;
    overflow: hidden;
    border-radius: 10px;
    flex-shrink: 0;
}

.backwall-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


.backwall-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    z-index: 5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.backwall-item:hover .backwall-play-icon {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.backwall-add-btn {
    border: 2px dashed #d1d5db;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.backwall-add-btn:hover {
    border-color: #ff6b9d;
    background: linear-gradient(135deg, #fff5f7 0%, #ffffff 100%);
}

.backwall-add-btn .backwall-thumb {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 133.33%; /* 与图片项保持一致的高度比例 */
}

.backwall-add-icon {
    font-size: 64px;
    color: #9ca3af;
    line-height: 1;
    font-weight: 200;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.backwall-add-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 107, 157, 0.1);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.backwall-add-btn:hover .backwall-add-icon {
    color: #ff6b9d;
}

.backwall-add-btn:hover .backwall-add-icon::before {
    opacity: 1;
}

.backwall-tip {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.backwall-tip strong {
    color: #334155;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

/* 背景墙操作按钮（在图片/视频上，一直显示） */
.backwall-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 1;
    z-index: 10;
}

.backwall-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 0;
    padding: 0;
    line-height: 1;
}

.backwall-action-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}

.backwall-action-btn:active {
    transform: scale(0.95);
}

.backwall-replace-btn {
    background: rgba(59, 130, 246, 0.85);
}

.backwall-replace-btn:hover {
    background: rgba(59, 130, 246, 0.95);
}

.backwall-delete-btn {
    background: rgba(239, 68, 68, 0.85);
}

.backwall-delete-btn:hover {
    background: rgba(239, 68, 68, 0.95);
}

.backwall-btn-icon {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    font-weight: bold;
}

/* 添加按钮内容 */
.backwall-add-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.backwall-add-text {
    font-size: 14px;
    color: #9ca3af;
    font-weight: 500;
    transition: color 0.3s ease;
}

.backwall-add-btn:hover .backwall-add-text {
    color: #ff6b9d;
}

/* 背景墙对话框（居中弹出） */
.backwall-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
    box-sizing: border-box;
}

.backwall-dialog-overlay.active {
    opacity: 1;
}

.backwall-dialog {
    width: 100%;
    max-width: 320px;
    background: #ffffff;
    border-radius: 16px;
    padding: 8px;
    max-height: 80vh;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.backwall-dialog-overlay.active .backwall-dialog {
    transform: scale(1) translateY(0);
}

.backwall-dialog-content {
    overflow-y: auto;
    max-height: calc(80vh - 16px);
}

.backwall-dialog-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-size: 16px;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #fff;
    border: none;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    border-radius: 10px;
    margin-bottom: 4px;
}

.backwall-dialog-item:hover {
    background: #f8fafc;
}

.backwall-dialog-item:active {
    background: #f1f5f9;
    transform: scale(0.98);
}

.backwall-dialog-icon {
    font-size: 20px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.backwall-dialog-text {
    flex: 1;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.backwall-dialog-cancel {
    font-weight: 600;
    color: #64748b;
    margin-top: 4px;
    margin-bottom: 0;
}

.backwall-dialog-cancel:hover {
    background: #f8fafc;
}


/* 背景墙响应式布局 */
@media (max-width: 768px) {
    .backwall-grid {
        gap: 8px;
        padding: 12px;
    }
    
    .backwall-play-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .backwall-add-icon {
        font-size: 56px;
    }
    
    .backwall-add-text {
        font-size: 13px;
    }
    
    .backwall-tip {
        font-size: 11px;
        padding: 10px 14px;
    }
    
    .backwall-action-btn {
        width: 26px;
        height: 26px;
    }
    
    .backwall-btn-icon {
        font-size: 13px;
    }
    
    .backwall-dialog {
        max-width: 300px;
        border-radius: 14px;
    }
    
    .backwall-dialog-item {
        padding: 14px 18px;
        font-size: 15px;
    }
    
    .backwall-dialog-icon {
        font-size: 18px;
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .backwall-grid {
        gap: 6px;
        padding: 10px;
    }
    
    .backwall-play-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .backwall-add-icon {
        font-size: 48px;
    }
    
    .backwall-add-text {
        font-size: 12px;
    }
    
    .backwall-tip {
        font-size: 10px;
        padding: 10px 12px;
    }
    
    .backwall-action-btn {
        width: 24px;
        height: 24px;
    }
    
    .backwall-btn-icon {
        font-size: 12px;
    }
    
    .backwall-dialog {
        max-width: 280px;
        border-radius: 12px;
    }
    
    .backwall-dialog-item {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .backwall-dialog-icon {
        font-size: 16px;
        margin-right: 8px;
    }
}