/* Estilos para el menú desplegable del usuario (estilo Bilibili) */

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 7px rgba(0,0,0,0.15);
}

.avatar-dropdown {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 8px;
    width: 280px; /* 增加宽度以适应更多内容 */
    padding: 16px 0;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    border: 1px solid #f0f0f0;
}

.avatar-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Flecha superior */
.avatar-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
    border-left: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    z-index: -1;
}

/* Sección de info del usuario */
.user-info-section {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 8px;
}

.user-info-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    border: 1px solid #f0f0f0;
    flex-shrink: 0; /* Prevent avatar from shrinking */
}

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

.user-info-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; /* 允许详情区域占据剩余空间 */
    overflow: hidden; /* 防止内容溢出 */
}

.user-info-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 文字过长时显示省略号 */
}

.user-info-level {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 13px;
    color: #999;
}

/* Estilos para las etiquetas de nivel de usuario */
.user-level-tag {
    color: white;
    font-size: 11px; /* 减小字体 */
    padding: 2px 6px; /* 进一步减小内间距 */
    border-radius: 3px; /* 减小圆角 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto; /* 自适应高度 */
    min-width: 32px; /* 减小最小宽度 */
    text-align: center;
    transition: all 0.3s ease; /* 添加过渡效果 */
    font-weight: 500; /* 字体加粗 */
    line-height: 1.2; /* 调整行高 */
}

/* 等级颜色 - 根据等级区间设置不同颜色 */
/* 1-5级: 灰色 */
.level-1, .level-2, .level-3, .level-4, .level-5 {
    background: linear-gradient(90deg, #8A8A8A, #666666);
    color: white;
}

/* 6-10级: 银色 */
.level-6, .level-7, .level-8, .level-9, .level-10 {
    background: linear-gradient(90deg, #C0C0C0, #A9A9A9);
    color: #333;
}

/* 11-15级: 黄色 */
.level-11, .level-12, .level-13, .level-14, .level-15 {
    background: linear-gradient(90deg, #FFD700, #FFC400);
    color: #333;
}

/* 16-20级: 紫色 */
.level-16, .level-17, .level-18, .level-19, .level-20 {
    background: linear-gradient(90deg, #9D4EDD, #7B2CBF);
    color: white;
}

/* 21+级: 动态渐变色 */
.level-21, .level-22, .level-23, .level-24, .level-25,
.level-26, .level-27, .level-28, .level-29, .level-30,
.level-31, .level-32, .level-33, .level-34, .level-35,
.level-36, .level-37, .level-38, .level-39, .level-40,
.level-41, .level-42, .level-43, .level-44, .level-45,
.level-46, .level-47, .level-48, .level-49, .level-50,
.level-51, .level-52, .level-53, .level-54, .level-55,
.level-56, .level-57, .level-58, .level-59, .level-60,
.level-61, .level-62, .level-63, .level-64, .level-65,
.level-66, .level-67, .level-68, .level-69, .level-70,
.level-71, .level-72, .level-73, .level-74, .level-75,
.level-76, .level-77, .level-78, .level-79, .level-80,
.level-81, .level-82, .level-83, .level-84, .level-85,
.level-86, .level-87, .level-88, .level-89, .level-90,
.level-91, .level-92, .level-93, .level-94, .level-95,
.level-96, .level-97, .level-98, .level-99, .level-100,
.level-101, .level-102, .level-103, .level-104, .level-105,
.level-106, .level-107, .level-108, .level-109, .level-110,
.level-111, .level-112, .level-113, .level-114, .level-115,
.level-116, .level-117, .level-118, .level-119, .level-120,
.level-121, .level-122, .level-123, .level-124, .level-125,
.level-126, .level-127, .level-128, .level-129, .level-130,
.level-131, .level-132, .level-133, .level-134, .level-135,
.level-136, .level-137, .level-138, .level-139, .level-140,
.level-141, .level-142, .level-143, .level-144, .level-145,
.level-146, .level-147, .level-148, .level-149, .level-150,
.level-151, .level-152, .level-153, .level-154, .level-155,
.level-156, .level-157, .level-158, .level-159, .level-160,
.level-161, .level-162, .level-163, .level-164, .level-165,
.level-166, .level-167, .level-168, .level-169, .level-170,
.level-171, .level-172, .level-173, .level-174, .level-175,
.level-176, .level-177, .level-178, .level-179, .level-180,
.level-181, .level-182, .level-183, .level-184, .level-185,
.level-186, .level-187, .level-188, .level-189, .level-190,
.level-191, .level-192, .level-193, .level-194, .level-195,
.level-196, .level-197, .level-198, .level-199, .level-200 {
    background: linear-gradient(90deg, #FF0080, #7928CA, #4338CA);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    color: white;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Tipos de usuario */
.user-type-tag {
    font-size: 11px; /* 减小字体 */
    padding: 2px 6px; /* 进一步减小内间距 */
    border-radius: 3px; /* 减小圆角 */
    height: auto; /* 自适应高度 */
    min-width: 32px; /* 减小最小宽度 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease; /* 添加过渡效果 */
    font-weight: 500; /* 字体加粗 */
    line-height: 1.2; /* 调整行高 */
}

.user-type-normal {
    background: linear-gradient(90deg, #bbb, #ddd); /* Desarrollador normal - gris */
    color: white;
}

.user-type-verified {
    background: linear-gradient(90deg, #f39c12, #f1c40f); /* Desarrollador verificado - dorado */
    color: white;
}

/* Título especial */
.user-title-tag {
    background: linear-gradient(90deg, #9b59b6, #c39bd3); /* Título especial - morado */
    color: white;
    font-size: 11px; /* 减小字体 */
    padding: 2px 6px; /* 进一步减小内间距 */
    border-radius: 3px; /* 减小圆角 */
    margin-top: 4px;
    height: auto; /* 自适应高度 */
    min-width: 32px; /* 减小最小宽度 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease; /* 添加过渡效果 */
    font-weight: 500; /* 字体加粗 */
    line-height: 1.2; /* 调整行高 */
}

/* Elementos del menú */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 16px; /* 增加内边距 */
    margin: 4px 8px; /* 添加外边距 */
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px; /* 圆角长方形 */
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(66, 133, 244, 0.1); /* 蓝色悬停背景 */
    transform: translateX(2px); /* 轻微移动效果 */
}

.dropdown-item .item-icon {
    margin-right: 10px;
    font-size: 16px;
    width: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-item .item-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    vertical-align: middle;
}

.logout-item {
    color: #FB7299 !important;
}

.logout-item .item-icon svg {
    stroke: #FB7299;
}

/* Estilo para sección de VIP - similar a Bilibili */
.vip-section {
    padding: 10px 16px;
    background-color: rgba(251, 114, 153, 0.05);
    margin: 8px 0;
}

.vip-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #FB7299, #FF9B9B);
    color: white;
    border-radius: 12px; /* 圆角长方形 */
    padding: 10px 16px; /* 增加内间距 */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease; /* 改进过渡效果 */
    box-shadow: 0 2px 4px rgba(251, 114, 153, 0.3); /* 添加阴影 */
}

.vip-button:hover {
    opacity: 0.9;
    transform: translateY(-1px); /* 轻微上移效果 */
    box-shadow: 0 4px 8px rgba(251, 114, 153, 0.4); /* 增强阴影 */
}

/* Sección de tags */
.user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.user-tag {
    background-color: #f4f4f4;
    color: #666;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* 移动端用户标签样式优化 */
.mobile-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    margin-bottom: 20px;
    background-color: rgba(66, 133, 244, 0.05);
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
}

.mobile-user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

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

.mobile-user-name {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
}

.mobile-user-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

/* 移动端标签样式 */
.mobile-user-level-tag,
.mobile-user-type-tag,
.mobile-user-title-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-user-level-tag {
    /* 使用跟桌面端一样的样式 */
}

/* 移动端等级颜色 - 与桌面端保持一致 */
/* 1-5级: 灰色 */
.mobile-user-level-tag.level-1, .mobile-user-level-tag.level-2, .mobile-user-level-tag.level-3, .mobile-user-level-tag.level-4, .mobile-user-level-tag.level-5 {
    background: linear-gradient(90deg, #8A8A8A, #666666);
    color: white;
}

/* 6-10级: 银色 */
.mobile-user-level-tag.level-6, .mobile-user-level-tag.level-7, .mobile-user-level-tag.level-8, .mobile-user-level-tag.level-9, .mobile-user-level-tag.level-10 {
    background: linear-gradient(90deg, #C0C0C0, #A9A9A9);
    color: #333;
}

/* 11-15级: 黄色 */
.mobile-user-level-tag.level-11, .mobile-user-level-tag.level-12, .mobile-user-level-tag.level-13, .mobile-user-level-tag.level-14, .mobile-user-level-tag.level-15 {
    background: linear-gradient(90deg, #FFD700, #FFC400);
    color: #333;
}

/* 16-20级: 紫色 */
.mobile-user-level-tag.level-16, .mobile-user-level-tag.level-17, .mobile-user-level-tag.level-18, .mobile-user-level-tag.level-19, .mobile-user-level-tag.level-20 {
    background: linear-gradient(90deg, #9D4EDD, #7B2CBF);
    color: white;
}

/* 21+级: 动态渐变色 */
.mobile-user-level-tag.level-21, .mobile-user-level-tag.level-22, .mobile-user-level-tag.level-23, .mobile-user-level-tag.level-24, .mobile-user-level-tag.level-25,
.mobile-user-level-tag.level-26, .mobile-user-level-tag.level-27, .mobile-user-level-tag.level-28, .mobile-user-level-tag.level-29, .mobile-user-level-tag.level-30,
.mobile-user-level-tag.level-31, .mobile-user-level-tag.level-32, .mobile-user-level-tag.level-33, .mobile-user-level-tag.level-34, .mobile-user-level-tag.level-35,
.mobile-user-level-tag.level-36, .mobile-user-level-tag.level-37, .mobile-user-level-tag.level-38, .mobile-user-level-tag.level-39, .mobile-user-level-tag.level-40,
.mobile-user-level-tag.level-41, .mobile-user-level-tag.level-42, .mobile-user-level-tag.level-43, .mobile-user-level-tag.level-44, .mobile-user-level-tag.level-45,
.mobile-user-level-tag.level-46, .mobile-user-level-tag.level-47, .mobile-user-level-tag.level-48, .mobile-user-level-tag.level-49, .mobile-user-level-tag.level-50,
.mobile-user-level-tag.level-51, .mobile-user-level-tag.level-52, .mobile-user-level-tag.level-53, .mobile-user-level-tag.level-54, .mobile-user-level-tag.level-55,
.mobile-user-level-tag.level-56, .mobile-user-level-tag.level-57, .mobile-user-level-tag.level-58, .mobile-user-level-tag.level-59, .mobile-user-level-tag.level-60,
.mobile-user-level-tag.level-61, .mobile-user-level-tag.level-62, .mobile-user-level-tag.level-63, .mobile-user-level-tag.level-64, .mobile-user-level-tag.level-65,
.mobile-user-level-tag.level-66, .mobile-user-level-tag.level-67, .mobile-user-level-tag.level-68, .mobile-user-level-tag.level-69, .mobile-user-level-tag.level-70,
.mobile-user-level-tag.level-71, .mobile-user-level-tag.level-72, .mobile-user-level-tag.level-73, .mobile-user-level-tag.level-74, .mobile-user-level-tag.level-75,
.mobile-user-level-tag.level-76, .mobile-user-level-tag.level-77, .mobile-user-level-tag.level-78, .mobile-user-level-tag.level-79, .mobile-user-level-tag.level-80,
.mobile-user-level-tag.level-81, .mobile-user-level-tag.level-82, .mobile-user-level-tag.level-83, .mobile-user-level-tag.level-84, .mobile-user-level-tag.level-85,
.mobile-user-level-tag.level-86, .mobile-user-level-tag.level-87, .mobile-user-level-tag.level-88, .mobile-user-level-tag.level-89, .mobile-user-level-tag.level-90,
.mobile-user-level-tag.level-91, .mobile-user-level-tag.level-92, .mobile-user-level-tag.level-93, .mobile-user-level-tag.level-94, .mobile-user-level-tag.level-95,
.mobile-user-level-tag.level-96, .mobile-user-level-tag.level-97, .mobile-user-level-tag.level-98, .mobile-user-level-tag.level-99, .mobile-user-level-tag.level-100,
.mobile-user-level-tag.level-101, .mobile-user-level-tag.level-102, .mobile-user-level-tag.level-103, .mobile-user-level-tag.level-104, .mobile-user-level-tag.level-105,
.mobile-user-level-tag.level-106, .mobile-user-level-tag.level-107, .mobile-user-level-tag.level-108, .mobile-user-level-tag.level-109, .mobile-user-level-tag.level-110,
.mobile-user-level-tag.level-111, .mobile-user-level-tag.level-112, .mobile-user-level-tag.level-113, .mobile-user-level-tag.level-114, .mobile-user-level-tag.level-115,
.mobile-user-level-tag.level-116, .mobile-user-level-tag.level-117, .mobile-user-level-tag.level-118, .mobile-user-level-tag.level-119, .mobile-user-level-tag.level-120,
.mobile-user-level-tag.level-121, .mobile-user-level-tag.level-122, .mobile-user-level-tag.level-123, .mobile-user-level-tag.level-124, .mobile-user-level-tag.level-125,
.mobile-user-level-tag.level-126, .mobile-user-level-tag.level-127, .mobile-user-level-tag.level-128, .mobile-user-level-tag.level-129, .mobile-user-level-tag.level-130,
.mobile-user-level-tag.level-131, .mobile-user-level-tag.level-132, .mobile-user-level-tag.level-133, .mobile-user-level-tag.level-134, .mobile-user-level-tag.level-135,
.mobile-user-level-tag.level-136, .mobile-user-level-tag.level-137, .mobile-user-level-tag.level-138, .mobile-user-level-tag.level-139, .mobile-user-level-tag.level-140,
.mobile-user-level-tag.level-141, .mobile-user-level-tag.level-142, .mobile-user-level-tag.level-143, .mobile-user-level-tag.level-144, .mobile-user-level-tag.level-145,
.mobile-user-level-tag.level-146, .mobile-user-level-tag.level-147, .mobile-user-level-tag.level-148, .mobile-user-level-tag.level-149, .mobile-user-level-tag.level-150,
.mobile-user-level-tag.level-151, .mobile-user-level-tag.level-152, .mobile-user-level-tag.level-153, .mobile-user-level-tag.level-154, .mobile-user-level-tag.level-155,
.mobile-user-level-tag.level-156, .mobile-user-level-tag.level-157, .mobile-user-level-tag.level-158, .mobile-user-level-tag.level-159, .mobile-user-level-tag.level-160,
.mobile-user-level-tag.level-161, .mobile-user-level-tag.level-162, .mobile-user-level-tag.level-163, .mobile-user-level-tag.level-164, .mobile-user-level-tag.level-165,
.mobile-user-level-tag.level-166, .mobile-user-level-tag.level-167, .mobile-user-level-tag.level-168, .mobile-user-level-tag.level-169, .mobile-user-level-tag.level-170,
.mobile-user-level-tag.level-171, .mobile-user-level-tag.level-172, .mobile-user-level-tag.level-173, .mobile-user-level-tag.level-174, .mobile-user-level-tag.level-175,
.mobile-user-level-tag.level-176, .mobile-user-level-tag.level-177, .mobile-user-level-tag.level-178, .mobile-user-level-tag.level-179, .mobile-user-level-tag.level-180,
.mobile-user-level-tag.level-181, .mobile-user-level-tag.level-182, .mobile-user-level-tag.level-183, .mobile-user-level-tag.level-184, .mobile-user-level-tag.level-185,
.mobile-user-level-tag.level-186, .mobile-user-level-tag.level-187, .mobile-user-level-tag.level-188, .mobile-user-level-tag.level-189, .mobile-user-level-tag.level-190,
.mobile-user-level-tag.level-191, .mobile-user-level-tag.level-192, .mobile-user-level-tag.level-193, .mobile-user-level-tag.level-194, .mobile-user-level-tag.level-195,
.mobile-user-level-tag.level-196, .mobile-user-level-tag.level-197, .mobile-user-level-tag.level-198, .mobile-user-level-tag.level-199, .mobile-user-level-tag.level-200 {
    background: linear-gradient(90deg, #FF0080, #7928CA, #4338CA);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    color: white;
}

.mobile-user-type-tag {
    background: linear-gradient(90deg, #f39c12, #f1c40f); /* 认证开发者 - 金色 */
    color: white;
}

.mobile-user-title-tag {
    background: linear-gradient(90deg, #9b59b6, #c39bd3);
    color: white;
}