@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    /* 使用更干净的浅灰色背景 */
    background: #fafafa; 
    color: #333;
    line-height: 1.6;
    font-size: 16px;
    /* 确保底部导航栏空间 */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

.zh, .en, .ja, .ru, .fr, .es {
    display: none;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
}
body.chinese .zh { display: inline; }
body.english .en { display: inline; }
body.japanese .ja { display: inline; }
body.russian .ru { display: inline; }
body.french .fr { display: inline; }
body.spanish .es { display: inline; }

/* 页眉 Header */
header {
    background: var(--bg-card, #FFFFFF);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, #E6E6FA);
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.selection-indicator {
    position: absolute;
    height: calc(100% - 12px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 20px rgba(255, 182, 193, 0.25), 0 0 15px rgba(69, 224, 224, 0.15);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    left: 0;
    top: 6px;
    border: none;
    backdrop-filter: blur(8px);
    will-change: transform;
}

/* Logo 和标题 */
.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    margin: 0 auto; /* 确保居中 */
    max-width: 1200px; /* 添加最大宽度 */
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-container img {
    width: 50px;
    height: auto;
    transition: transform 0.3s ease;
}

.logo-container img:hover {
    transform: scale(1.1);
}

.brand-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark, #2c3e50);
}

/* 移动端隐藏滚动条但保留滚动功能 */
@media (max-width: 768px) {
    /* 隐藏WebKit浏览器滚动条 (Chrome, Safari) */
    ::-webkit-scrollbar {
        display: none;
        width: 0;
    }
    
    /* 隐藏Firefox滚动条 */
    * {
        scrollbar-width: none;
    }
    
    /* 隐藏IE和Edge滚动条 */
    * {
        -ms-overflow-style: none;
    }
    
    /* 确保内容可以滚动但无滚动条 */
    html, body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Apply login.css styles for header */
    header {
        padding: 15px; /* Match login.css */
    }
    header .header-content {
        gap: 8px; /* Match login.css */
        justify-content: center; /* Match login.css */
        padding: 0 10px; /* Adjusted for public_users.css, login.css has 10px 20px */
        flex-direction: row; /* 确保水平排列 */
    }
    .logo-container, #logo-container { /* 同时包含类选择器和ID选择器 */
        display: flex;
        flex-direction: row; /* 明确设置为水平排列 */
        align-items: center;
        gap: 10px; /* from public_users.css */
    }
    .logo-container img, #logo-container img { /* 同时包含类选择器和ID选择器 */
        width: 40px; /* Match login.css @media (max-width: 480px) .logo-container img, adjusted from 50px */
        height: auto;
        transition: transform 0.3s ease;
    }

    .brand-name { /* Style for brand name, matching login.css .header-content h1 approximately */
        font-size: 1.2rem; /* Match login.css */
        font-weight: 600;
        color: var(--text-dark, #2c3e50);
    }
    /* End of login.css inspired header styles */

    .login-card {
        padding: 30px 20px;
    }
    
    .login-title {
        font-size: 1.5rem;
    }
    
    .form-label {
        font-size: 0.95rem;
    }
    
    .form-input {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
    
    .login-btn {
        padding: 12px;
        font-size: 0.95rem;
    }
    
    .modal-content {
        padding: 25px 20px;
    }

    .selection-indicator {
        display: block;
        height: calc(100% - 10px);
        top: 5px;
        box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2);
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.8);
        transition: left 0.3s ease-out, width 0.3s ease-out;
    }
}

@media (max-width: 480px) {
    .spark-container {
        margin: 30px auto;
    }
    
    .login-card {
        padding: 25px 15px;
    }
    
    .header-content h1 {
        font-size: 1.4rem;
    }
    
    .logo-container img {
        width: 40px;
    }
        
    .selection-indicator {
        height: calc(100% - 8px);
        top: 4px;
    }
    
    .login-btn {
        padding: 10px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .modal-content {
        width: 95%;
        padding: 20px 15px;
    }
    
    .close-btn {
        right: 15px;
        top: 15px;
    }

    /* Apply login.css styles for header */
    header .header-content { /* Further refinement for smaller screens based on login.css */
        padding: 0 5px; /* Adjust padding */
        flex-direction: row; /* 确保水平排列 */
    }
    .logo-container, #logo-container { /* 同时包含类选择器和ID选择器 */
        flex-direction: row; /* 明确设置为水平排列 */
    }
    .logo-container img, #logo-container img { /* 同时包含类选择器和ID选择器 */
        width: 40px;
    }
    .brand-name { /* Match login.css exactly for this breakpoint */
        font-size: 1.2rem; /* login.css uses 1.4rem for .header-content h1, but 1.2rem looks better here. */
    }
    /* End of login.css inspired header styles */
}

/* 动画 */
@keyframes floatHearts {
    0% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-10px); opacity: 0.8; }
    100% { transform: translateY(0); opacity: 0.6; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shakeLogo {
    0% { transform: scale(1); }
    20% { transform: scale(1.1); }
    40% { transform: scale(1.3); }
    60% { transform: scale(1.3); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 主容器 - 移除背景色，调整边距 */
.spark-container { 
    max-width: 1100px; /* 稍微调整最大宽度 */
    margin: 25px auto; /* 减小上下边距 */
    padding: 0 15px; /* 调整左右内边距 */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); /* 确保内容不被底部导航栏遮挡 */
    /* 移除背景色，让 body 背景透出来 */
    /* background: #F9F6F2; */
}

/* 搜索栏 - 融入背景，简化样式 */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px; /* 减小间距 */
    /* 移除背景和阴影 */
    /* background: #F9F6F2; */
    padding: 10px 0; /* 调整内边距 */
    /* border-radius: 12px; */
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); */
    /* 可选：添加细微底部分隔线 */
    border-bottom: 1px solid #efefef;
}

#searchInput {
    flex: 1;
    padding: 12px 15px;
    /* 移除边框，使用背景色区分 */
    border: none; 
    background-color: #efefef; /* 浅灰色背景 */
    border-radius: 10px; /* 保持圆角 */
    font-size: 16px !important; /* 关键：防止移动端自动放大 */
    transition: background-color 0.3s ease;
}

#searchInput:focus {
    background-color: #e8e8e8; /* Focus 时背景稍深 */
    /* 移除边框和阴影 */
    border-color: transparent; 
    box-shadow: none; 
    outline: none;
}

/* 搜索按钮 - 简化为文本按钮 */
.search-btn {
    padding: 12px 18px;
    /* 移除背景和边框 */
    background: none;
    border: none;
    /* 使用主题色 */
    color: #FF3B30; 
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600; /* 加粗 */
    transition: color 0.3s, background-color 0.3s;
    font-size: 15px;
}

.search-btn:hover {
    color: #d13026; /* Hover 颜色加深 */
    background-color: rgba(255, 59, 48, 0.05); /* 添加非常淡的背景反馈 */
    /* 移除 transform 和 shadow */
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); */
}

/* 过滤栏 - 融入背景，简化样式 */
.filter-bar {
    display: flex;
    gap: 12px; /* 调整间距 */
    margin-bottom: 25px; /* 调整间距 */
    /* 移除背景和阴影 */
    /* background: #F9F6F2; */
    padding: 10px 0; /* 调整内边距 */
    /* border-radius: 12px; */
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); */
    /* 可选：添加细微底部分隔线 */
    border-bottom: 1px solid #efefef;
}

/* 统一所有筛选框的样式 - 简化 */
#filterNationality, #filterGender, #filterAge {
    padding: 10px 12px;
    /* 移除边框，使用背景色 */
    border: none; 
    border-radius: 8px; /* 调整圆角 */
    font-size: 14px; /* 略微减小字体 */
    background: #efefef; /* 浅灰色背景 */
    transition: background-color 0.3s ease;
    width: 100%; 
    appearance: none; 
    cursor: pointer;
    /* 添加自定义下拉箭头 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px; /* 为箭头留出空间 */
}

#filterNationality:focus, #filterGender:focus, #filterAge:focus {
    background-color: #e8e8e8;
    /* 移除边框和阴影 */
    border-color: transparent; 
    box-shadow: none; 
    outline: none;
}

#filterNationality:hover, #filterGender:hover, #filterAge:hover {
    background-color: #e8e8e8; /* Hover 时加深背景 */
    border-color: transparent;
}

/* 用户列表 */
.user-list { 
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    min-height: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px; /* 保持不变 */
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* 用户卡片 */
.user-card {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    border-radius: 20px;
    /* 强化阴影以增加立体感 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* 移除 border-color 过渡 */
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 移除边框 */
    border: none;
}

.user-card:hover {
    /* 悬停时阴影更明显 */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    /* 移除悬停边框 */
    border: none;
}

/* 移除点击/选中时的边框样式 */
.user-card.card-selected {
    border: none;
    /* 可以保留或添加其他选中状态的视觉提示，例如轻微缩放或不同的阴影 */
    /* box-shadow: 0 12px 35px rgba(255, 105, 180, 0.2), 0 2px 6px rgba(255, 105, 180, 0.15); /* 示例：粉色阴影表示选中 */
}

.photo-area {
    width: 100%;
    /* height: 200px; */ /* Removed fixed height */
    aspect-ratio: 4 / 5; /* Maintain a taller aspect ratio */
    position: relative;
    /* 可选：添加内部阴影增强图片嵌入感 */
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); */
}

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

.info-area {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.info-tags {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
}

.info-tag {
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFF;
    padding: 6px 12px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.info-tag:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* 用户信息网格 */
.user-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    padding: 5px 0;
    justify-content: space-between;
}

.user-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    line-height: 1.3;
    min-height: 44px;
}

/* Keep label styles */
.info-label {
    font-size: 12px;
    color: #FFCCBC; /* Reverted to old version color */
    margin: 0 0 5px 0;
    line-height: 1.2;
    font-weight: 500;
    width: 100%;
    text-align: center;
    /* No text-shadow */
}

/* Adjust value span to allow icon placement */
.info-value {
    font-size: 16px;
    color: #FFF8E1; /* Reverted to old version color */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin: 0;
    max-width: 100%;
    /* No text-shadow */
}

/* 新增：用于包裹国籍值和图标的容器 */
.info-value-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22px;
    position: relative;
}

/* 国籍认证图标样式调整 - 保持绿色 */
.nationality-verified-icon {
    color: #4CAF50;
    font-size: 0.85em;
    margin-left: 4px;
    display: flex;
    align-items: center;
}

/* VPN检测状态样式 */
.nationality-verified-icon.vpn-detected {
    color: #ff9800; /* 橙色 */
}

.nationality-verified-icon.vpn-detected i {
    color: #ff9800 !important; /* 确保图标颜色为橙色 */
}

/* 撕裂效果 */
.tear-effect {
    display: none;
}

/* 匹配等级小心心 - 添加到卡片左上角 */
.match-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center; /* 新增：垂直居中 */
    width: 40px;  /* 明确设置宽度等于图标宽度 */
    height: 40px; /* 明确设置高度等于图标高度 */
    overflow: visible; /* 确保内容不被裁剪 */
}

/* 用于聊天系统和用户卡片的心形图标 */
.match-icon {
    position: absolute; /* 新增：确保在容器内绝对定位 */
    top: 0;            /* 新增：定位到顶部 */
    left: 0;           /* 新增：定位到左侧 */
    width: 100% !important;       /* 修改：宽度占满容器，强制生效 */
    height: 100% !important;      /* 修改：高度占满容器，强制生效 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    margin: 0; /* 覆盖可能存在的外边距 */
    transform-origin: center; /* 新增：确保缩放从中心开始 */
}

/* 不同匹配等级的心形图标 */
.heart-perfect {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23FF0080'/%3E%3Ctext x='12' y='14' font-family='Arial' font-size='8' text-anchor='middle' fill='white'%3ES%3C/text%3E%3C/svg%3E");
    /* animation: pulse 1.5s infinite; */ /* 移除动画 */
}

.heart-high {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23FF3B30'/%3E%3Ctext x='12' y='14' font-family='Arial' font-size='8' text-anchor='middle' fill='white'%3EA%3C/text%3E%3C/svg%3E"); /* 修改颜色 */
    /* animation: pulse 2s infinite; */ /* 移除动画 */
}

.heart-good {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23FF6699'/%3E%3Ctext x='12' y='14' font-family='Arial' font-size='8' text-anchor='middle' fill='white'%3EB%3C/text%3E%3C/svg%3E");
}

.heart-moderate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23FF99AA'/%3E%3Ctext x='12' y='14' font-family='Arial' font-size='8' text-anchor='middle' fill='white'%3EC%3C/text%3E%3C/svg%3E");
}

.heart-low, .heart-default {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23FFCCDD'/%3E%3Ctext x='12' y='14' font-family='Arial' font-size='8' text-anchor='middle' fill='white'%3ED%3C/text%3E%3C/svg%3E");
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* 加载更多按钮 */
.load-more { 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin-top: 30px;
    background: #FFFFFF;
    border-radius: 12px;
    color: #FF3B30; /* iOS 红色 */
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s;
}
.load-more:hover {
    background: #FFD1DC;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.load-more:active {
    transform: scale(0.98);
}

/* 遮罩层样式 - 更新 */
.profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden; /* 使用visibility替代父元素控制的display */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
    pointer-events: none; /* 默认不响应鼠标事件 */
}

.profile-overlay.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* 显示时恢复鼠标事件 */
}

.overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.progress-bar-container {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    max-width: 550px;
    display: flex;
    justify-content: space-between;
    z-index: 1008;
    gap: 4px;
    transition: opacity 0.3s ease;
}

.progress-bar {
    flex: 1;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.active {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.4);
    transform: scaleY(1.25);
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: none;
}

.progress-bar.active::before {
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 悬停效果 */
.progress-bar:hover {
    transform: scaleY(1.5);
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

/* 点击效果 */
.progress-bar:active {
    transform: scaleY(1.2);
    transition: transform 0.1s ease;
}

.overlay-body {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.image-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Black background for letterboxing */
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show full image, letterbox if needed */
    display: block;
    box-shadow: none;
    max-height: none; 
}

/* === Redesigned Overlay Controls (Matching Light Theme / iOS Style) === */
.overlay-controls {
    position: absolute;
    bottom: 70px !important; /* 上移，避免与底部导航栏重叠 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    z-index: 10001 !important; /* 确保高于其他元素 */
    padding: 8px 12px;
    background: rgba(248, 248, 248, 0.85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, background-color 0.3s ease;
    pointer-events: auto !important; /* 强制启用点击事件 */
}

/* Remove hover effect on container itself */
.overlay-controls:hover {
    /* background: rgba(35, 35, 40, 0.75); */ /* Removed dark hover */
    background: rgba(245, 245, 247, 0.9); /* Slightly less transparent on hover */
    transform: translateX(-50%);
}

/* Base button style */
.overlay-controls button {
    background-color: #e5e5ea; /* iOS Light Grey Button background */
    border: none;
    width: 48px; /* Slightly smaller */
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3c3c43; /* Default icon color: iOS Dark Grey */
    position: relative;
    overflow: hidden;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), 
                background-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
    position: relative;
    z-index: 10002 !important;
    opacity: 1 !important;
}

/* Button Hover/Active States */
.overlay-controls button:hover {
    /* transform: scale(1.1); */ /* Optional: Keep or remove scale */
    background-color: #dcdce0; /* Darker grey on hover */
    color: #000000; /* Black icon on hover */
}

.overlay-controls button:active {
    transform: scale(0.92); /* Press down effect */
    background-color: #d1d1d6; /* Even darker grey on active */
}

/* Remove or adjust old ripple effect */
.overlay-controls button.clicked::before {
   display: none; /* Hide old ripple */
    /* Or redefine with a light theme ripple if desired */
}

/* Icon styles */
.overlay-controls button .material-symbols-outlined {
    font-size: 26px; /* Adjust icon size */
    transition: transform 0.2s ease, color 0.2s ease;
    font-variation-settings: 'FILL' 0, 'wght' 400; /* Default: Outline, Normal weight */
    line-height: 1;
    z-index: 1;
    position: relative;
}

/* Specific Button Icon Colors & Styles */

/* Like Button */
.overlay-controls .like-button {
     background-color: #f0f0f0; /* Slightly different grey? */
     color: #8e8e93; /* Default: iOS secondary grey */
}
.overlay-controls .like-button:hover {
    background-color: #e5e5e5;
    color: #FF3B30; /* iOS Red on hover */
}

/* Info Button */
.overlay-controls .info-button {
    color: #007AFF; /* Default: iOS Blue */
    background-color: rgba(0, 122, 255, 0.1); /* Light blue background */
}
.overlay-controls .info-button:hover {
    background-color: rgba(0, 122, 255, 0.18); /* Darker blue background */
    color: #005ecb; /* Darker blue icon */
}

/* Chat Button - Style similar to Info Button */
.overlay-controls .chat-button {
    color: #007AFF; /* Default: iOS Blue */
    background-color: rgba(0, 122, 255, 0.1);
}
.overlay-controls .chat-button:hover {
    background-color: rgba(0, 122, 255, 0.18);
    color: #005ecb;
}

/* Close Button */
.overlay-controls .close-button {
    background-color: #e5e5ea; /* iOS Light Grey */
    color: #555; /* Darker grey icon */
}
.overlay-controls .close-button:hover {
    background-color: #dcdce0;
    color: #000; /* Black icon on hover */
}

/* Liked State for Like Button */
.overlay-controls .like-button.liked {
    background-color: rgba(52, 199, 89, 0.15); /* Light green background */
}
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500 !important; /* Filled, Bolder */
    color: #34C759 !important; /* iOS Green for Liked */
    transform: scale(1.1) !important; /* Keep scale consistent */
    /* animation: likedPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; */ /* Keep or remove animation */
    text-shadow: none !important;
}

/* Optional: Redefine likedPop animation if kept */
/* @keyframes likedPop { ... } */

/* Responsive Adjustments (Keep existing, might need minor tweaks) */
@media (max-width: 768px) {
    .overlay-controls {
        bottom: 80px !important;
        gap: 12px;
        padding: 6px 10px;
    }
    .overlay-controls button {
        width: 44px;
        height: 44px;
    }
    .overlay-controls button .material-symbols-outlined {
        font-size: 24px;
    }
}

/* Remove old match button styles if still present */
.overlay-controls .match-level-btn,
.overlay-controls .match-icon {
    display: none;
}

/* --- END Redesigned Overlay Controls --- */

.user-info-popup {
    position: fixed; /* 必须是 fixed */
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #FFFFF0 0%, #FFF0E1 100%); /* 保留暖色背景或改为更现代的背景 */
    /* background: #FFFFFF; */ /* 或者用纯白 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; 
    max-height: 80vh; 
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); /* 调整阴影 */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 保持动画 */
    border-radius: 24px 24px 0 0; 
    z-index: 10010;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止内容溢出圆角 */
}

.user-info-popup.visible {
    transform: translateY(0);
}

/* 上滑手势动画效果 */
.user-info-popup.swiped-up {
    animation: swipeUpEffect 0.3s ease-out;
}

@keyframes swipeUpEffect {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* 移除 Drag Handle 样式 */
.popup-drag-handle {
    width: 40px; /* 缩小拖动条 */
    height: 4px;
    background-color: #e0e0e0; /* 浅灰色 */
    border-radius: 2px;
    margin: 10px auto 8px; /* 调整边距 */
    cursor: grab;
}

/* Popup Header */
.popup-header {
    /* display: none; */ /* 如果完全移除 header */
    padding: 15px 20px 10px;
    border-bottom: 1px solid #eee; /* 更细的分隔线 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* 防止 header 被压缩 */
}

.popup-title {
    color: #333; /* 深灰色标题 */
    font-weight: 600;
    font-size: 18px;
}

/* 移除旧的关闭按钮样式，因为它会被移到 actions 区 */
.user-info-popup .popup-header .popup-close-btn {
     display: none; /* 隐藏头部的关闭按钮 */
}

/* Popup Content Area */
.popup-content {
    padding: 15px 20px 20px; 
    overflow-y: auto;
    flex-grow: 1;
    background: none; 
    border: none;
    box-shadow: none;
}

/* 调整 profile details 容器的基本布局 */
.user-info-popup .profile-details {
    display: grid;
    grid-template-columns: 1fr; /* 保持单列 */
    gap: 15px; /* 增加项目间垂直间距 */
    padding: 0; /* 移除内边距，让项目自身处理 */
}

/* 调整 profile-item 样式 */
.user-info-popup .profile-item {
    background-color: transparent; /* 移除项目背景色 */
    padding: 10px 0; /* 上下内边距，左右为0 */
    border: none; /* 移除项目边框 */
    box-shadow: none; /* 移除项目阴影 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 标签和值分布两侧 */
    border-bottom: 1px solid #eee; 
    transition: background-color 0.2s ease; /* 添加微妙的 hover 效果 */
}
.user-info-popup .profile-item:last-child {
    border-bottom: none; /* 最后一个无分隔线 */
}
.user-info-popup .profile-item:hover {
    background-color: #f9f9f9; /* 微妙的 hover 背景 */
}

/* 更新 profile-label 样式 */
.user-info-popup .profile-label {
    display: inline-flex; /* 让图标和文字在同一行 */
    align-items: center; /* 图标和文字垂直居中 */
    gap: 8px; /* 图标和文字之间的间距 */
    font-size: 14px;
    color: #666; /* 柔和的中性灰 */
    font-weight: 500; /* Medium */
    flex-shrink: 0; 
    width: auto; /* 宽度自适应 */
    min-width: 90px; /* 保持一个最小宽度 */
    text-align: left; /* 标签左对齐 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用网站默认字体 */
    margin-bottom: 0;
}
/* 标签图标样式 */
.user-info-popup .profile-label-icon {
    font-size: 18px; /* 图标大小 */
    color: #888; /* 比标签文字稍浅 */
}

/* 更新 info-value 样式 */
.user-info-popup .info-value {
    font-size: 15px;
    color: #333; /* 清晰的文本色 */
    font-weight: 400; /* Normal */
    flex-grow: 1; 
    word-break: break-word;
    text-align: right; /* 值右对齐 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用网站默认字体 */
}

/* 更新 info-value-container (国籍) 样式 */
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
    justify-content: flex-end; /* 内容靠右对齐 */
    color: #333;
    font-size: 15px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.user-info-popup .info-value-container .info-value {
     margin-right: 8px; /* 值和认证图标间距 */
     text-align: right; /* 确保值右对齐 */
}
    
/* 验证徽章样式 */
.user-info-popup .verified-badge {
    display: inline-flex; /* 内部图标居中 */
    align-items: center;
    justify-content: center;
    color: #4CAF50; /* 柔和的绿色 */
    font-size: 18px; /* 徽章图标大小 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
    font-size: inherit; /* 继承父元素大小 */
    font-variation-settings: 'FILL' 1; /* 实心图标 */
}

/* 移除旧的手写信相关装饰样式 */
.profile-details .profile-detail-lips, 
.profile-details::after {
    display: none; 
}
/* 移除强制旋转 */
.profile-details .profile-item:nth-child(1),
.profile-details .profile-item:nth-child(2),
.profile-details .profile-item:nth-child(3),
.profile-details .profile-item:nth-child(4),
.profile-details .profile-item:nth-child(5),
.profile-details .profile-item:nth-child(6) {
    transform: none !important;
}
/* 移除旧的 .profile-details 背景和字体 (确保没有遗漏) */
.profile-details {
    background: none !important; /* 移除背景 */
    font-family: inherit !important; /* 继承默认字体 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
    letter-spacing: inherit;
    text-shadow: none;
}
/* 确保旧的 .profile-label 和 .profile-value 规则也被覆盖 */
.profile-details .profile-label,
.profile-details .profile-value {
    font-family: inherit !important;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: none;
    margin: 0;
    padding: 0;
    transform: none !important;
}

/* 更新举报按钮容器样式 - 恢复绝对定位 */
.user-info-popup .popup-actions {
    position: absolute; /* 恢复绝对定位 */
    bottom: 0;          /* 固定在底部 */
    left: 0;            /* 宽度撑满 */
    right: 0;           /* 宽度撑满 */
    padding: 15px 20px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; /* 添加 flex 布局 */
    justify-content: space-between; /* 让按钮分布在两端 */
    align-items: center; /* 垂直居中 */
    box-sizing: border-box; 
}
    
/* 更新举报按钮样式 - 提高选择器优先级并强制布局 */
.user-info-popup .popup-actions .report-user-btn {
    background-color: #f5f5f5; 
    border: 1px solid #ddd; 
    color: #555; 
    padding: 8px 16px;
    border-radius: 20px; 
    cursor: pointer;
    font-size: 14px;
    display: inline-flex !important; /* 强制 flex 布局 */
    align-items: center !important; /* 强制垂直居中 */
    font-weight: 500;
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease;
    order: 1; /* 举报按钮在左 */
}
.user-info-popup .popup-actions .report-user-btn:hover {
    background-color: #eee; 
    color: #333;
}
.user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
    color: #777; 
    margin-right: 6px; /* 图标和文字间距 */
    font-size: 18px; /* 图标大小 */
}
.user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
    color: #555;
}

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400 !important;
    color: #2ECC71 !important; /* Vibrant Green for Liked */
    transform: scale(1.1) !important; /* Keep scale consistent */
    animation: likedPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    text-shadow: none !important; /* Ensure no old shadows remain */
}

/* Animation for when liked */
@keyframes likedPop {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .overlay-controls {
        bottom: 80px !important;
        gap: 12px;
        padding: 6px 10px;
    }
    
    .overlay-controls button {
        width: 48px;
        height: 48px;
    }
    
    .overlay-controls button .material-symbols-outlined {
        font-size: 26px;
    }
    .overlay-controls .close-button .material-symbols-outlined {
         font-size: 28px;
    }
}

/* Remove old match button styles */
.overlay-controls .match-level-btn,
.overlay-controls .match-icon {
    display: none;
}

/* 强制使用亮色模式，即使系统设置为暗色模式 */
.user-info-popup {
    background: linear-gradient(180deg, #FCFCFC 0%, #F7F7F7 100%) !important; 
    color: #333 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

.user-info-popup .popup-header {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .popup-title {
    color: #333 !important;
}

.user-info-popup .profile-item {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .profile-item:hover {
    background-color: #f9f9f9 !important;
}

.user-info-popup .profile-label {
    color: #666 !important;
}

.user-info-popup .profile-label-icon {
    color: #888 !important;
}

.user-info-popup .info-value {
    color: #333 !important;
}

.user-info-popup .popup-actions {
    background: #fff !important;
    border-top: 1px solid #eee !important;
}

/* 保留暗色模式下其他元素的样式 */
@media (prefers-color-scheme: dark) {
    .progress-bar {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .progress-bar.active {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

/* === End Redesigned Overlay Controls === */
/* 标签图标样式 */
.user-info-popup .profile-label-icon {
    font-size: 18px; /* 图标大小 */
    color: #888; /* 比标签文字稍浅 */
}

/* 更新 info-value 样式 */
.user-info-popup .info-value {
    font-size: 15px;
    color: #333; /* 清晰的文本色 */
    font-weight: 400; /* Normal */
    flex-grow: 1; 
    word-break: break-word;
    text-align: right; /* 值右对齐 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用网站默认字体 */
}

/* 更新 info-value-container (国籍) 样式 */
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
    justify-content: flex-end; /* 内容靠右对齐 */
    color: #333;
    font-size: 15px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.user-info-popup .info-value-container .info-value {
     margin-right: 8px; /* 值和认证图标间距 */
     text-align: right; /* 确保值右对齐 */
}
    
/* 验证徽章样式 */
.user-info-popup .verified-badge {
    display: inline-flex; /* 内部图标居中 */
    align-items: center;
    justify-content: center;
    color: #4CAF50; /* 柔和的绿色 */
    font-size: 18px; /* 徽章图标大小 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
    font-size: inherit; /* 继承父元素大小 */
    font-variation-settings: 'FILL' 1; /* 实心图标 */
}

/* 移除旧的手写信相关装饰样式 */
.profile-details .profile-detail-lips, 
.profile-details::after {
    display: none; 
}
/* 移除强制旋转 */
.profile-details .profile-item:nth-child(1),
.profile-details .profile-item:nth-child(2),
.profile-details .profile-item:nth-child(3),
.profile-details .profile-item:nth-child(4),
.profile-details .profile-item:nth-child(5),
.profile-details .profile-item:nth-child(6) {
    transform: none !important;
}
/* 移除旧的 .profile-details 背景和字体 (确保没有遗漏) */
.profile-details {
    background: none !important; /* 移除背景 */
    font-family: inherit !important; /* 继承默认字体 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
    letter-spacing: inherit;
    text-shadow: none;
}
/* 确保旧的 .profile-label 和 .profile-value 规则也被覆盖 */
.profile-details .profile-label,
.profile-details .profile-value {
    font-family: inherit !important;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: none;
    margin: 0;
    padding: 0;
    transform: none !important;
}

/* 更新举报按钮容器样式 - 恢复绝对定位 */
.user-info-popup .popup-actions {
    position: absolute; /* 恢复绝对定位 */
    bottom: 0;          /* 固定在底部 */
    left: 0;            /* 宽度撑满 */
    right: 0;           /* 宽度撑满 */
    padding: 15px 20px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; /* 添加 flex 布局 */
    justify-content: space-between; /* 让按钮分布在两端 */
    align-items: center; /* 垂直居中 */
    box-sizing: border-box; 
}
    
/* 更新举报按钮样式 - 提高选择器优先级并强制布局 */
.user-info-popup .popup-actions .report-user-btn {
    background-color: #f5f5f5; 
    border: 1px solid #ddd; 
    color: #555; 
    padding: 8px 16px;
    border-radius: 20px; 
    cursor: pointer;
    font-size: 14px;
    display: inline-flex !important; /* 强制 flex 布局 */
    align-items: center !important; /* 强制垂直居中 */
    font-weight: 500;
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease;
    order: 1; /* 举报按钮在左 */
}
.user-info-popup .popup-actions .report-user-btn:hover {
    background-color: #eee; 
    color: #333;
}
.user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
    color: #777; 
    margin-right: 6px; /* 图标和文字间距 */
    font-size: 18px; /* 图标大小 */
}
.user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
    color: #555;
}

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400 !important;
    color: #2ECC71 !important; /* Vibrant Green for Liked */
    transform: scale(1.1) !important; /* Keep scale consistent */
    animation: likedPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    text-shadow: none !important; /* Ensure no old shadows remain */
}

/* Animation for when liked */
@keyframes likedPop {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .overlay-controls {
        bottom: 80px !important;
        gap: 12px;
        padding: 6px 10px;
    }
    
    .overlay-controls button {
        width: 48px;
        height: 48px;
    }
    
    .overlay-controls button .material-symbols-outlined {
        font-size: 26px;
    }
    .overlay-controls .close-button .material-symbols-outlined {
         font-size: 28px;
    }
}

/* Remove old match button styles */
.overlay-controls .match-level-btn,
.overlay-controls .match-icon {
    display: none;
}

/* 强制使用亮色模式，即使系统设置为暗色模式 */
.user-info-popup {
    background: linear-gradient(180deg, #FCFCFC 0%, #F7F7F7 100%) !important; 
    color: #333 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

.user-info-popup .popup-header {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .popup-title {
    color: #333 !important;
}

.user-info-popup .profile-item {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .profile-item:hover {
    background-color: #f9f9f9 !important;
}

.user-info-popup .profile-label {
    color: #666 !important;
}

.user-info-popup .profile-label-icon {
    color: #888 !important;
}

.user-info-popup .info-value {
    color: #333 !important;
}

.user-info-popup .popup-actions {
    background: #fff !important;
    border-top: 1px solid #eee !important;
}

/* 保留暗色模式下其他元素的样式 */
@media (prefers-color-scheme: dark) {
    .progress-bar {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .progress-bar.active {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

/* === End Redesigned Overlay Controls === */
/* 标签图标样式 */
.user-info-popup .profile-label-icon {
    font-size: 18px; /* 图标大小 */
    color: #888; /* 比标签文字稍浅 */
}

/* 更新 info-value 样式 */
.user-info-popup .info-value {
    font-size: 15px;
    color: #333; /* 清晰的文本色 */
    font-weight: 400; /* Normal */
    flex-grow: 1; 
    word-break: break-word;
    text-align: right; /* 值右对齐 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用网站默认字体 */
}

/* 更新 info-value-container (国籍) 样式 */
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
    justify-content: flex-end; /* 内容靠右对齐 */
    color: #333;
    font-size: 15px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.user-info-popup .info-value-container .info-value {
     margin-right: 8px; /* 值和认证图标间距 */
     text-align: right; /* 确保值右对齐 */
}
    
/* 验证徽章样式 */
.user-info-popup .verified-badge {
    display: inline-flex; /* 内部图标居中 */
    align-items: center;
    justify-content: center;
    color: #4CAF50; /* 柔和的绿色 */
    font-size: 18px; /* 徽章图标大小 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
    font-size: inherit; /* 继承父元素大小 */
    font-variation-settings: 'FILL' 1; /* 实心图标 */
}

/* 移除旧的手写信相关装饰样式 */
.profile-details .profile-detail-lips, 
.profile-details::after {
    display: none; 
}
/* 移除强制旋转 */
.profile-details .profile-item:nth-child(1),
.profile-details .profile-item:nth-child(2),
.profile-details .profile-item:nth-child(3),
.profile-details .profile-item:nth-child(4),
.profile-details .profile-item:nth-child(5),
.profile-details .profile-item:nth-child(6) {
    transform: none !important;
}
/* 移除旧的 .profile-details 背景和字体 (确保没有遗漏) */
.profile-details {
    background: none !important; /* 移除背景 */
    font-family: inherit !important; /* 继承默认字体 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
    letter-spacing: inherit;
    text-shadow: none;
}
/* 确保旧的 .profile-label 和 .profile-value 规则也被覆盖 */
.profile-details .profile-label,
.profile-details .profile-value {
    font-family: inherit !important;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: none;
    margin: 0;
    padding: 0;
    transform: none !important;
}

/* 更新举报按钮容器样式 - 恢复绝对定位 */
.user-info-popup .popup-actions {
    position: absolute; /* 恢复绝对定位 */
    bottom: 0;          /* 固定在底部 */
    left: 0;            /* 宽度撑满 */
    right: 0;           /* 宽度撑满 */
    padding: 15px 20px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; /* 添加 flex 布局 */
    justify-content: space-between; /* 让按钮分布在两端 */
    align-items: center; /* 垂直居中 */
    box-sizing: border-box; 
}
    
/* 更新举报按钮样式 - 提高选择器优先级并强制布局 */
.user-info-popup .popup-actions .report-user-btn {
    background-color: #f5f5f5; 
    border: 1px solid #ddd; 
    color: #555; 
    padding: 8px 16px;
    border-radius: 20px; 
    cursor: pointer;
    font-size: 14px;
    display: inline-flex !important; /* 强制 flex 布局 */
    align-items: center !important; /* 强制垂直居中 */
    font-weight: 500;
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease;
    order: 1; /* 举报按钮在左 */
}
.user-info-popup .popup-actions .report-user-btn:hover {
    background-color: #eee; 
    color: #333;
}
.user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
    color: #777; 
    margin-right: 6px; /* 图标和文字间距 */
    font-size: 18px; /* 图标大小 */
}
.user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
    color: #555;
}

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400 !important;
    color: #2ECC71 !important; /* Vibrant Green for Liked */
    transform: scale(1.1) !important; /* Keep scale consistent */
    animation: likedPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    text-shadow: none !important; /* Ensure no old shadows remain */
}

/* Animation for when liked */
@keyframes likedPop {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .overlay-controls {
        bottom: 80px !important;
        gap: 12px;
        padding: 6px 10px;
    }
    
    .overlay-controls button {
        width: 48px;
        height: 48px;
    }
    
    .overlay-controls button .material-symbols-outlined {
        font-size: 26px;
    }
    .overlay-controls .close-button .material-symbols-outlined {
         font-size: 28px;
    }
}

/* Remove old match button styles */
.overlay-controls .match-level-btn,
.overlay-controls .match-icon {
    display: none;
}

/* 强制使用亮色模式，即使系统设置为暗色模式 */
.user-info-popup {
    background: linear-gradient(180deg, #FCFCFC 0%, #F7F7F7 100%) !important; 
    color: #333 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

.user-info-popup .popup-header {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .popup-title {
    color: #333 !important;
}

.user-info-popup .profile-item {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .profile-item:hover {
    background-color: #f9f9f9 !important;
}

.user-info-popup .profile-label {
    color: #666 !important;
}

.user-info-popup .profile-label-icon {
    color: #888 !important;
}

.user-info-popup .info-value {
    color: #333 !important;
}

.user-info-popup .popup-actions {
    background: #fff !important;
    border-top: 1px solid #eee !important;
}

/* 保留暗色模式下其他元素的样式 */
@media (prefers-color-scheme: dark) {
    .progress-bar {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .progress-bar.active {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

/* === End Redesigned Overlay Controls === */
/* 标签图标样式 */
.user-info-popup .profile-label-icon {
    font-size: 18px; /* 图标大小 */
    color: #888; /* 比标签文字稍浅 */
}

/* 更新 info-value 样式 */
.user-info-popup .info-value {
    font-size: 15px;
    color: #333; /* 清晰的文本色 */
    font-weight: 400; /* Normal */
    flex-grow: 1; 
    word-break: break-word;
    text-align: right; /* 值右对齐 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用网站默认字体 */
}

/* 更新 info-value-container (国籍) 样式 */
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
    justify-content: flex-end; /* 内容靠右对齐 */
    color: #333;
    font-size: 15px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.user-info-popup .info-value-container .info-value {
     margin-right: 8px; /* 值和认证图标间距 */
     text-align: right; /* 确保值右对齐 */
}
    
/* 验证徽章样式 */
.user-info-popup .verified-badge {
    display: inline-flex; /* 内部图标居中 */
    align-items: center;
    justify-content: center;
    color: #4CAF50; /* 柔和的绿色 */
    font-size: 18px; /* 徽章图标大小 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
    font-size: inherit; /* 继承父元素大小 */
    font-variation-settings: 'FILL' 1; /* 实心图标 */
}

/* 移除旧的手写信相关装饰样式 */
.profile-details .profile-detail-lips, 
.profile-details::after {
    display: none; 
}
/* 移除强制旋转 */
.profile-details .profile-item:nth-child(1),
.profile-details .profile-item:nth-child(2),
.profile-details .profile-item:nth-child(3),
.profile-details .profile-item:nth-child(4),
.profile-details .profile-item:nth-child(5),
.profile-details .profile-item:nth-child(6) {
    transform: none !important;
}
/* 移除旧的 .profile-details 背景和字体 (确保没有遗漏) */
.profile-details {
    background: none !important; /* 移除背景 */
    font-family: inherit !important; /* 继承默认字体 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
    letter-spacing: inherit;
    text-shadow: none;
}
/* 确保旧的 .profile-label 和 .profile-value 规则也被覆盖 */
.profile-details .profile-label,
.profile-details .profile-value {
    font-family: inherit !important;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: none;
    margin: 0;
    padding: 0;
    transform: none !important;
}

/* 更新举报按钮容器样式 - 恢复绝对定位 */
.user-info-popup .popup-actions {
    position: absolute; /* 恢复绝对定位 */
    bottom: 0;          /* 固定在底部 */
    left: 0;            /* 宽度撑满 */
    right: 0;           /* 宽度撑满 */
    padding: 15px 20px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; /* 添加 flex 布局 */
    justify-content: space-between; /* 让按钮分布在两端 */
    align-items: center; /* 垂直居中 */
    box-sizing: border-box; 
}
    
/* 更新举报按钮样式 - 提高选择器优先级并强制布局 */
.user-info-popup .popup-actions .report-user-btn {
    background-color: #f5f5f5; 
    border: 1px solid #ddd; 
    color: #555; 
    padding: 8px 16px;
    border-radius: 20px; 
    cursor: pointer;
    font-size: 14px;
    display: inline-flex !important; /* 强制 flex 布局 */
    align-items: center !important; /* 强制垂直居中 */
    font-weight: 500;
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease;
    order: 1; /* 举报按钮在左 */
}
.user-info-popup .popup-actions .report-user-btn:hover {
    background-color: #eee; 
    color: #333;
}
.user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
    color: #777; 
    margin-right: 6px; /* 图标和文字间距 */
    font-size: 18px; /* 图标大小 */
}
.user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
    color: #555;
}

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400 !important;
    color: #2ECC71 !important; /* Vibrant Green for Liked */
    transform: scale(1.1) !important; /* Keep scale consistent */
    animation: likedPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    text-shadow: none !important; /* Ensure no old shadows remain */
}

/* Animation for when liked */
@keyframes likedPop {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .overlay-controls {
        bottom: 80px !important;
        gap: 12px;
        padding: 6px 10px;
    }
    
    .overlay-controls button {
        width: 48px;
        height: 48px;
    }
    
    .overlay-controls button .material-symbols-outlined {
        font-size: 26px;
    }
    .overlay-controls .close-button .material-symbols-outlined {
         font-size: 28px;
    }
}

/* Remove old match button styles */
.overlay-controls .match-level-btn,
.overlay-controls .match-icon {
    display: none;
}

/* 强制使用亮色模式，即使系统设置为暗色模式 */
.user-info-popup {
    background: linear-gradient(180deg, #FCFCFC 0%, #F7F7F7 100%) !important; 
    color: #333 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

.user-info-popup .popup-header {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .popup-title {
    color: #333 !important;
}

.user-info-popup .profile-item {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .profile-item:hover {
    background-color: #f9f9f9 !important;
}

.user-info-popup .profile-label {
    color: #666 !important;
}

.user-info-popup .profile-label-icon {
    color: #888 !important;
}

.user-info-popup .info-value {
    color: #333 !important;
}

.user-info-popup .popup-actions {
    background: #fff !important;
    border-top: 1px solid #eee !important;
}

/* 保留暗色模式下其他元素的样式 */
@media (prefers-color-scheme: dark) {
    .progress-bar {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .progress-bar.active {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

/* === End Redesigned Overlay Controls === */
/* 标签图标样式 */
.user-info-popup .profile-label-icon {
    font-size: 18px; /* 图标大小 */
    color: #888; /* 比标签文字稍浅 */
}

/* 更新 info-value 样式 */
.user-info-popup .info-value {
    font-size: 15px;
    color: #333; /* 清晰的文本色 */
    font-weight: 400; /* Normal */
    flex-grow: 1; 
    word-break: break-word;
    text-align: right; /* 值右对齐 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用网站默认字体 */
}

/* 更新 info-value-container (国籍) 样式 */
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
    justify-content: flex-end; /* 内容靠右对齐 */
    color: #333;
    font-size: 15px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.user-info-popup .info-value-container .info-value {
     margin-right: 8px; /* 值和认证图标间距 */
     text-align: right; /* 确保值右对齐 */
}
    
/* 验证徽章样式 */
.user-info-popup .verified-badge {
    display: inline-flex; /* 内部图标居中 */
    align-items: center;
    justify-content: center;
    color: #4CAF50; /* 柔和的绿色 */
    font-size: 18px; /* 徽章图标大小 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
    font-size: inherit; /* 继承父元素大小 */
    font-variation-settings: 'FILL' 1; /* 实心图标 */
}

/* 移除旧的手写信相关装饰样式 */
.profile-details .profile-detail-lips, 
.profile-details::after {
    display: none; 
}
/* 移除强制旋转 */
.profile-details .profile-item:nth-child(1),
.profile-details .profile-item:nth-child(2),
.profile-details .profile-item:nth-child(3),
.profile-details .profile-item:nth-child(4),
.profile-details .profile-item:nth-child(5),
.profile-details .profile-item:nth-child(6) {
    transform: none !important;
}
/* 移除旧的 .profile-details 背景和字体 (确保没有遗漏) */
.profile-details {
    background: none !important; /* 移除背景 */
    font-family: inherit !important; /* 继承默认字体 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
    letter-spacing: inherit;
    text-shadow: none;
}
/* 确保旧的 .profile-label 和 .profile-value 规则也被覆盖 */
.profile-details .profile-label,
.profile-details .profile-value {
    font-family: inherit !important;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: none;
    margin: 0;
    padding: 0;
    transform: none !important;
}

/* 更新举报按钮容器样式 - 恢复绝对定位 */
.user-info-popup .popup-actions {
    position: absolute; /* 恢复绝对定位 */
    bottom: 0;          /* 固定在底部 */
    left: 0;            /* 宽度撑满 */
    right: 0;           /* 宽度撑满 */
    padding: 15px 20px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; /* 添加 flex 布局 */
    justify-content: space-between; /* 让按钮分布在两端 */
    align-items: center; /* 垂直居中 */
    box-sizing: border-box; 
}
    
/* 更新举报按钮样式 - 提高选择器优先级并强制布局 */
.user-info-popup .popup-actions .report-user-btn {
    background-color: #f5f5f5; 
    border: 1px solid #ddd; 
    color: #555; 
    padding: 8px 16px;
    border-radius: 20px; 
    cursor: pointer;
    font-size: 14px;
    display: inline-flex !important; /* 强制 flex 布局 */
    align-items: center !important; /* 强制垂直居中 */
    font-weight: 500;
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease;
    order: 1; /* 举报按钮在左 */
}
.user-info-popup .popup-actions .report-user-btn:hover {
    background-color: #eee; 
    color: #333;
}
.user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
    color: #777; 
    margin-right: 6px; /* 图标和文字间距 */
    font-size: 18px; /* 图标大小 */
}
.user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
    color: #555;
}

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400 !important;
    color: #2ECC71 !important; /* Vibrant Green for Liked */
    transform: scale(1.1) !important; /* Keep scale consistent */
    animation: likedPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    text-shadow: none !important; /* Ensure no old shadows remain */
}

/* Animation for when liked */
@keyframes likedPop {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .overlay-controls {
        bottom: 80px !important;
        gap: 12px;
        padding: 6px 10px;
    }
    
    .overlay-controls button {
        width: 48px;
        height: 48px;
    }
    
    .overlay-controls button .material-symbols-outlined {
        font-size: 26px;
    }
    .overlay-controls .close-button .material-symbols-outlined {
         font-size: 28px;
    }
}

/* Remove old match button styles */
.overlay-controls .match-level-btn,
.overlay-controls .match-icon {
    display: none;
}

/* 强制使用亮色模式，即使系统设置为暗色模式 */
.user-info-popup {
    background: linear-gradient(180deg, #FCFCFC 0%, #F7F7F7 100%) !important; 
    color: #333 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

.user-info-popup .popup-header {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .popup-title {
    color: #333 !important;
}

.user-info-popup .profile-item {
    border-bottom: 1px solid #eee !important;
}

.user-info-popup .profile-item:hover {
    background-color: #f9f9f9 !important;
}

.user-info-popup .profile-label {
    color: #666 !important;
}

.user-info-popup .profile-label-icon {
    color: #888 !important;
}

.user-info-popup .info-value {
    color: #333 !important;
}

.user-info-popup .popup-actions {
    background: #fff !important;
    border-top: 1px solid #eee !important;
}

/* 保留暗色模式下其他元素的样式 */
@media (prefers-color-scheme: dark) {
    .progress-bar {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .progress-bar.active {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

/* === End Redesigned Overlay Controls === */
/* 标签图标样式 */
.user-info-popup .profile-label-icon {
    font-size: 18px; /* 图标大小 */
    color: #888; /* 比标签文字稍浅 */
}

/* 更新 info-value 样式 */
.user-info-popup .info-value {
    font-size: 15px;
    color: #333; /* 清晰的文本色 */
    font-weight: 400; /* Normal */
    flex-grow: 1; 
    word-break: break-word;
    text-align: right; /* 值右对齐 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用网站默认字体 */
}

/* 更新 info-value-container (国籍) 样式 */
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
    justify-content: flex-end; /* 内容靠右对齐 */
    color: #333;
    font-size: 15px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.user-info-popup .info-value-container .info-value {
     margin-right: 8px; /* 值和认证图标间距 */
     text-align: right; /* 确保值右对齐 */
}
    
/* 验证徽章样式 */
.user-info-popup .verified-badge {
    display: inline-flex; /* 内部图标居中 */
    align-items: center;
    justify-content: center;
    color: #4CAF50; /* 柔和的绿色 */
    font-size: 18px; /* 徽章图标大小 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
    font-size: inherit; /* 继承父元素大小 */
    font-variation-settings: 'FILL' 1; /* 实心图标 */
}

/* 移除旧的手写信相关装饰样式 */
.profile-details .profile-detail-lips, 
.profile-details::after {
    display: none; 
}
/* 移除强制旋转 */
.profile-details .profile-item:nth-child(1),
.profile-details .profile-item:nth-child(2),
.profile-details .profile-item:nth-child(3),
.profile-details .profile-item:nth-child(4),
.profile-details .profile-item:nth-child(5),
.profile-details .profile-item:nth-child(6) {
    transform: none !important;
}
/* 移除旧的 .profile-details 背景和字体 (确保没有遗漏) */
.profile-details {
    background: none !important; /* 移除背景 */
    font-family: inherit !important; /* 继承默认字体 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
    letter-spacing: inherit;
    text-shadow: none;
}
/* 确保旧的 .profile-label 和 .profile-value 规则也被覆盖 */
.profile-details .profile-label,
.profile-details .profile-value {
    font-family: inherit !important;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: none;
    margin: 0;
    padding: 0;
    transform: none !important;
}

/* 更新举报按钮容器样式 - 恢复绝对定位 */
.user-info-popup .popup-actions {
    position: absolute; /* 恢复绝对定位 */
    bottom: 0;          /* 固定在底部 */
    left: 0;            /* 宽度撑满 */
    right: 0;           /* 宽度撑满 */
    padding: 15px 20px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; /* 添加 flex 布局 */
    justify-content: space-between; /* 让按钮分布在两端 */
    align-items: center; /* 垂直居中 */
    box-sizing: border-box; 
}
    
/* 更新举报按钮样式 - 提高选择器优先级并强制布局 */
.user-info-popup .popup-actions .report-user-btn {
    background-color: #f5f5f5; 
    border: 1px solid #ddd; 
    color: #555; 
    padding: 8px 16px;
    border-radius: 20px; 
    cursor: pointer;
    font-size: 14px;
    display: inline-flex !important; /* 强制 flex 布局 */
    align-items: center !important; /* 强制垂直居中 */
    font-weight: 500;
    text-decoration: none; 
    transition: background-color 0.3s ease, color 0.3s ease;
    order: 1; /* 举报按钮在左 */
}
.user-info-popup .popup-actions .report-user-btn:hover {
    background-color: #eee; 
    color: #333;
}
.user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
    color: #777; 
    margin-right: 6px; /* 图标和文字间距 */
    font-size: 18px; /* 图标大小 */
}
.user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
    color: #555;
}

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: #2ECC71; /* Match hover color when liked */
    transform: scale(1.1); /* Slight scale when liked */
}

/* Lottie Animation Container */
.lottie-like-animation {
    position: absolute;
    width: 150px; /* Adjust size as needed */
    height: 150px;
    z-index: 1005; /* Above everything */
    pointer-events: none; /* Allow clicks through */
    transform: translate(-50%, -50%); /* Center on click point */
}

/* 修改用户信息布局为垂直排列 */
.overlay-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Further reduced gap */
    padding-bottom: 25px; /* Reduced padding */
}

/* 头像和基本信息区域 */
.profile-main-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.profile-main-info .profile-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin: 0 auto 20px;
    object-fit: cover;
    object-position: center;
}

.profile-main-info h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #333;
}

/* 恢复手写信风格 */

/* 基本信纸区域 - New Softer Style */
.profile-details {
    /* Soft gradient background */
    background: linear-gradient(135deg, #fffaf0 0%, #fff0f5 100%); /* FloralWhite to LavenderBlush */
    border: 1px solid rgba(255, 182, 193, 0.5); /* LightPink border */
    position: relative;
    padding: 20px 25px; /* Further reduced padding */
    margin: 10px 0; /* Further reduced margin */
    border-radius: 10px; /* Slightly smaller radius */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); /* Slightly reduced shadow */
    max-width: 500px; /* Match max-width with profile-photos section */
    width: 100%;
    overflow: hidden; 
    z-index: 1;
    /* Removed complex background-image layers */
}

/* 信息项 - 调整字体大小和间距 */
.profile-details .profile-item {
    margin: 15px 0; /* Further reduced vertical margin */
    padding: 0;
    border: none;
    display: flex;
    align-items: baseline;
    font-family: 'Caveat', 'Dancing Script', cursive !important;
    position: relative;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* 标签样式 - 调整字体大小 */
.profile-details .profile-label {
    color: #8B4513;
    font-size: 1.3em; /* Significantly smaller font */
    margin-right: 10px; /* Further reduced margin */
    position: relative;
    flex: 0 0 90px; /* Further adjusted flex-basis */
    letter-spacing: 0.4px;
    font-weight: 500;
    text-shadow: 0 0 1px rgba(139,69,19,0.1);
    font-family: 'Caveat', 'Dancing Script', cursive !important;
}

/* 值的样式 - 调整字体大小 */
.profile-details .profile-value {
    color: #800000;
    font-size: 1.4em; /* Significantly smaller font */
    font-weight: normal;
    flex: 1;
    letter-spacing: 0.5px;
    position: relative;
    font-family: 'Caveat', 'Dancing Script', cursive !important;
    text-shadow: 
        0.5px 0 0 rgba(128,0,0,0.15),
        -0.5px 0 0 rgba(128,0,0,0.15),
        0 0.5px 0 rgba(128,0,0,0.15);
}

/* 唇印装饰 - Adjusted for new background */
.profile-details .profile-detail-lips {
    content: '';
    position: absolute;
    top: 12px; /* Adjusted position */
    right: 25px; /* Adjusted position */
    width: 25px; /* Smaller size */
    height: 25px; /* Smaller size */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(255,105,97,0.4)' d='M464,256.25c0-65.64-13.6-112.99-32-128.01c-19.2-13.03-28.8,32.01-32,32.01s-3.2-32.01-41.6-32.01c-38.4,0-36.8,32.01-36.8,32.01s-3.2-32.01-38.4-32.01c-28.84,0-33.28,20.01-34.4,32.01h-2.17c-1.08-12-5.44-32.01-34.03-32.01c-35.2,0-38.4,32.01-38.4,32.01s1.6-32.01-36.8-32.01c-38.4,0-41.6,32.01-41.6,32.01s-12.8-45.03-32-32.01c-18.4,15.02-32,62.37-32,128.01s13.6,114,32,128c15.2,10.99,28.8-32.01,32-32.01s3.2,32.01,41.6,32.01c38.4,0,38.4-32.01,38.4-32.01s1.6,32.01,36.8,32.01c28.56,0,32.97-20.45,34.03-33.01h2.17c1.12,12.56,5.44,33.01,34.4,33.01c35.2,0,38.4-32.01,38.4-32.01s0,32.01,38.4,32.01c38.4,0,41.6-32.01,41.6-32.01s16.8,42.99,32,32.01C450.4,370.26,464,321.89,464,256.25z'/%3E%3C/svg%3E"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 1;
    background-color: transparent;
    border: none;
    opacity: 0.85; /* Adjusted opacity */
}

/* 心形伪元素 - Adjusted for new background */
.profile-details::after {
    content: '';
    position: absolute;
    bottom: 15px; /* Adjusted position */
    right: 20px; /* Adjusted position */
    width: 60px; /* Smaller size */
    height: 60px; /* Smaller size */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,182,193,0.3)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); 
    opacity: 0.7; /* Adjusted opacity */
    transform: rotate(9deg);
    pointer-events: none;
    z-index: 0;
    background-color: transparent;
    border: none;
    color: transparent;
}

/* 再次强制应用倾斜效果 */
.profile-details .profile-item:nth-child(1) {
    transform: rotate(-0.8deg) !important;
}
.profile-details .profile-item:nth-child(2) {
    transform: rotate(0.5deg) !important;
}
.profile-details .profile-item:nth-child(3) {
    transform: rotate(-0.3deg) !important;
}
.profile-details .profile-item:nth-child(4) {
    transform: rotate(0.7deg) !important;
}
.profile-details .profile-item:nth-child(5) {
    transform: rotate(-0.6deg) !important;
}
.profile-details .profile-item:nth-child(6) {
    transform: rotate(0.4deg) !important;
}

/* 修复生活照片区域样式 */
.profile-photos {
    width: 100%;
    max-width: 500px;
    margin-top: 30px;
    background: transparent !important; /* 确保透明 */
    padding: 0;
    border: none;
    box-shadow: none;
    position: relative;
    z-index: 2; /* 确保在信纸上方 */
    border-top: 1px solid transparent !important; /* 添加透明分隔线 */
    padding-top: 10px;
}

.profile-photos h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.profile-photos-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: transparent !important;
}

.profile-photo-item {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.profile-photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

.profile-photo-item:hover {
    transform: scale(1.02);
}

/* 自定义滚动条样式 */
.overlay-content::-webkit-scrollbar {
    width: 6px;
}

.overlay-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.overlay-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.overlay-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 照片全屏样式 */
.photo-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9500; /* 更新z-index，低于聊天窗口但高于资料弹窗 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden; /* 防止内容溢出 */
}

.photo-fullscreen.visible {
    opacity: 1;
}

.photo-fullscreen img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* 防止图片接收点击事件 */
    user-select: none; /* 防止选择 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
    /* 页眉 */
    header {
        padding: 15px;
    }
    header .header-content {
        gap: 8px;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        flex-direction: row !important; /* 强制水平排列 */
    }
    
    /* 修复logo容器问题 */
    #logo-container, .logo-container {
        display: flex !important;
        flex-direction: row !important; /* 强制水平排列 */
        align-items: center !important;
        justify-content: center !important;
        gap: 10px;
        width: auto !important; /* 移除固定宽度 */
    }
    
    /* 修复logo图片问题 */
    #logo-container img, .logo-container img {
        width: 40px !important; /* 确保图片大小一致 */
        height: auto !important;
        transition: transform 0.3s ease;
    }
    
    /* 品牌名称样式 */
    .brand-name, #logo-container span {
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        color: var(--text-dark, #2c3e50) !important;
        display: inline-block !important; /* 确保显示 */
        margin: 0 !important; /* 重置所有外边距 */
    }
    
    /* 容器 */
    .spark-container {
        padding: 0 10px; /* 调整移动端内边距 */
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* 移动端增加底部padding */
        margin: 15px auto; /* 减小移动端上下边距 */
    }

    /* 搜索栏 */
    .search-bar {
        padding: 8px 0; /* 调整内边距 */
        margin-bottom: 10px; /* 调整间距 */
        gap: 8px;
    }
    #searchInput {
        padding: 10px 12px;
        font-size: 16px !important;
    }
    .search-btn {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* 过滤栏 */
    .filter-bar {
        padding: 8px 0;
        margin-bottom: 20px;
        flex-direction: column; /* 移动端改为垂直排列 */
        gap: 10px; /* 调整垂直间距 */
        border-bottom: none; /* 移动端垂直排列时移除底部边框 */
    }
    #filterNationality, #filterGender, #filterAge {
        padding: 10px 12px;
        font-size: 14px;
        background-position: right 12px center;
        padding-right: 35px;
        /* 在垂直排列时，可以添加细微分界 */
        border-bottom: 1px solid #efefef; 
    }
    #filterNationality:last-child, #filterGender:last-child, #filterAge:last-child {
        border-bottom: none; /* 最后一项移除边框 */
    }

    /* 用户列表 - 移动端可能需要调整列数或间距，这里保持不变，因为指令说不修改卡片 */
    .user-list {
        /* grid-template-columns: 1fr; */ /* 如果想强制单列 */
        gap: 15px;
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
    
    .user-card {
        width: 100%;
        margin: 0;
    }
    
    /* 移除旧的移动端高度类 */
    .user-card.height-1,
    .user-card.height-2,
    .user-card.height-3,
    .user-card.height-4,
    .user-card.height-5 {
        height: auto;
    }
    
    /* 照片区域 */
    .photo-area {
        /* height: 200px; */ /* Removed fixed height */
        aspect-ratio: 4 / 5; /* Maintain a taller aspect ratio */
    }
    
    /* 信息区域 */
    .info-area {
        padding: 10px;
    }
    
    /* 用户信息网格 */
    .user-info-grid {
        gap: 8px;
        padding: 0px;
    }
    
    .user-info-item {
        padding: 0px; /* 移动设备上调整内边距 */
    }
    
    .info-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    .info-tags {
        gap: 8px;
        margin-top: 8px;
    }

    .info-label {
        font-size: 10px;
    }

    .info-value {
        font-size: 12px;
    }

    .match-indicator {
        top: 5px;
        left: 5px;
        width: 35px; /* 调整移动端大小 */
        height: 35px;
    }

    /* 加载更多按钮 */
    .load-more {
        padding: 12px;
        font-size: 0.85rem;
    }

    /* 遮罩层样式 */
    .profile-overlay {
        width: 100% !important; /* 不是100%，而是100% */
        left: 0 !important; /* 左右各留0%的间距 */
        top: 0 !important;
        /* transform: translateY(0) scale(0.98); */ /* Removed transform */
        /* border-radius: 20px; */ /* Removed border-radius */
    }

    .profile-overlay.visible {
        /* transform: translateY(0) scale(1); */ /* Removed transform */
    }

    .overlay-content {
        /* padding: 20px; */ /* Removed padding */
        /* width: 95%; */ /* Removed width restriction */
    }

    .profile-main-info .profile-avatar {
        width: 150px;
        height: 150px;
    }

    .profile-main-info h2 {
        font-size: 1.5rem;
    }

    /* Explicitly set for profile-details for mobile */
    .profile-details {
        padding: 15px 20px;
        width: 90%; /* Ensure width scales down */
        max-width: 400px; /* Set a specific max-width for mobile */
        margin-left: auto; /* Center the element */
        margin-right: auto; /* Center the element */
    }
    
    /* Explicitly set for profile-photos for mobile */
    .profile-photos {
         padding: 15px 20px;
         /* Remove width constraints to revert to previous size */
         /* width: 90%; */
         /* max-width: 400px; */
         /* Remove centering */
         /* margin-left: auto; */
         /* margin-right: auto; */
         margin-top: 20px; /* Keep top margin */
    }

    /* 明确减小移动端信息项的字体大小 */
    .profile-details .profile-label {
        font-size: 1.1em; /* Further reduced for mobile */
        flex-basis: 80px; /* Further reduced label width */
        margin-right: 8px; /* Further reduced margin */
    }
    .profile-details .profile-value {
        font-size: 1.2em; /* Further reduced for mobile */
    }
    .profile-details .profile-item {
        margin: 12px 0; /* Further reduced vertical margin */
    }

    .user-list {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); /* 移动端增加列表底部padding */
    }
}

/* 用户信息弹窗中的挥手按钮样式 */
.wave-button {
    position: sticky;
    top: 20px;
    right: 20px;
    float: right;
    width: 50px;
    height: 50px;
    background-color: #FFD1DC;
        border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
    z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
    margin-left: 15px;
}

.wave-button:hover {
    transform: scale(1.1);
    background-color: #FFA5B5;
}

.wave-button:active {
    transform: scale(0.95);
}

.wave-icon {
    font-size: 24px;
    color: white;
    animation: wave 1s infinite;
}

@keyframes wave {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
    100% { transform: rotate(0deg); }
}

/* 修改用户信息弹窗样式以适应挥手按钮 */
.user-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.user-info-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-info-name {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

/* 聊天室过渡动画 */
.chat-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 209, 220, 0.2);
    z-index: 9800; /* 更新z-index，低于聊天窗口但高于其他元素 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.chat-transition.active {
    opacity: 1;
    pointer-events: auto;
}

/* 添加用户卡片聊天按钮样式 */
.user-card-chat-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FFD1DC;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 更平滑的出现/消失动画 */
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.user-card:hover .user-card-chat-btn {
        opacity: 1;
    transform: scale(1);
}

.user-card-chat-btn:hover {
    background-color: #FFB6C1;
    transform: scale(1.1); /* 悬停时放大 */
}

.chat-icon {
    font-size: 18px;
    line-height: 1;
}

/* 匹配系统评级心形图标样式 */
.match-icon-container {
    position: relative;  /* 改为相对定位 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* 图标之间的间距 */
    margin: 10px 0; /* 上下间距 */
    width: 100%;
}

.match-icon {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    order: 1; /* 将匹配图标放在最左边 */
}

.close-button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    color: #000;
    transition: transform 0.2s ease;
    order: 2; /* 将关闭按钮放在中间 */
}

.close-button svg {
    stroke: #fff; /* 白色线条 */
    stroke-width: 2;
    fill: none;
}

.close-button:hover {
    transform: scale(1.1);
}

.chat-button {
    /* 直接使用之前 :hover 状态的颜色和阴影 */
    border: none;
    padding: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    order: 3;
    /* 使用悬停时的阴影 */
    /* box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
                0 3px 7px rgba(183, 28, 28, 0.5); */ /* 移除此行 */
}

/* 更新 :hover 规则，使其与基础规则一致，避免悬停变化 */
.chat-button:hover {
    transform: scale(1.1); /* 可以保留缩放效果 */
}

/* Style for the new FILLED messages icon */
.messages-icon-for-chat {
    width: 20px;
    height: 20px;
    stroke: none;
    stroke-width: 0;
    fill: #FFFFFF; /* 白色填充 */
    animation: bubbleFloat 1.5s infinite ease-in-out;
}

/* Ensure the bubbleFloat animation is defined */
@keyframes bubbleFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* 匹配等级弹窗样式 */
.match-level-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9200; /* 更新z-index */
}

.match-level-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    z-index: 9300; /* 更新z-index */
    max-width: 300px;
    width: 90%;
}

.match-level-popup h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.match-level-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.match-level-popup li {
    margin-bottom: 10px;
    color: #666;
}

.match-level-popup .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
}

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

/* 高分辨率屏幕适配 */
@media screen and (min-width: 1440px) {
    .spark-container {
        max-width: 1400px; /* 增加容器最大宽度 */
    }
    
    .user-card {
        width: 400px; /* 在更大的屏幕上使用更宽的卡片 */
    }
    
    .photo-area {
        min-height: 520px; /* 相应增加照片区域高度 */
    }

    .info-label {
        font-size: 12px; /* 从14px改为12px */
    }

    .info-value {
        font-size: 16px; /* 从20px改为16px */
    }
}

/* 错误提示样式 */
.error-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 59, 48, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* 聊天打开时的样式 */
body.chat-open {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* New Tab Bar Styles */
.tab-bar {
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tab-button {
    flex: 1;
    padding: 12px;
    text-align: center;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 0 5px;
}

.tab-button.active {
    background-color: #FFD1DC;
    border-radius: 4px;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease, bottom 0.3s ease;
    will-change: transform, bottom;
}

.bottom-nav .nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
    position: relative;
    height: 100%;
}

.bottom-nav .nav-btn .material-symbols-outlined,
.bottom-nav .nav-btn .nav-icon {
    color: #333;
    transition: color 0.3s, transform 0.3s, opacity 0.3s;
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Material Symbols字体加载失败时的后备样式 */
.bottom-nav .nav-btn .material-symbols-outlined:empty::before,
.bottom-nav .nav-btn .material-symbols-outlined:empty::after {
    content: '⬜'; /* 使用白色方块作为后备 */
    font-size: 20px;
    opacity: 0.7;
}

.bottom-nav .nav-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: 2px;
    font-weight: 500;
    transition: color 0.25s;
}

/* 默认隐藏所有语言文本，防止闪烁 */
.bottom-nav .nav-label .zh,
.bottom-nav .nav-label .en,
.bottom-nav .nav-label .ja,
.bottom-nav .nav-label .ru,
.bottom-nav .nav-label .fr,
.bottom-nav .nav-label .es {
    display: none;
}

/* 默认显示英文作为后备 */
.bottom-nav .nav-label .en {
    display: inline;
}

/* 统一所有状态为红色+动画 */
.bottom-nav .nav-btn:hover,
.bottom-nav .nav-btn.active {
    color: #FF3B30 !important;
    transform: scale(1.1);
}
.bottom-nav .nav-btn:active {
    color: #FF3B30 !important;
    transform: scale(0.95);
}

.bottom-nav .nav-btn:hover .material-symbols-outlined,
.bottom-nav .nav-btn.active .material-symbols-outlined,
.bottom-nav .nav-btn:hover .nav-icon,
.bottom-nav .nav-btn.active .nav-icon {
    color: #FF3B30 !important;
    opacity: 1;
    transform: translateY(-2px) scale(1.1);
}
.bottom-nav .nav-btn:active .material-symbols-outlined,
.bottom-nav .nav-btn:active .nav-icon {
    color: #FF3B30 !important;
    opacity: 1;
    transform: translateY(-2px) scale(0.95);
}

.bottom-nav .nav-btn:hover .nav-label,
.bottom-nav .nav-btn:active .nav-label,
.bottom-nav .nav-btn.active .nav-label {
    color: #FF3B30 !important;
    font-weight: 600;
    transition: color 0.25s;
}

/* 选中下划线 */
.bottom-nav .nav-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 3px;
    background: #FF3B30;
    border-radius: 10px;
    transition: transform 0.3s;
}
.bottom-nav .nav-btn.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .bottom-nav { height: 64px; padding: 0 5px; }
    .bottom-nav .nav-btn .material-symbols-outlined { font-size: 26px; margin-bottom: 2px; }
    .bottom-nav .nav-label { font-size: 10px; }
}
@media (max-width: 480px) {
    .bottom-nav { height: 60px; }
    .bottom-nav .nav-btn .material-symbols-outlined { font-size: 24px; margin-bottom: 1px; }
    .bottom-nav .nav-label { font-size: 9px; }
}

/* Spark Icon Specific Active Style */
#spark-tab.active .material-symbols-outlined {
    color: #FF3B30; /* Unified active color */
    font-variation-settings:
        'FILL' 1, 
        'wght' 500, /* Slightly bolder */
        'GRAD' 0,
        'opsz' 24;
    /* filter: drop-shadow(0 0 5px #FFD70088); /* Removed shadow */
}

/* Messages Icon Specific Active Style */
#messages-tab.active .material-symbols-outlined {
    color: #FF3B30; /* Unified active color */
    font-variation-settings:
        'FILL' 1, /* TEMPORARILY set to 1 for visual testing */
        'wght' 500, /* Slightly bolder */
        'GRAD' 0,
        'opsz' 24;
}

/* Fate Icon Specific Active Style */
#fate-tab.active .material-symbols-outlined {
    color: #FF3B30; /* Unified active color */
    font-variation-settings:
        'FILL' 1, 
        'wght' 500, /* Slightly bolder */
        'GRAD' 0,
        'opsz' 24;
    /* filter: drop-shadow(0 0 4px #d8c8f0); /* Removed shadow */
}

/* Me Icon Active Style */
#me-tab.active .material-symbols-outlined {
    font-variation-settings:
        'FILL' 1, 
        'wght' 500, /* Slightly bolder */
        'GRAD' 0,
        'opsz' 24;
     color: #FF3B30; /* Unified active color */
}

/* New unread message counter styles */
.badge-container {
    position: relative;
    display: inline-flex;
}

.unread-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #FF3B30;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.unread-badge.show {
    transform: scale(1);
}

/* Styles for thread unread count badge */
.thread-unread-badge {
    background-color: #FF3B30;
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3);
    margin-left: 8px;
    padding: 0 5px;
}

/* Fate container and section title styles */
.fate-container {
    padding-top: 20px;
    padding-bottom: 100px; /* Space above nav bar */
}

.fate-section-title {
    text-align: center;
    font-size: 1.8em;
    font-weight: 700;
    color: #4a4a4a;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
    font-family: 'Dancing Script', cursive; /* More mystical font */
}
/* Decorative underline for Fate titles */
.fate-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #b19cd9, #FF9AB3, #b19cd9); /* Purple-Pink gradient */
    border-radius: 3px;
}

/* Astrology styles (if needed, currently removed from HTML) */
.astrology-container {
     /* Styles specific to the astrology section if needed */
     background: rgba(245, 245, 255, 0.5); /* Very light lavender semi-transparent bg */
     padding: 25px;
     border-radius: 16px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(220, 220, 240, 0.6);
}

.astrology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    justify-content: center;
}

.zodiac-card {
    background: linear-gradient(145deg, #ffffff, #f8f8ff);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 10px rgba(177, 156, 217, 0.1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}
    
 /* Add subtle star effect */
.zodiac-card::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 4px;
    height: 4px;
    background: gold;
    border-radius: 50%;
    box-shadow: 15px 30px 0 gold, 30px -10px 0 gold, -20px 10px 0 gold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zodiac-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 6px 15px rgba(177, 156, 217, 0.25);
    border-color: rgba(177, 156, 217, 0.5);
}

.zodiac-card:hover::before {
     opacity: 0.3;
}

 .zodiac-card.selected {
     border-color: var(--secondary-accent);
     box-shadow: 0 0 0 3px var(--secondary-accent), 0 6px 15px rgba(177, 156, 217, 0.3);
     transform: translateY(-2px) scale(1.02);
 }

.zodiac-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.zodiac-card:hover .zodiac-icon {
     opacity: 1;
}

.zodiac-name {
    font-size: 0.9em;
    font-weight: 600;
    color: #5c5c7a; /* Deep purple-grey */
    display: block;
}

 .astrology-details {
     margin-top: 30px;
     padding: 20px;
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* === 全新 Profile Details 设计：温暖相遇 === */

/* 弹窗整体背景和字体 */
.user-info-popup {
    /* 移除上一步错误添加的 relative 定位和 overflow */
    /* position: relative; */ 
    /* overflow: hidden; */
    /* 确保原有的 fixed 定位和其他样式仍然生效 */
    position: fixed; /* 必须是 fixed */
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #FFFFF0 0%, #FFF0E1 100%); /* 保留暖色背景或改为更现代的背景 */
    /* background: #FFFFFF; */ /* 或者用纯白 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; 
    max-height: 80vh; 
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); /* 调整阴影 */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 保持动画 */
    border-radius: 24px 24px 0 0; 
    z-index: 10010;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止内容溢出圆角 */
}
.user-info-popup.visible {
    transform: translateY(0);
}
.user-info-popup .popup-content {
    background: none; /* 确保内容区域透明 */
    padding: 10px 20px 80px 20px; /* 调整内边距，为底部按钮留足空间 */
    position: relative; /* Needed for ::after positioning */
    z-index: 1; /* Ensure content is above potential background pseudo-elements */
    overflow-y: auto; /* 允许内容滚动 */
    flex-grow: 1; /* 占据剩余空间 */
}
/* 移除旧的 popup-header 样式，如果不需要 header 的话 */
/* 如果保留 header，则重新设计 */
.user-info-popup .popup-header {
    /* display: none; */ /* 如果完全移除 header */
    padding: 15px 20px 10px;
    border-bottom: 1px solid #eee; /* 更细的分隔线 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* 防止 header 被压缩 */
}
.user-info-popup .popup-title {
    color: #333; /* 深灰色标题 */
    font-weight: 600;
    font-size: 18px;
}
/* 移除旧的关闭按钮样式，因为它会被移到 actions 区 */
.user-info-popup .popup-header .popup-close-btn {
     display: none; /* 隐藏头部的关闭按钮 */
}

/* profile-details 容器：卡片间距 */
.user-info-popup .profile-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px; /* 卡片之间的垂直间距 */
    padding-top: 10px;
}

/* 信息卡片 (.profile-item-card) 样式 */
.user-info-popup .profile-item-card {
    background-color: rgba(255, 255, 255, 0.8); /* 轻微透明背景，或 #f7f7f7 */
    /* background-color: #f7f7f7; */
    border-radius: 12px; /* 圆角 */
    padding: 14px 16px; /* 卡片内部边距 */
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); */ /* 非常柔和的阴影 */
    border: 1px solid #eee; /* 添加细边框 */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden; /* 确保内部元素不溢出 */
}
.user-info-popup .profile-item-card:hover {
    /* transform: translateY(-2px); */ /* 移除或减弱 hover 效果 */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); */
}

/* 卡片内部项 (.profile-item) 布局 */
.user-info-popup .profile-item {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between;
    padding: 0; /* 移除内边距，由卡片处理 */
    border: none; /* 移除边框 */
    background: none; /* 移除背景 */
    box-shadow: none; /* 移除阴影 */
}

/* 标签 (.profile-label) 样式 */
.user-info-popup .profile-label {
    display: inline-flex;
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 图标和文字间距 */
    font-size: 14px;
    color: #555; /* 中灰色 */
    font-weight: 500; /* Medium */
    flex-shrink: 0; 
    text-align: left;
    font-family: inherit; /* 继承 Inter 字体 */
}
.user-info-popup .profile-label-icon {
    font-size: 22px; /* 标准化图标大小 */
    color: #777; /* 图标颜色 */
    width: 24px; /* 固定图标宽度便于对齐 */
    text-align: center; /* 图标居中 */
    line-height: 1;
}

/* 值 (.info-value & .info-value-container) 样式 */
.user-info-popup .info-value {
    font-size: 15px;
    color: #222; /* 更深的文本颜色 */
    font-weight: 400; /* Normal */
    flex-grow: 1; 
    word-break: break-word;
    text-align: right; /* 值右对齐 */
    font-family: inherit;
    line-height: 1.4;
    margin-left: 10px; /* 与标签保持距离 */
}
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
    justify-content: flex-end;
    flex-grow: 1; 
    color: #222;
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.4;
    margin-left: 10px;
}
.user-info-popup .info-value-container .info-value {
    margin-right: 6px; /* 值和认证图标间距 */
     text-align: right; /* 确保值右对齐 */
}
/* MBTI 值特殊强调 */
.user-info-popup .info-value-mbti {
    font-weight: 500; /* Medium 粗细 */
    color: #007AFF; /* 使用类似 iOS 的蓝色 */
    /* background-color: #eef5ff; */ /* 可选：添加淡蓝色背景 */
    /* padding: 2px 6px; */
    /* border-radius: 4px; */
}

/* 验证徽章 (.verified-badge) 样式 */
.user-info-popup .verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #34C759; /* 使用类似 iOS 的绿色 */
    font-size: 20px; 
    position: relative;
}
.user-info-popup .verified-badge .material-symbols-outlined {
    font-size: inherit; /* 继承父元素大小 */
    font-variation-settings: 'FILL' 1; /* 实心图标 */
}

/* 移除所有之前的 .profile-details 相关样式（再次确保） */
/* (保留之前的移除规则) */
.profile-details, 
.profile-details .profile-item, 
.profile-details .profile-label, 
.profile-details .profile-value,
.profile-details .profile-detail-lips, 
.profile-details::after {
    /* Reset all potentially conflicting old styles */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    color: inherit !important; /* Allow new rules to set color */
    font-size: inherit !important;
    font-weight: inherit !important;
    text-align: inherit !important;
    transform: none !important;
    margin: 0 !important; /* Reset margins */
    padding: 0 !important; /* Reset paddings */
    letter-spacing: inherit !important;
    text-shadow: none !important;
    display: block; /* Reset display, flex will be reapplied by new rules */
}
/* Reapply flex for profile-item inside the card */
.user-info-popup .profile-item-card .profile-item {
    display: flex !important;
}
/* Reapply grid for profile-details itself */
.user-info-popup .profile-details {
     display: grid !important;
     gap: 12px !important; /* Restore gap */
     padding-top: 10px !important; /* Restore padding */
}
    
/* 底部操作区域和按钮样式 - 重新设计 */
.user-info-popup .popup-actions {
    position: absolute; 
    bottom: 0;          
    left: 0;
    right: 0;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); /* 适配底部安全区域 */
    background: #ffffff; /* 白色背景 */
    /* background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9)); */ /* 或用渐变 */
    border-top: 1px solid #eee; 
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center;
    box-sizing: border-box; 
    flex-shrink: 0; /* 防止操作区被压缩 */
    z-index: 2; /* 确保在内容滚动之上 */
}
    
/* 举报按钮样式 - 更低调 */
.user-info-popup .popup-actions .report-user-btn {
    background-color: transparent; /* 透明背景 */
    border: none; /* 无边框 */
    color: #8e8e8e; /* 灰色文字 */
    padding: 8px 10px; /* 调整内边距 */
    border-radius: 8px; 
    cursor: pointer;
    font-size: 13px; /* 减小字体 */
    display: inline-flex !important; 
    align-items: center !important; 
    font-weight: 500;
    text-decoration: none; 
    transition: background-color 0.2s ease, color 0.2s ease;
    order: 1; /* 举报按钮在左 */
}
.user-info-popup .popup-actions .report-user-btn:hover {
    background-color: #f5f5f5; /* 悬停加背景 */
    color: #555;
}
.user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
    color: #8e8e8e; 
    margin-right: 4px; /* 减小图标和文字间距 */
    font-size: 18px; /* 图标大小 */
}
.user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
    color: #555;
}

/* === 关闭按钮新样式 (移至底部) === */
.user-info-popup .popup-actions .popup-close-btn {
    order: 2; /* 关闭按钮在右 */
    background: #e5e5e5; /* 浅灰色背景 */
    color: #555; /* 深灰色图标 */
    border-radius: 20px; /* 圆角长条形 */
    border: none; 
    width: 100px;  /* 增加宽度，变成长条形 */
    height: 40px; /* 调整尺寸 */
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    padding: 0 15px; /* 增加水平内边距 */
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果增强可见性 */
    transform: none; /* 移除之前的 transform */
}

.user-info-popup .popup-actions .popup-close-btn:hover {
    background: #dcdcdc; /* 悬停颜色加深 */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); /* 悬停时增强阴影 */
}

.user-info-popup .popup-actions .popup-close-btn:active {
    transform: scale(0.98); /* 按下缩小 */
    background: #cfcfcf; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* 按下时减弱阴影 */
}

/* 移除旧的波纹效果（如果不需要） */
.user-info-popup .popup-actions .popup-close-btn::after {
     display: none;
}

.user-info-popup .popup-actions .popup-close-btn .material-symbols-outlined {
    font-size: 22px; /* 图标大小 */
    color: inherit; /* 继承按钮颜色 */
    font-variation-settings: 'FILL' 0, 'wght' 500; /* 轮廓、中等粗细 */
    text-shadow: none; /* 移除文字阴影 */
    transition: transform 0.1s ease;
    position: relative;
    margin-right: 5px; /* 图标和文字间距 */
    z-index: 2;
    line-height: 1; /* 确保垂直居中 */
}

/* 添加"关闭"文字 */
.user-info-popup .popup-actions .popup-close-btn::before {
    content: "关闭";
    color: inherit;
    font-size: 15px;
    font-weight: 500;
}

/* 添加英文、日文、俄文、法文版本 */
body.english .user-info-popup .popup-actions .popup-close-btn::before {
    content: "Close";
}

body.japanese .user-info-popup .popup-actions .popup-close-btn::before {
    content: "閉じる";
}

body.russian .user-info-popup .popup-actions .popup-close-btn::before {
    content: "Закрыть";
}

body.french .user-info-popup .popup-actions .popup-close-btn::before {
    content: "Fermer";
}

/* 媒体查询，在小屏幕上调整尺寸 */
@media (max-width: 480px) {
    .user-info-popup .popup-actions .popup-close-btn {
        width: 90px;
        height: 38px;
        padding: 0 12px;
    }
    
    .user-info-popup .popup-actions .popup-close-btn::before {
        font-size: 14px;
    }
    
    .user-info-popup .popup-actions .popup-close-btn .material-symbols-outlined {
        font-size: 20px;
        margin-right: 4px;
    }
}

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: #FF4747; /* Match hover color when liked */
    transform: scale(1.1); /* Slight scale when liked */
}

/* === 恢复小心心装饰 === */
.user-info-popup .popup-content::after {
    content: '';
    position: absolute;
    /* bottom: 90px; */ /* 旧位置 */
    /* right: 25px; */ /* 旧位置 */
    top: 20px;    /* 移到右上角 */
    right: 20px;   /* 靠右 */
    width: 40px;    /* 缩小一点 */
    height: 40px;   /* 缩小一点 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,182,193,0.45)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); 
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9; /* 稍微调高一点透明度 */
    transform: rotate(-10deg); /* 调整旋转角度 */
    pointer-events: none; 
    z-index: 0; 
}

/* === 新增"生命之流"装饰 === */
.user-info-popup .popup-content::before {
    content: '';
    position: absolute;
    top: 15%; /* 大约从顶部 15% 开始 */
    left: 10px; /* 靠左侧 */
    width: 3px; /* 很细的线条 */
    height: 70%; /* 占据大部分高度 */
    background: linear-gradient(to bottom, rgba(184, 134, 11, 0), rgba(184, 134, 11, 0.3), rgba(184, 134, 11, 0)); /* 暗金色渐变 */
    border-radius: 3px; /* 圆角形成曲线感 */
    opacity: 0.7;
    pointer-events: none;
    z-index: 0; /* 在内容之下 */
    filter: blur(1px); /* 轻微模糊增加柔和感 */
}
/* ===================== */

/* 标签 (.profile-label) 样式 - 调整对齐和大小 */
.user-info-popup .profile-label {
    display: inline-flex;
    align-items: center; /* 确保垂直居中 */
    gap: 6px; /* 减小图标和文字间距 */
    font-size: 13.5px; /* 略微减小字体大小 */
    color: #A0522D; 
    font-weight: 500;
    flex-shrink: 0; /* 保持不压缩，如有必要调整下方min-width */
    min-width: 95px; /* 可微调此值以适应长标签 */
    text-align: left;
    font-family: inherit;
}
.user-info-popup .profile-label-icon {
    font-size: 19px; /* 调整图标大小与文字协调 */
    color: #B8860B; 
    line-height: 1; /* 确保图标行高不影响对齐 */
}

/* 值 (.info-value & .info-value-container) 样式 - 调整大小 */
.user-info-popup .info-value {
    font-size: 14.5px; /* 略微减小字体大小 */
    color: #5C3317; 
    font-weight: 400; 
    text-align: right;
    word-break: break-word; /* 确保长值换行 */
    font-family: inherit;
    line-height: 1.4; /* 增加行高改善长文本可读性 */
}
.user-info-popup .info-value-container {
    /* ... 保留 flex, align, justify ... */
    color: #5C3317;
    font-size: 14.5px; /* 保持一致 */
    font-weight: 400;
    font-family: inherit;
    line-height: 1.4;
}
/* ... .info-value-mbti 和 .verified-badge 样式保留 ... */

/* === 特定语言手写体恢复 - 修正选择器 === */
/* 将手写体应用到标签和值的容器，而不是所有 span */
body.english .user-info-popup .profile-label,
body.english .user-info-popup .info-value,
body.english .user-info-popup .info-value-container,
body.russian .user-info-popup .profile-label,
body.russian .user-info-popup .info-value,
body.russian .user-info-popup .info-value-container,
body.french .user-info-popup .profile-label,
body.french .user-info-popup .info-value,
body.french .user-info-popup .info-value-container {
    font-family: 'Caveat', 'Dancing Script', cursive !important; 
}
/* 为手写体微调大小和行高 (保持不变) */
body.english .user-info-popup .profile-label,
body.russian .user-info-popup .profile-label,
body.french .user-info-popup .profile-label {
    font-size: 16px; 
    align-items: baseline; /* 保持基线对齐 */
}
body.english .user-info-popup .info-value,
body.english .user-info-popup .info-value-container,
body.russian .user-info-popup .info-value,
body.russian .user-info-popup .info-value-container,
body.french .user-info-popup .info-value,
body.french .user-info-popup .info-value-container {
    font-size: 17px; 
    line-height: 1.5; 
}

/* === 新增：强制图标字体 === */
.user-info-popup .profile-label-icon {
    font-family: 'Material Symbols Outlined' !important; /* 强制使用图标字体 */
    /* 确保其他图标样式不受影响 */
    font-size: 19px; 
    color: #B8860B; 
    line-height: 1; 
    vertical-align: middle; /* 尝试 middle 对齐 */
}
/* ========================== */

/* ... 移除旧 .profile-details 样式规则保留 ... */

/* 底部操作区域和按钮样式 */
/* ... .popup-actions 和 .report-user-btn 样式保留 ... */

/* === End: 全新 Profile Details 设计 === */

/* --- SweetAlert2 Customization (New Warm Theme) --- */
.swal2-popup {
    background: linear-gradient(180deg, #FFFFF0 90%, #FFF0E1 100%) !important; /* 弹窗背景 */
    color: #5C3317 !important; /* 主要文字颜色 */
    border-radius: 15px !important; 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; 
    box-shadow: 0 5px 20px rgba(139, 69, 19, 0.15) !important;
    border: 1px solid rgba(139, 69, 19, 0.1);
}
.swal2-title {
    color: #8B0000 !important; /* 标题用暗红色 */
    font-weight: 600 !important;
}
.swal2-html-container {
    color: #5C3317 !important; /* 内容文字颜色 */
}
.swal2-confirm {
    background-color: #A0522D !important; /* 确认按钮用暖棕色 */
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(160, 82, 45, 0.3) !important;
    transition: background-color 0.2s ease !important;
}
.swal2-confirm:hover {
    background-color: #8B4513 !important; /* 悬停加深 */
}
.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.2) !important;
}
.swal2-cancel {
    background-color: #f0e6d2 !important; /* 取消按钮用米色 */
    color: #8B7D6B !important; /* 文字用棕灰色 */
    border-radius: 8px !important;
    border: 1px solid #dcd0b9 !important;
    transition: background-color 0.2s ease !important;
}
.swal2-cancel:hover {
    background-color: #e6dbc6 !important;
}
.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(220, 208, 185, 0.4) !important;
}
.swal2-icon.swal2-warning {
    border-color: #FFCC80 !important; /* 警告图标边框用橙色 */
    color: #FFA726 !important; /* 警告图标颜色用橙色 */
}
.swal2-icon.swal2-success {
    /* 可以保持之前的绿色，或者用暖绿色 */
    border-color: rgba(85, 139, 47, 0.3) !important; 
    color: #558B2F !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #558B2F !important;
}
/* 移除之前的 SweetAlert 黑色主题 */
/* .swal2-popup { background-color: #333 !important; ... } */

/* Style for liked state */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: #FF4747; /* Match hover color when liked */
    transform: scale(1.1); /* Slight scale when liked */
}

/* 当profile overlay打开时锁定页面滚动 */
body.profile-overlay-open {
    overflow: hidden; /* Keep this */
    /* position: fixed; Remove this */ 
    width: 100%; /* Keep this if needed, but often unnecessary with just overflow:hidden */
    height: 100%; /* Keep this if needed */
    /* touch-action: none; 删除这行以允许滑动 */
    /* -webkit-overflow-scrolling: none; 删除这行以允许滑动 */
}

/* 允许fate-content区域内的滑动，即使profile-overlay处于打开状态 */
body.profile-overlay-open #fate-content {
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
}

/* 允许tarot-container和fate-analysis-container内的滑动 */
body.profile-overlay-open .tarot-container,
body.profile-overlay-open .fate-analysis-container {
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
}

/* 增强fate-content区域的滑动体验 */
#fate-content {
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important; /* 减去底部导航和顶部的高度 */
}

/* 确保fate-content内部容器也可以滚动 */
#fate-content .fate-container {
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 为移动设备额外增强的滚动锁定 - 也移除 position:fixed */
@media (max-width: 768px) {
    body.profile-overlay-open {
        /* position: fixed; Remove this */
        /* left: 0; Remove this */
        /* top: 0; Remove this */
        /* right: 0; Remove this */
        /* bottom: 0; Remove this */
        /* overflow: hidden; is already set in the base rule */
    }
}

/* 覆盖所有旧的liked状态样式，确保应用我们的新设计效果 */
.overlay-controls .like-button.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1 !important; 
    color: #FF4773 !important;
    transform: scale(1.15) !important;
    animation: pulseLike 1.5s infinite alternate !important;
    text-shadow: 0 0 15px rgba(255, 71, 115, 0.6) !important;
}

/* 添加按钮点击的粒子效果 */
.overlay-controls button.clicked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: particleEffect 0.8s ease-out forwards;
    z-index: 2;
    pointer-events: none;
}

@keyframes particleEffect {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}

.match-heart-icon {
    font-size: 30px; /* Adjust size */
    color: #ff4d4d; /* Heart color */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s, opacity 0.3s ease 0.5s; /* Pop effect after avatars */
}



@keyframes heartBeat {
    from { transform: translate(-50%, -50%) scale(1.1); }
    to { transform: translate(-50%, -50%) scale(1.3); }
}

    /* Simple Sparkle Effect (Optional) */
    /* Add more sophisticated particle effects using JS if needed */
    .match-sparkles::before,
    .match-sparkles::after {
        content: '✨'; /* Or use background images */
        position: absolute;
        font-size: 20px;
        opacity: 0;
        animation: sparkle 1.5s ease-out 0.8s infinite;
    }

    .match-sparkles::before {
        top: 20%;
        left: 15%;
        animation-delay: 0.9s;
    }

    .match-sparkles::after {
        top: 30%;
        right: 20%;
        animation-delay: 1.2s;
    }

    @keyframes sparkle {
        0% { transform: scale(0.5) rotate(0deg); opacity: 0; }
        50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
        100% { transform: scale(0.5) rotate(360deg); opacity: 0; }
    }

    /* Class to prevent body scrolling */
    body.no-scroll {
        overflow: hidden;
    }


    /* 弹窗整体 */
    .user-info-popup {
        background: linear-gradient(180deg, #fdfdfd 0%, #f9f9f9 100%); /* 非常浅的灰色渐变 */
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* 使用系统默认字体 */
        border-radius: 28px 28px 0 0; /* 更大的圆角 */
        box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
        /* 保持其他原有样式: position, bottom, left, width, max-height, transform, transition, z-index, display, flex-direction, overflow */
    }

    /* 内容区域 */
    .user-info-popup .popup-content {
        background: none; /* 确保透明 */
        padding: 15px 20px calc(65px + env(safe-area-inset-bottom, 10px)); /* 调整内边距，为底部按钮留足空间并适配安全区 */
    overflow-y: auto;
    flex-grow: 1;
        position: relative; /* For potential future absolute positioned elements inside */
        z-index: 1;
    }
    /* 移除旧的装饰性伪元素 */
    .user-info-popup .popup-content::before,
    .user-info-popup .popup-content::after {
        display: none;
    }

    /* 可选：如果保留 Header */
    .user-info-popup .popup-header {
        padding: 16px 20px 12px;
        border-bottom: 1px solid #f0f0f0; /* 更浅的分隔线 */
        flex-shrink: 0;
    }
    .user-info-popup .popup-title {
        color: #2c2c2e; /* iOS 深灰色 */
        font-weight: 600;
        font-size: 17px; /* iOS 标题大小 */
    }

    /* Profile Details 容器 */
    .user-info-popup .profile-details {
        display: flex; /* 改为 flex 布局 */
        flex-direction: column; /* 垂直排列 */
        gap: 0; /* 移除 gap，由 item 的 border 控制间距 */
        padding-top: 10px;
    }

    /* 移除卡片样式 */
    .user-info-popup .profile-item-card {
        display: none; /* 或直接删除对应的 CSS 规则 */
    }

    /* 信息项 */
    .user-info-popup .profile-item {
    background: none; 
        padding: 14px 0; /* 上下内边距 */
    border: none;
    box-shadow: none;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0; /* 更浅的分隔线 */
        transition: background-color 0.2s ease;
    }
    .user-info-popup .profile-item:last-child {
        border-bottom: none;
    }
    /* 微妙的列表项点击反馈 */
    .user-info-popup .profile-item:active {
        background-color: #f5f5f7; /* iOS 列表项按下背景色 */
    }

    /* 标签 */
    .user-info-popup .profile-label {
        display: inline-flex;
        align-items: center;
        gap: 10px; /* 图标与文字间距 */
        font-size: 15px; /* 调整字体大小 */
        color: #3c3c43; /* iOS 文本色 (略深) */
        opacity: 0.9;
        font-weight: 400; /* Normal */
        flex-shrink: 0;
        text-align: left;
        font-family: inherit;
        margin-bottom: 0; /* 覆盖旧样式 */
    }
    .user-info-popup .profile-label-icon {
        font-size: 20px; /* 调整图标大小 */
        color: #8e8e93; /* iOS 次要文本/图标色 */
        width: 22px; /* 固定宽度 */
        text-align: center;
        line-height: 1;
        font-family: 'Material Symbols Outlined' !important; /* 强制图标字体 */
        vertical-align: middle; /* 尝试垂直居中 */
    }

    /* 值 */
    .user-info-popup .info-value {
        font-size: 15px;
        color: #8e8e93; /* iOS 次要文本色 */
        font-weight: 400;
        flex-grow: 1;
        word-break: break-word;
        text-align: right;
        font-family: inherit;
        margin-left: 10px;
        line-height: 1.4;
    }
    .user-info-popup .info-value-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-grow: 1;
        color: #8e8e93;
        font-size: 15px;
        font-weight: 400;
        font-family: inherit;
        line-height: 1.4;
        margin-left: 10px;
        text-align: right;
    }
    .user-info-popup .info-value-container .info-value {
        margin-right: 6px;
        margin-left: 0;
        text-align: right;
    }
    /* MBTI 值特殊强调 */
    .user-info-popup .info-value-mbti {
        font-weight: 500; /* Medium */
        color: #007AFF; /* iOS 蓝色 */
    }

    /* 验证徽章 */
    .user-info-popup .verified-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #34C759; /* iOS 绿色 */
        font-size: 18px;
        position: relative;
    }
    .user-info-popup .verified-badge .material-symbols-outlined {
        font-size: inherit;
        font-variation-settings: 'FILL' 1;
    }

    /* 移除特定语言的手写字体覆盖 */
    body.english .user-info-popup .profile-label,
    body.english .user-info-popup .info-value,
    body.english .user-info-popup .info-value-container,
    body.russian .user-info-popup .profile-label,
    body.russian .user-info-popup .info-value,
    body.russian .user-info-popup .info-value-container,
    body.french .user-info-popup .profile-label,
    body.french .user-info-popup .info-value,
    body.french .user-info-popup .info-value-container {
        font-family: inherit !important; /* 恢复继承默认字体 */
        font-size: inherit !important; /* 恢复继承字体大小 */
        line-height: inherit !important; /* 恢复继承行高 */
        align-items: center !important; /* 恢复垂直居中 */
    }

    /* 底部操作区 */
    .user-info-popup .popup-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); /* 适配底部安全区 */
        background: #ffffff; /* 白色背景 */
        border-top: 1px solid #f0f0f0; /* 更浅的分隔线 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
        z-index: 2;
    }

    /* 举报按钮 - 低调 */
    .user-info-popup .popup-actions .report-user-btn {
        background-color: transparent;
        border: none;
        color: #8e8e93; /* iOS 次要文本色 */
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        display: inline-flex !important;
        align-items: center !important;
        font-weight: 400; /* Normal */
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        order: 1;
    }
    .user-info-popup .popup-actions .report-user-btn:hover {
        background-color: #f5f5f7; /* 悬停/按下背景 */
        color: #6c6c70;
    }
    .user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
        color: #8e8e93;
        margin-right: 4px;
        font-size: 18px;
        font-variation-settings: 'FILL' 0;
    }
    .user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
        color: #6c6c70;
    }

    /* 关闭按钮 - iOS 风格 */
    .user-info-popup .popup-actions .popup-close-btn {
        order: 2;
        background: #e5e5ea; /* iOS 灰色按钮背景 */
        color: #3c3c43; /* iOS 深灰色图标 */
        border-radius: 20px; /* 圆角长条形 */
        border: none;
        width: 100px; /* 增加宽度，变成长条形 */
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease;
        padding: 0 15px; /* 增加水平内边距 */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
        transform: none;
    }

    .user-info-popup .popup-actions .popup-close-btn:hover {
        background: #dcdce0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    }

    .user-info-popup .popup-actions .popup-close-btn:active {
        transform: scale(0.95);
        background: #d1d1d6;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .user-info-popup .popup-actions .popup-close-btn .material-symbols-outlined {
        font-size: 20px; /* 调整图标大小 */
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 600; /* 轮廓、稍粗 */
        text-shadow: none;
        line-height: 1;
        margin-right: 5px; /* 图标和文字间距 */
    }

    /* 添加"关闭"文字 */
    .user-info-popup .popup-actions .popup-close-btn::before {
        content: "关闭";
        color: inherit;
        font-size: 15px;
        font-weight: 500;
    }

    /* 移除旧的/冲突的 .profile-details 样式 (再次确认) */
    .profile-details:not(.me-style-profile-details), /* 仅移除旧版，保留新版 */
    .profile-details .profile-detail-lips,
    .profile-details::after {
        /* Reset potentially conflicting old styles */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        font-family: inherit !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        text-align: inherit !important;
        transform: none !important;
        margin: 0 !important; /* Reset margins */
        padding: 0 !important; /* Reset paddings */
        letter-spacing: inherit !important;
        text-shadow: none !important;
        /* display: block; */ /* Removed, let new rules handle display */
    }

    /* === End: 全新 Profile Details 设计 === */

    /* === 全新 Profile Details 设计 (高贵 & 高端) === */

    /* 定义颜色和字体变量 (可选, 方便维护) */
    :root {
        --popup-bg: #1f1f1f; /* 深炭灰背景 */
        --popup-text-primary: #e0e0e0; /* 主要文字 (值) */
        --popup-text-secondary: #aaaaaa; /* 次要文字 (图标, 举报) */
        --popup-accent: #bda58b; /* 点缀色 (标签, 分隔线, 关闭图标) - 哑光金 */
        --popup-font-serif: 'Playfair Display', serif;
        --popup-font-sans: 'Lato', sans-serif;
        --popup-verified-green: #2E7D32; /* 深邃的认证绿 */
    }

    /* 弹窗整体 */
    .user-info-popup {
        background: var(--popup-bg);
        font-family: var(--popup-font-sans); /* 默认使用无衬线 */
        color: var(--popup-text-primary);
        border-radius: 26px 26px 0 0; /* 保持或微调圆角 */
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3); /* 调整阴影适应深色背景 */
        /* backdrop-filter: blur(15px) saturate(180%); */ /* 可选的磨砂玻璃效果 */
        /* -webkit-backdrop-filter: blur(15px) saturate(180%); */
        /* background: rgba(31, 31, 31, 0.85); */ /* 若使用 backdrop-filter，则背景需要透明度 */
        /* 保持其他原有样式: position, bottom, left, width, max-height, transform, transition, z-index, display, flex-direction, overflow */
    }

    /* 内容区域 */
    .user-info-popup .popup-content {
        background: none;
        padding: 20px 25px calc(70px + env(safe-area-inset-bottom, 15px)); /* 增加内边距和底部空间 */
        overflow-y: auto;
        flex-grow: 1;
        position: relative;
        z-index: 1;
        /* 滚动条样式 (适配深色) */
        scrollbar-width: thin;
        scrollbar-color: #555 var(--popup-bg);
    }
    .user-info-popup .popup-content::-webkit-scrollbar {
        width: 6px;
    }
    .user-info-popup .popup-content::-webkit-scrollbar-track {
        background: var(--popup-bg);
    }
    .user-info-popup .popup-content::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 3px;
        border: 1px solid var(--popup-bg);
    }
    .user-info-popup .popup-content::-webkit-scrollbar-thumb:hover {
        background-color: #777;
    }

    /* 移除旧的装饰性伪元素 */
    .user-info-popup .popup-content::before,
    .user-info-popup .popup-content::after {
        display: none;
    }

    /* 可选：如果保留 Header */
    .user-info-popup .popup-header {
        padding: 18px 25px 14px;
        border-bottom: 1px solid rgba(189, 165, 139, 0.2); /* 使用点缀色的透明色作为分隔线 */
        flex-shrink: 0;
        background: rgba(0,0,0,0.1); /* 页头稍微深一点 */
    }
    .user-info-popup .popup-title {
        color: var(--popup-text-primary);
        font-weight: 600; /* 或者用 serif 字体 */
        font-size: 18px;
        /* font-family: var(--popup-font-serif); */
    }

    /* Profile Details 容器 */
.user-info-popup .profile-details {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 15px;
    }

    /* 移除卡片样式 (再次确认) */
    .user-info-popup .profile-item-card {
        display: none;
    }

    /* 信息项 */
.user-info-popup .profile-item {
        background: none;
        padding: 18px 0; /* 增大垂直内边距 */
        border: none;
        box-shadow: none;
    display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(189, 165, 139, 0.2); /* 点缀色分隔线 */
        transition: none; /* 移除 hover/active 效果，保持稳重 */
}
.user-info-popup .profile-item:last-child {
        border-bottom: none;
}
    .user-info-popup .profile-item:active {
         background-color: transparent; /* 明确移除 active 效果 */
}

    /* 标签 */
.user-info-popup .profile-label {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--popup-accent); /* 点缀色 */
        font-weight: 400; /* Serif 字体通常不需要太粗 */
        font-family: var(--popup-font-serif); /* 使用衬线字体 */
    flex-shrink: 0; 
        text-align: left;
    margin-bottom: 0;
        opacity: 0.9;
}
.user-info-popup .profile-label-icon {
        font-size: 20px;
        color: var(--popup-accent); /* 点缀色 */
        opacity: 0.8; /* 图标稍微柔和一点 */
        width: 22px;
        text-align: center;
        line-height: 1;
        font-family: 'Material Symbols Outlined' !important;
        font-variation-settings: 'wght' 300; /* 更细的图标 */
        vertical-align: middle;
    }

    /* 值 */
.user-info-popup .info-value {
        font-size: 16px;
        color: var(--popup-text-primary);
        font-weight: 400;
        font-family: var(--popup-font-sans);
    flex-grow: 1; 
    word-break: break-word;
        text-align: right;
        margin-left: 15px;
        line-height: 1.5;
}
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
        justify-content: flex-end;
    flex-grow: 1; 
        color: var(--popup-text-primary);
        font-size: 16px;
    font-weight: 400;
        font-family: var(--popup-font-sans);
        line-height: 1.5;
        margin-left: 15px;
        text-align: right;
}
.user-info-popup .info-value-container .info-value {
        margin-right: 8px;
        margin-left: 0;
        text-align: right;
    }
    /* MBTI 值特殊强调 */
    .user-info-popup .info-value-mbti {
        font-weight: 700; /* 加粗 */
        color: var(--popup-text-primary); /* 保持主文字颜色，或其他低调强调色 */
        /* letter-spacing: 0.5px; */ /* 可选：增加字间距 */
    }

    /* 验证徽章 */
.user-info-popup .verified-badge {
        display: inline-flex;
    align-items: center;
    justify-content: center;
        color: var(--popup-verified-green); /* 使用定义的深绿色 */
        font-size: 18px;
        position: relative;
        /* filter: drop-shadow(0 0 3px rgba(46, 125, 50, 0.5)); */ /* 可选：添加微光 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
        font-size: inherit;
        font-variation-settings: 'FILL' 1;
    }

    /* 移除特定语言的手写字体覆盖 (再次确认) */
    body.english .user-info-popup .profile-label,
    body.english .user-info-popup .info-value,
    body.english .user-info-popup .info-value-container,
    body.russian .user-info-popup .profile-label,
    body.russian .user-info-popup .info-value,
    body.russian .user-info-popup .info-value-container,
    body.french .user-info-popup .profile-label,
    body.french .user-info-popup .info-value,
    body.french .user-info-popup .info-value-container {
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        align-items: center !important;
    }

    /* 底部操作区 */
    .user-info-popup .popup-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 25px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(0,0,0,0.2); /* 比主背景稍深 */
        border-top: 1px solid rgba(189, 165, 139, 0.15); /* 更细的点缀色分隔线 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
        z-index: 2;
    }

    /* 举报按钮 - 极简 */
    .user-info-popup .popup-actions .report-user-btn {
        background-color: transparent;
        border: none;
        color: var(--popup-text-secondary); /* 次要文字色 */
        padding: 8px 0; /* 移除左右 padding */
        border-radius: 0;
        cursor: pointer;
        font-size: 13px;
        font-family: var(--popup-font-sans);
        display: inline-flex !important;
        align-items: center !important;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.2s ease;
        order: 1;
    }
    .user-info-popup .popup-actions .report-user-btn:hover {
        color: var(--popup-text-primary); /* hover 时变亮 */
        background-color: transparent; /* 确保无背景 */
    }
    .user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
        color: inherit; /* 继承按钮颜色 */
        margin-right: 5px;
        font-size: 17px;
        font-variation-settings: 'FILL' 0, 'wght' 300;
    }
    .user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
        color: inherit;
    }

    /* 关闭按钮 - 极简图标 */
    .user-info-popup .popup-actions .popup-close-btn {
        order: 2;
        background: rgba(255, 255, 255, 0.12);
        color: var(--popup-accent); /* 点缀色 */
        border-radius: 20px; /* 圆角长条形 */
        border: none;
        width: 100px; /* 增加宽度，变成长条形 */
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease, color 0.2s ease;
        padding: 0 15px; /* 增加水平内边距 */
        box-shadow: none;
        transform: none;
    }

    .user-info-popup .popup-actions .popup-close-btn:hover {
        background: rgba(255, 255, 255, 0.18); /* 轻微背景反馈 */
        color: var(--popup-text-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .user-info-popup .popup-actions .popup-close-btn:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.1);
    }

    .user-info-popup .popup-actions .popup-close-btn .material-symbols-outlined {
        font-size: 22px; /* 更大的关闭图标 */
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 400;
        text-shadow: none;
        line-height: 1;
        margin-right: 5px; /* 图标和文字间距 */
    }

    /* 添加"关闭"文字 */
    .user-info-popup .popup-actions .popup-close-btn::before {
        content: "关闭";
        color: inherit;
        font-size: 15px;
        font-weight: 500;
    }

    /* 再次移除/覆盖旧的 .profile-details 样式 (确保) */
    .profile-details, 
    .profile-details .profile-item, 
    .profile-details .profile-label, 
    .profile-details .profile-value,
.profile-details .profile-detail-lips, 
.profile-details::after {
        /* Reset potentially conflicting old styles (redundant but safe) */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        font-family: inherit !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        text-align: inherit !important;
        transform: none !important;
        margin: 0 !important; /* Reset margins */
        padding: 0 !important; /* Reset paddings */
        letter-spacing: inherit !important;
        text-shadow: none !important;
        /* display: block; */ /* Removed, let new rules handle display */
    }

    /* === End: 全新 Profile Details 设计 === */

    /* === 全新 Profile Details 设计 (高贵 & 高端) === */

    /* 定义颜色和字体变量 (可选, 方便维护) */
    :root {
        --popup-bg: #1f1f1f; /* 深炭灰背景 */
        --popup-text-primary: #e0e0e0; /* 主要文字 (值) */
        --popup-text-secondary: #aaaaaa; /* 次要文字 (图标, 举报) */
        --popup-accent: #bda58b; /* 点缀色 (标签, 分隔线, 关闭图标) - 哑光金 */
        --popup-font-serif: 'Playfair Display', serif;
        --popup-font-sans: 'Lato', sans-serif;
        --popup-verified-green: #2E7D32; /* 深邃的认证绿 */
    }

    /* 弹窗整体 */
    .user-info-popup {
        background: var(--popup-bg);
        font-family: var(--popup-font-sans); /* 默认使用无衬线 */
        color: var(--popup-text-primary);
        border-radius: 26px 26px 0 0; /* 保持或微调圆角 */
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3); /* 调整阴影适应深色背景 */
        /* backdrop-filter: blur(15px) saturate(180%); */ /* 可选的磨砂玻璃效果 */
        /* -webkit-backdrop-filter: blur(15px) saturate(180%); */
        /* background: rgba(31, 31, 31, 0.85); */ /* 若使用 backdrop-filter，则背景需要透明度 */
        /* 保持其他原有样式: position, bottom, left, width, max-height, transform, transition, z-index, display, flex-direction, overflow */
    }

    /* 内容区域 */
    .user-info-popup .popup-content {
        background: none;
        padding: 20px 25px calc(70px + env(safe-area-inset-bottom, 15px)); /* 增加内边距和底部空间 */
        overflow-y: auto;
        flex-grow: 1;
        position: relative;
        z-index: 1;
        /* 滚动条样式 (适配深色) */
        scrollbar-width: thin;
        scrollbar-color: #555 var(--popup-bg);
    }
    .user-info-popup .popup-content::-webkit-scrollbar {
        width: 6px;
    }
    .user-info-popup .popup-content::-webkit-scrollbar-track {
        background: var(--popup-bg);
    }
    .user-info-popup .popup-content::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 3px;
        border: 1px solid var(--popup-bg);
    }
    .user-info-popup .popup-content::-webkit-scrollbar-thumb:hover {
        background-color: #777;
    }

    /* 移除旧的装饰性伪元素 */
    .user-info-popup .popup-content::before,
    .user-info-popup .popup-content::after {
        display: none;
    }

    /* 可选：如果保留 Header */
    .user-info-popup .popup-header {
        padding: 18px 25px 14px;
        border-bottom: 1px solid rgba(189, 165, 139, 0.2); /* 使用点缀色的透明色作为分隔线 */
        flex-shrink: 0;
        background: rgba(0,0,0,0.1); /* 页头稍微深一点 */
    }
    .user-info-popup .popup-title {
        color: var(--popup-text-primary);
        font-weight: 600; /* 或者用 serif 字体 */
        font-size: 18px;
        /* font-family: var(--popup-font-serif); */
    }

    /* Profile Details 容器 */
.user-info-popup .profile-details {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 15px;
    }

    /* 移除卡片样式 (再次确认) */
    .user-info-popup .profile-item-card {
        display: none;
    }

    /* 信息项 */
.user-info-popup .profile-item {
        background: none;
        padding: 18px 0; /* 增大垂直内边距 */
        border: none;
        box-shadow: none;
    display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(189, 165, 139, 0.2); /* 点缀色分隔线 */
        transition: none; /* 移除 hover/active 效果，保持稳重 */
}
.user-info-popup .profile-item:last-child {
        border-bottom: none;
}
    .user-info-popup .profile-item:active {
         background-color: transparent; /* 明确移除 active 效果 */
}

    /* 标签 */
.user-info-popup .profile-label {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--popup-accent); /* 点缀色 */
        font-weight: 400; /* Serif 字体通常不需要太粗 */
        font-family: var(--popup-font-serif); /* 使用衬线字体 */
    flex-shrink: 0; 
        text-align: left;
    margin-bottom: 0;
        opacity: 0.9;
}
.user-info-popup .profile-label-icon {
        font-size: 20px;
        color: var(--popup-accent); /* 点缀色 */
        opacity: 0.8; /* 图标稍微柔和一点 */
        width: 22px;
        text-align: center;
        line-height: 1;
        font-family: 'Material Symbols Outlined' !important;
        font-variation-settings: 'wght' 300; /* 更细的图标 */
        vertical-align: middle;
    }

    /* 值 */
.user-info-popup .info-value {
        font-size: 16px;
        color: var(--popup-text-primary);
        font-weight: 400;
        font-family: var(--popup-font-sans);
    flex-grow: 1; 
    word-break: break-word;
        text-align: right;
        margin-left: 15px;
        line-height: 1.5;
}
.user-info-popup .info-value-container {
    display: flex; 
    align-items: center; 
        justify-content: flex-end;
    flex-grow: 1; 
        color: var(--popup-text-primary);
        font-size: 16px;
    font-weight: 400;
        font-family: var(--popup-font-sans);
        line-height: 1.5;
        margin-left: 15px;
        text-align: right;
}
.user-info-popup .info-value-container .info-value {
        margin-right: 8px;
        margin-left: 0;
        text-align: right;
    }
    /* MBTI 值特殊强调 */
    .user-info-popup .info-value-mbti {
        font-weight: 700; /* 加粗 */
        color: var(--popup-text-primary); /* 保持主文字颜色，或其他低调强调色 */
        /* letter-spacing: 0.5px; */ /* 可选：增加字间距 */
    }

    /* 验证徽章 */
.user-info-popup .verified-badge {
        display: inline-flex;
    align-items: center;
    justify-content: center;
        color: var(--popup-verified-green); /* 使用定义的深绿色 */
        font-size: 18px;
        position: relative;
        /* filter: drop-shadow(0 0 3px rgba(46, 125, 50, 0.5)); */ /* 可选：添加微光 */
}
.user-info-popup .verified-badge .material-symbols-outlined {
        font-size: inherit;
        font-variation-settings: 'FILL' 1;
    }

    /* 移除特定语言的手写字体覆盖 (再次确认) */
    body.english .user-info-popup .profile-label,
    body.english .user-info-popup .info-value,
    body.english .user-info-popup .info-value-container,
    body.russian .user-info-popup .profile-label,
    body.russian .user-info-popup .info-value,
    body.russian .user-info-popup .info-value-container,
    body.french .user-info-popup .profile-label,
    body.french .user-info-popup .info-value,
    body.french .user-info-popup .info-value-container {
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        align-items: center !important;
    }

    /* 底部操作区 */
    .user-info-popup .popup-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 25px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(0,0,0,0.2); /* 比主背景稍深 */
        border-top: 1px solid rgba(189, 165, 139, 0.15); /* 更细的点缀色分隔线 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
        z-index: 2;
    }

    /* 举报按钮 - 极简 */
    .user-info-popup .popup-actions .report-user-btn {
        background-color: transparent;
        border: none;
        color: var(--popup-text-secondary); /* 次要文字色 */
        padding: 8px 0; /* 移除左右 padding */
        border-radius: 0;
        cursor: pointer;
        font-size: 13px;
        font-family: var(--popup-font-sans);
        display: inline-flex !important;
        align-items: center !important;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.2s ease;
        order: 1;
    }
    .user-info-popup .popup-actions .report-user-btn:hover {
        color: var(--popup-text-primary); /* hover 时变亮 */
        background-color: transparent; /* 确保无背景 */
    }
    .user-info-popup .popup-actions .report-user-btn .material-symbols-outlined {
        color: inherit; /* 继承按钮颜色 */
        margin-right: 5px;
        font-size: 17px;
        font-variation-settings: 'FILL' 0, 'wght' 300;
    }
    .user-info-popup .popup-actions .report-user-btn:hover .material-symbols-outlined {
        color: inherit;
    }

    /* 关闭按钮 - 极简图标 */
    .user-info-popup .popup-actions .popup-close-btn {
        order: 2;
        background: rgba(255, 255, 255, 0.12);
        color: var(--popup-accent); /* 点缀色 */
        border-radius: 20px; /* 圆角长条形 */
        border: none;
        width: 100px; /* 增加宽度，变成长条形 */
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease, color 0.2s ease;
        padding: 0 15px; /* 增加水平内边距 */
        box-shadow: none;
        transform: none;
    }

    .user-info-popup .popup-actions .popup-close-btn:hover {
        background: #dcdce0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    }

    .user-info-popup .popup-actions .popup-close-btn:active {
        transform: scale(0.95);
        background: #d1d1d6;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .user-info-popup .popup-actions .popup-close-btn .material-symbols-outlined {
        font-size: 20px; /* 调整图标大小 */
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 600; /* 轮廓、稍粗 */
        text-shadow: none;
        line-height: 1;
        margin-right: 5px; /* 图标和文字间距 */
    }

    /* 添加"关闭"文字 */
    .user-info-popup .popup-actions .popup-close-btn::before {
        content: "关闭";
        color: inherit;
        font-size: 15px;
        font-weight: 500;
    }

    /* 再次移除/覆盖旧的 .profile-details 样式 (确保) */
    .profile-details:not(.me-style-profile-details), /* 仅移除旧版，保留新版 */
    .profile-details .profile-detail-lips,
    .profile-details::after {
        /* Reset potentially conflicting old styles */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        font-family: inherit !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        text-align: inherit !important;
        transform: none !important;
        margin: 0 !important; /* Reset margins */
        padding: 0 !important; /* Reset paddings */
        letter-spacing: inherit !important;
        text-shadow: none !important;
        display: none !important; /* 彻底隐藏旧结构相关元素 */
    }

    /* === End: User Info Popup - Me Page Style === */

    /* 修复移动端用户信息弹窗中按钮与内容重叠的问题 */
    @media (max-width: 768px) {
        .user-info-popup .popup-content {
            padding-bottom: 80px; /* 增加底部内边距，为按钮腾出空间 */
        }
        
        .user-info-popup .popup-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 10;
            padding: 12px 16px;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
    }

    /* 为小屏幕设备进一步优化 */
    @media (max-width: 480px) {
        .user-info-popup .me-form-group:last-child {
            margin-bottom: 30px; /* 确保最后一个表单项与底部按钮有足够距离 */
        }
        
        .user-info-popup .popup-actions {
            padding: 10px;
        }
        
        .user-info-popup .popup-actions .report-user-btn,
        .user-info-popup .popup-actions .popup-close-btn {
            padding: 8px 12px;
        }
    }

    /* 调整国籍字段在用户信息弹窗中的显示位置 */
    .user-info-popup .me-form-input.profile-value-display {
    display: flex;
        justify-content: flex-end; /* 将内容对齐到右侧 */
        align-items: center;
        text-align: right;
    }

    .user-info-popup .verified-badge {
        margin-left: 5px; /* 给验证标记添加左边距 */
        display: inline-flex;
        align-items: center;
    }

    /* --- SweetAlert2 Customization (Matching Me Page / Popup Light Theme) --- */
    .swal2-popup {
        /* background: linear-gradient(180deg, #FFFFF0 90%, #FFF0E1 100%) !important; */ /* Removed warm theme */
        background: #ffffff !important; /* Clean white background */
        color: #333 !important; /* Default text color */
        border-radius: 14px !important; /* Slightly smaller radius */
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; /* System font */
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1) !important; /* Softer shadow */
        border: 1px solid #f0f0f0 !important; /* Very light border */
        z-index: 10001 !important; /* 设置比profile-overlay更高的z-index */
    }
    
    /* 确保SweetAlert2容器也有更高的z-index */
    .swal2-container {
        z-index: 10002 !important; /* 比.swal2-popup和profile-overlay更高 */
    }
    .swal2-title {
        /* color: #8B0000 !important; */ /* Removed warm theme */
        color: #333 !important; /* Standard dark title */
        font-weight: 600 !important;
        font-size: 18px !important; /* Adjust size */
        padding-top: 20px !important;
    }
    .swal2-html-container {
        /* color: #5C3317 !important; */ /* Removed warm theme */
        color: #555 !important; /* Standard content text */
        font-size: 15px !important;
        margin-bottom: 15px !important;
    }
    .swal2-confirm {
        /* background-color: #A0522D !important; */ /* Removed warm theme */
        background-color: #007AFF !important; /* iOS Blue */
        color: #fff !important;
        border-radius: 8px !important;
        /* box-shadow: 0 2px 5px rgba(160, 82, 45, 0.3) !important; */ /* Removed warm theme shadow */
        box-shadow: 0 2px 5px rgba(0, 122, 255, 0.2) !important; /* Subtle blue shadow */
        transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
        font-weight: 500 !important;
        padding: 10px 20px !important;
    }
    .swal2-confirm:hover {
        /* background-color: #8B4513 !important; */ /* Removed warm theme */
        background-color: #005ecb !important; /* Darker blue on hover */
        box-shadow: 0 3px 8px rgba(0, 122, 255, 0.3) !important;
    }
    .swal2-confirm:focus {
        /* box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.2) !important; */ /* Removed warm theme */
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3) !important; /* Blue focus ring */
    }
    .swal2-cancel {
        /* background-color: #f0e6d2 !important; */ /* Removed warm theme */
        /* color: #8B7D6B !important; */ /* Removed warm theme */
        /* border: 1px solid #dcd0b9 !important; */ /* Removed warm theme */
        background-color: #e5e5ea !important; /* iOS Light Grey Button */
        color: #3c3c43 !important; /* Dark grey text for light grey button */
        border: none !important; /* No border */
        border-radius: 8px !important;
        transition: background-color 0.2s ease !important;
        font-weight: 400 !important;
        padding: 10px 20px !important;
    }
    .swal2-cancel:hover {
        /* background-color: #e6dbc6 !important; */ /* Removed warm theme */
        background-color: #dcdce0 !important; /* Darker grey on hover */
    }
    .swal2-cancel:focus {
        /* box-shadow: 0 0 0 3px rgba(220, 208, 185, 0.4) !important; */ /* Removed warm theme */
        box-shadow: 0 0 0 3px rgba(200, 200, 205, 0.5) !important; /* Grey focus ring */
    }
    .swal2-icon.swal2-warning {
        /* border-color: #FFCC80 !important; */ /* Keep standard warning colors */
        /* color: #FFA726 !important; */
        border-color: #ffcc00 !important; /* iOS Warning Yellow Border */
        color: #ff9500 !important; /* iOS Warning Orange Icon */
    }
    .swal2-icon.swal2-success {
        /* border-color: rgba(85, 139, 47, 0.3) !important; */ /* Keep standard success colors */
        /* color: #558B2F !important; */
        border-color: rgba(52, 199, 89, 0.3) !important; /* iOS Green Border */
        color: #34C759 !important; /* iOS Green Icon */
    }
    .swal2-icon.swal2-success [class^=swal2-success-line] {
        /* background-color: #558B2F !important; */
        background-color: #34C759 !important; /* iOS Green Lines */
    }

    @keyframes floatBubble1 {
        from { transform: translate(0, 0) scale(1); opacity: 0.15; }
        to { transform: translate(15px, 10px) scale(1.1); opacity: 0.2; }
    }

    @keyframes floatBubble2 {
        from { transform: translate(0, 0) scale(1); opacity: 0.12; }
        to { transform: translate(-10px, -15px) scale(1.05); opacity: 0.18; }
    }

    @keyframes heartBeat {
        0%, 100% { transform: translate(-50%, -50%) scale(0.9); }
        50% { transform: translate(-50%, -50%) scale(1.1); }
    }

    @keyframes fadeInHeart {
        from { opacity: 0; }
        to { opacity: 0.9; }
    }

    /* 匹配结果文本 */
    .match-result-text {
        font-size: 1.3rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 30px;
        animation: popIn 0.6s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
    }

    @keyframes popIn {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
    }

    /* 按钮样式 */
    .match-action-btn {
        padding: 14px 30px;
        border: none;
        border-radius: 30px; /* 胶囊形状 */
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.4s ease;
        letter-spacing: 0.3px;
        min-width: 200px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* 简单的闪烁效果 */
    .match-sparkles::before,
    .match-sparkles::after {
        content: '✨'; 
        position: absolute;
        font-size: 20px;
        opacity: 0;
        z-index: 1;
        animation: sparkle 2s ease-out 0.8s infinite;
    }

    .match-sparkles::before {
        top: 20%;
        left: 15%;
        animation-delay: 0.9s;
    }

    .match-sparkles::after {
        top: 30%;
        right: 20%;
        animation-delay: 1.2s;
    }

    @keyframes sparkle {
        0% { transform: scale(0.5) rotate(0deg); opacity: 0; }
        50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
        100% { transform: scale(0.5) rotate(360deg); opacity: 0; }
    }

    /* 多语言支持 */
    .match-title .zh, .match-title .en, .match-title .ja, .match-title .ru, .match-title .fr,
    .match-subtitle .zh, .match-subtitle .en, .match-subtitle .ja, .match-subtitle .ru, .match-subtitle .fr,
    .match-action-btn .zh, .match-action-btn .en, .match-action-btn .ja, .match-action-btn .ru, .match-action-btn .fr {
        display: none;
    }

    body.chinese .match-title .zh, body.chinese .match-subtitle .zh, body.chinese .match-action-btn .zh,
    body.english .match-title .en, body.english .match-subtitle .en, body.english .match-action-btn .en,
    body.japanese .match-title .ja, body.japanese .match-subtitle .ja, body.japanese .match-action-btn .ja,
    body.russian .match-title .ru, body.russian .match-subtitle .ru, body.russian .match-action-btn .ru,
    body.french .match-title .fr, body.french .match-subtitle .fr, body.french .match-action-btn .fr {
        display: inline-block;
    }

    /* 响应式调整 */
    @media (min-width: 576px) { /* 在较大屏幕上，按钮并排放置 */
        .match-action-btn {
            min-width: 180px;
        }
    }

    @media (max-width: 768px) {
        .match-icon {
            width: 30px;
            height: 30px;
        }
        
        .match-indicator {
            width: 30px;
            height: 30px;
        }
    }

    /* 确保 match-item.heart-good 也能继承正确的样式 */
    .match-item.heart-good {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23FF6699'/%3E%3Ctext x='12' y='14' font-family='Arial' font-size='8' text-anchor='middle' fill='white'%3EB%3C/text%3E%3C/svg%3E");
        width: 40px;
        height: 40px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0;
    }

    @media (max-width: 768px) {
        .match-item.heart-good {
            width: 30px;
            height: 30px;
        }
    }

    /* 修复messages页面profile overlay关闭按钮问题 */
    #profile-close-btn {
        position: relative;
        z-index: 10000;
        cursor: pointer;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 全面修复profile overlay的渲染和交互问题 */
    .profile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85) !important; /* 加深背景色，防止半透明导致的显示问题 */
        z-index: 10000 !important; /* 确保在最顶层 */
    display: flex; 
        justify-content: center;
    align-items: center; 
        transition: opacity 0.2s ease, visibility 0.2s;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        will-change: opacity, visibility; /* 优化性能 */
        isolation: isolate; /* 创建新的层叠上下文 */
    }

    .profile-overlay.visible {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 防止滚动穿透 */
    body.profile-overlay-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 提高overlay-content的层叠顺序和事件隔离 */
    .overlay-content {
        position: relative;
        z-index: 10001 !important;
        isolation: isolate;
        pointer-events: auto !important;
    }

    /* 确保overlay-controls在messages页面正确渲染 */
    .overlay-controls {
        position: absolute;
        bottom: 80px !important; /* 进一步上移，完全避开底部导航 */
        left: 50%;
        transform: translateX(-50%);
    display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        z-index: 10005 !important; /* 确保高于其他元素 */
        padding: 10px 16px;
        background: rgba(248, 248, 248, 0.85);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        border-radius: 30px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease, background-color 0.3s ease;
        pointer-events: auto !important; /* 强制启用点击事件 */
        isolation: isolate; /* 创建独立的层叠上下文 */
    }

    /* 修复按钮样式和点击事件 */
    .overlay-controls button {
        position: relative;
        z-index: 10006 !important; /* 比容器更高 */
        pointer-events: auto !important;
        cursor: pointer !important;
        background-color: #f0f0f0 !important; /* 确保背景色正确 */
        border: none !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* 添加按钮阴影增强视觉区分 */
        margin: 0 2px !important;
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    background-color 0.2s ease !important;
    }

    /* 强化按钮点击效果 */
    .overlay-controls button:active {
        transform: scale(0.9) !important;
        background-color: #e0e0e0 !important;
    }

    /* 特别处理关闭按钮 */
    #profile-close-btn {
        position: relative;
        z-index: 10007 !important; /* 最高层级 */
        background-color: #ff4757 !important; /* 独特的红色背景 */
        color: white !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important; /* 防止变换影响点击 */
        transition: background-color 0.2s ease !important;
    }

    #profile-close-btn:hover,
    #profile-close-btn:focus {
        background-color: #ff6b81 !important; /* 悬停时的浅红色 */
    }

    #profile-close-btn:active {
        background-color: #ee5253 !important; /* 点击时的深红色 */
        transform: scale(0.95) !important; /* 轻微缩小效果 */
    }

    /* 确保图标正确显示 */
    .overlay-controls button .material-symbols-outlined {
        font-size: 24px !important;
        color: inherit !important;
        pointer-events: none !important; /* 防止图标拦截点击事件 */
    }

    /* 移动设备上的特殊处理 */
    @media (max-width: 768px) {
        .overlay-controls {
            bottom: 90px !important; /* 移动设备上进一步上移 */
            padding: 8px 12px !important;
        }
        
        .overlay-controls button {
            width: 44px !important;
            height: 44px !important;
        }
        
        /* 在小屏幕上特别突出关闭按钮 */
        #profile-close-btn {
            width: 48px !important;
            height: 48px !important;
        }
    }

    /* 修复profile overlay关闭按钮和黑屏问题 */
    .profile-overlay:not(.visible) {
        display: none !important;
    }

    #profile-close-btn {
        cursor: pointer !important;
        opacity: 1 !important;
        background-color: #ff4757 !important;
        color: white !important;
        border-radius: 50% !important; 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        border: none !important;
        outline: none !important;
        position: relative !important;
        z-index: 10009 !important;
        pointer-events: auto !important;
    }

    /* 确保body在overlay关闭后恢复正常 */
    body:not(.profile-overlay-open) {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }

    /* 确保关闭按钮图标显示正确 */
    #profile-close-btn .material-symbols-outlined {
        font-size: 24px !important;
        pointer-events: none !important;
    }

    /* 交互提示遮罩层 - 左右滑动指示 */
    .profile-navigation-hints {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1007;
    }

    .nav-hint {
        position: absolute;
        top: 0;
        height: 100%;
        width: 33.33%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .nav-hint-left {
        left: 0;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .nav-hint-right {
        right: 0;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .nav-hint-icon {
        font-size: 36px;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    .nav-hint-left .nav-hint-icon {
        transform: translateX(-10px);
    }

    .nav-hint-right .nav-hint-icon {
        transform: translateX(10px);
    }

    .overlay-content:hover .nav-hint {
        opacity: 0.7;
    }

    .overlay-content:hover .nav-hint-left .nav-hint-icon {
        transform: translateX(-5px);
        animation: pulseLeft 1.5s infinite;
    }

    .overlay-content:hover .nav-hint-right .nav-hint-icon {
        transform: translateX(5px);
        animation: pulseRight 1.5s infinite;
    }

    @keyframes pulseLeft {
        0%, 100% { transform: translateX(-5px); }
        50% { transform: translateX(-10px); }
    }

    @keyframes pulseRight {
        0%, 100% { transform: translateX(5px); }
        50% { transform: translateX(10px); }
    }

    /* 为移动设备优化样式 */
    @media (max-width: 768px) {
        .nav-hint-icon {
            font-size: 28px;
        }
    }

    /* 暗色模式支持 */
    @media (prefers-color-scheme: dark) {
        .progress-bar {
            background-color: rgba(255, 255, 255, 0.25);
        }
        
        .progress-bar.active {
            background-color: rgba(255, 255, 255, 0.9);
        }
    }
    


/* 品牌色Tinder风格匹配弹窗样式 - 与simple_test.html完全一致 */
/* 使用更高优先级的选择器确保样式不被覆盖 */
#match-notification-overlay.match-overlay {
    position: fixed !important;
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important;
    background: rgba(255,182,193,0.18) !important;
    backdrop-filter: blur(6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s !important;
}
#match-notification-overlay.match-overlay.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}
#match-notification-overlay .match-overlay-content {
    width: 100% !important;
    max-width: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#match-notification-overlay .standard-match.style-8, 
#match-notification-overlay .general-match-content {
    background: linear-gradient(120deg, #fff2f2 0%, #f5f5ff 100%) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(255,59,48,0.10) !important;
    padding: 36px 28px 28px 28px !important;
    min-width: 320px !important;
    max-width: 90vw !important;
    width: 100% !important;
    text-align: center !important;
    position: relative !important;
    animation: popin 0.4s cubic-bezier(.68,-0.55,.27,1.55) !important;
}
@keyframes popin {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
#match-notification-overlay .match-close-btn {
    position: absolute !important;
    top: 18px !important; 
    right: 18px !important;
    background: #FFB6C1 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important; 
    height: 36px !important;
    font-size: 1.3em !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(255,59,48,0.08) !important;
    transition: background 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#match-notification-overlay .match-close-btn:hover {
    background: #FF3B30 !important;
}
#match-notification-overlay .match-title {
    font-size: 2em !important;
    font-weight: 700 !important;
    color: #FF6F61 !important;
    margin-bottom: 10px !important;
    letter-spacing: 1px !important;
}
#match-notification-overlay .match-subtitle {
    font-size: 1.1em !important;
    color: #8A7F8D !important;
    margin-bottom: 24px !important;
}
#match-notification-overlay .match-avatars {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
}
#match-notification-overlay .match-avatar {
    width: 88px !important;
    height: 88px !important;
    border-radius: 50% !important;
    border: 4px solid #FFDAB9 !important;
    object-fit: cover !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(255,111,97,0.08) !important;
}
#match-notification-overlay #match-avatar-current {
    border-color: #FFDAB9 !important;
}
#match-notification-overlay .match-count {
    font-size: 2.5em !important;
    font-weight: bold !important;
    color: #FF6F61 !important;
    margin-bottom: 10px !important;
}
#match-notification-overlay .mini-avatar {
    width: 72px !important;
    height: 72px !important;
    aspect-ratio: 1/1 !important; /* 强制正方形 */
    border-radius: 8px !important;
    object-fit: cover !important;
    background: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
    margin: 0 4px !important;
}
#match-notification-overlay .match-actions {
    display: flex !important;
    gap: 16px !important;
    margin-top: 18px !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}
#match-notification-overlay .match-action-btn {
    flex: 1 !important;
    padding: 9px 0 !important;
    border-radius: 16px !important;
    border: 1.2px solid #FFDAB9 !important;
    font-size: 0.98em !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,0.55) !important;
    color: #FF6F61 !important;
    box-shadow: 0 2px 8px rgba(255,111,97,0.04) !important;
    cursor: pointer !important;
    transition: background 0.18s, border-color 0.18s, color 0.18s !important;
    backdrop-filter: blur(8px) !important;
    min-width: 120px !important;
    max-width: 48% !important;
    margin: 0 2px !important;
}
#match-notification-overlay .match-action-btn.message-btn {
    border-color: #FF6F61 !important;
    color: #fff !important;
    background: #FF6F61 !important;
}
#match-notification-overlay .match-action-btn:hover {
    background: rgba(255,255,255,0.75) !important;
    border-color: #FFDAB9 !important;
    color: #FF6F61 !important;
}
#match-notification-overlay .match-action-btn.message-btn:hover {
    background: rgba(255,111,97,0.9) !important;
    border-color: #FF6F61 !important;
    color: #fff !important;
}
#match-notification-overlay .upgrade-hint {
    color: #FF6F61 !important;
    font-size: 1em !important;
    margin-top: 18px !important;
    background: #FFF0E9 !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
    width: 100% !important;
    max-width: 95% !important;
}
@media (max-width: 600px) {
    #match-notification-overlay .match-overlay-content {
        max-width: 90% !important;
        margin: 0 15px !important;
    }
    #match-notification-overlay .standard-match.style-8, 
    #match-notification-overlay .general-match-content { 
        padding: 30px 20px 24px !important;
        min-width: auto !important;
        width: 100% !important;
    }
    #match-notification-overlay .match-title {
        font-size: 1.6em !important;
        margin-bottom: 8px !important;
    }
    #match-notification-overlay .match-subtitle {
        font-size: 0.95em !important;
        margin-bottom: 20px !important;
    }
    #match-notification-overlay .match-avatars { 
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    #match-notification-overlay .match-avatar { 
        width: 70px !important; 
        height: 70px !important;
        border-width: 3px !important;
    }
    #match-notification-overlay .mini-avatar { 
        width: 102px !important; 
        height: 102px !important;
        aspect-ratio: 1/1 !important; /* 强制正方形 */
        border-radius: 6px !important;
    }
    #match-notification-overlay .match-count {
        font-size: 2em !important;
    }
    #match-notification-overlay .match-close-btn {
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1.1em !important;
    }
    #match-notification-overlay .match-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #match-notification-overlay .match-action-btn {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 !important;
    }
    #match-notification-overlay .upgrade-hint {
        font-size: 0.9em !important;
        padding: 6px 10px !important;
        margin-top: 16px !important;
    }
}
@media (max-width: 370px) {
    #match-notification-overlay .standard-match.style-8, 
    #match-notification-overlay .general-match-content { 
        padding: 24px 15px 20px !important;
    }
    #match-notification-overlay .match-title {
        font-size: 1.4em !important;
    }
    #match-notification-overlay .match-subtitle {
        font-size: 0.9em !important;
    }
    #match-notification-overlay .match-avatars { 
        gap: 8px !important;
    }
    #match-notification-overlay .match-avatar { 
        width: 60px !important; 
        height: 60px !important; 
    }
    #match-notification-overlay .mini-avatar { 
        width: 82px !important; 
        height: 82px !important;
        aspect-ratio: 1/1 !important; /* 强制正方形 */
        border-radius: 4px !important;
    }
}

#match-notification-overlay .mini-avatars {
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    scroll-snap-type: x mandatory;
}
#match-notification-overlay .mini-avatar {
    scroll-snap-align: center;
}

/* ==================================================
   Telegram风格删除确认动画样式 - iOS风格配色
   ================================================== */

#telegram-delete-confirm-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    color: #2c3e50;
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15), 0 -2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#telegram-delete-confirm-bar.visible {
    transform: translateY(0);
}

#telegram-delete-confirm-bar .confirm-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    min-height: 60px;
}

#telegram-delete-confirm-bar .confirm-text {
    font-size: 16px;
    font-weight: 500;
    flex: 1;
    margin-right: 16px;
    color: #2c3e50;
    line-height: 1.4;
}

#telegram-delete-confirm-bar .confirm-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 200px;
}

#telegram-delete-confirm-bar .confirm-progress {
    height: 6px;
    background: rgba(255, 209, 220, 0.3);
    position: relative;
    border-radius: 3px;
    flex: 1;
    overflow: hidden;
    min-width: 120px;
}

#telegram-delete-confirm-bar .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #FF3B30 0%, #FF6B35 50%, #FFD1DC 100%);
    width: 100%;
    transition: width 0.02s ease-out;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.4);
    position: relative;
    will-change: width;
}

#telegram-delete-confirm-bar .progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShine 1.5s ease-in-out infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

#telegram-delete-confirm-bar .undo-btn {
    background: linear-gradient(135deg, #FF3B30 0%, #E22A1D 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.25);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

#telegram-delete-confirm-bar .undo-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

#telegram-delete-confirm-bar .undo-btn:hover {
    background: linear-gradient(135deg, #E22A1D 0%, #CC2218 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.35);
}

#telegram-delete-confirm-bar .undo-btn:hover::before {
    left: 100%;
}

#telegram-delete-confirm-bar .undo-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(255, 59, 48, 0.2);
}

/* 删除动画增强 */
.thread-item-deleting {
    animation: telegram-delete 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes telegram-delete {
    0% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(0.95) translateX(20px);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateX(100px);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    #telegram-delete-confirm-bar {
        background: #ffffff;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    #telegram-delete-confirm-bar .confirm-content {
        padding: 16px 18px;
        min-height: 56px;
    }

    #telegram-delete-confirm-bar .confirm-text {
        font-size: 15px;
        font-weight: 500;
        margin-right: 12px;
    }

    #telegram-delete-confirm-bar .confirm-actions {
        gap: 12px;
        min-width: 180px;
    }

    #telegram-delete-confirm-bar .confirm-progress {
        height: 5px;
        border-radius: 2.5px;
        min-width: 100px;
    }

    #telegram-delete-confirm-bar .undo-btn {
        min-width: 70px;
        height: 36px;
        font-size: 15px;
        padding: 8px 14px;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(255, 59, 48, 0.2);
    }
}

@media (max-width: 480px) {
    #telegram-delete-confirm-bar {
        background: #ffffff;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.1), 0 -1px 6px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    #telegram-delete-confirm-bar .confirm-content {
        padding: 14px 16px;
        min-height: 52px;
    }

    #telegram-delete-confirm-bar .confirm-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        margin-right: 10px;
    }

    #telegram-delete-confirm-bar .confirm-actions {
        gap: 10px;
        min-width: 160px;
    }

    #telegram-delete-confirm-bar .confirm-progress {
        height: 4px;
        border-radius: 2px;
        min-width: 80px;
    }

    #telegram-delete-confirm-bar .undo-btn {
        min-width: 65px;
        height: 32px;
        font-size: 14px;
        padding: 6px 10px;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(255, 59, 48, 0.15);
    }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    #telegram-delete-confirm-bar {
        background: #ffffff;
        color: #2c3e50;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15), 0 -2px 8px rgba(0, 0, 0, 0.1);
    }

    #telegram-delete-confirm-bar .confirm-text {
        color: #2c3e50;
    }

    #telegram-delete-confirm-bar .confirm-progress {
        background: rgba(255, 255, 255, 0.1);
    }

    #telegram-delete-confirm-bar .undo-btn {
        background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }

    #telegram-delete-confirm-bar .undo-btn:hover {
        background: linear-gradient(135deg, #FF5252 0%, #FF3B30 100%);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    }

    #telegram-delete-confirm-bar .progress-bar {
        background: linear-gradient(90deg, #FF6B6B 0%, #FF8A80 50%, #FFD1DC 100%);
        box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
    }

    #telegram-delete-confirm-bar .progress-bar::after {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    #telegram-delete-confirm-bar {
        border: 2px solid #000000;
        background: #FFFFFF;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2), 0 -2px 8px rgba(0, 0, 0, 0.15);
    }

    #telegram-delete-confirm-bar .confirm-text {
        color: #000000;
        font-weight: 700;
    }

    #telegram-delete-confirm-bar .undo-btn {
        border: 2px solid #FF3B30;
        background: #FFFFFF;
        color: #FF3B30;
        font-weight: 700;
    }

    #telegram-delete-confirm-bar .undo-btn:hover {
        background: #FF3B30;
        color: #FFFFFF;
        border-color: #FF3B30;
    }

    #telegram-delete-confirm-bar .confirm-progress {
        background: #E6E6FA;
        border: 1px solid #000000;
    }

    #telegram-delete-confirm-bar .progress-bar {
        background: #FF3B30;
        box-shadow: none;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    #telegram-delete-confirm-bar {
        transition: transform 0.1s ease;
    }

    #telegram-delete-confirm-bar .undo-btn {
        transition: none;
    }

    #telegram-delete-confirm-bar .undo-btn::before {
        display: none;
    }

    #telegram-delete-confirm-bar .undo-btn:hover {
        transform: none;
    }

    #telegram-delete-confirm-bar .undo-btn:active {
        transform: none;
    }

    #telegram-delete-confirm-bar .progress-bar::after {
        display: none;
    }

    .thread-item-deleting {
        animation: none;
        opacity: 0;
        transform: scale(0.8) translateX(100px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}

/* VPN信息提示样式（信息条，非警告） */