/* ================= 1. 全局布局与封面 (珊瑚红渐变) ================= */
.sites-wrapper { margin-top: 0px; padding-bottom: 30px; }
.user-card-premium { background: #fff; border-radius: 5px; border: none; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05); box-sizing: border-box; overflow: hidden; }

.user-header-cover {
    /* 切换为珊瑚红渐变 */
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    height: 140px;
    position: relative;
}

.user-header-cover::after {
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; /* 确保遮罩覆盖整个封面高度 */
    /* 增加渐变锚点，实现极度丝滑的“消隐”效果 */
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0) 0%,      /* 顶部完全透明 */
        rgba(255, 255, 255, 0.2) 40%,   /* 中间开始微微显色 */
        rgba(255, 255, 255, 0.6) 70%,   /* 逐渐变浓 */
        rgba(255, 255, 255, 0.9) 90%,   /* 接近底部时基本遮盖 */
        rgba(255, 255, 255, 1) 100%     /* 底部与卡片背景色完全合一 */
    ); 
    pointer-events: none; 
}

.user-main-body { padding: 0 30px 40px 30px; position: relative; margin-top: -60px; z-index: 10; }

/* ================= 2. 左侧：身份与说明区 ================= */
.profile-side-col { text-align: center; }

.avatar-heart { 
    width: 100px; height: 100px; border-radius: 28px; margin: 0 auto 15px auto; 
    border: 5px solid #fff; 
    /* 阴影色改为浅红色 */
    box-shadow: 0 12px 25px rgba(255, 118, 117, 0.15); 
    background: #fff; display: flex; align-items: center; justify-content: center; 
    font-size: 30px; 
    color: #ff7675; /* 图标珊瑚红 */
}

.username-display { font-size: 20px; font-weight: 900; color: #2d3436; margin-bottom: 8px; }

.badge-gold-solid { 
    background: #1a1a1a; 
    color: #ff9a9e; /* 标签文字珊瑚色 */
    padding: 3px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; 
}

.info-glass-card { background: #fcfcfc; border-radius: 18px; padding: 20px 22px; margin-bottom: 15px; border: 1px solid #f8f9fa; text-align: left; }
.card-header-title { font-size: 14px; color: #2d3436; font-weight: 800; margin-bottom: 15px; display: flex; align-items: center; }
.card-header-title i { margin-right: 8px; font-size: 12px; }

/* 呼吸灯特效 (珊瑚红) */
.sites-pulse-dot { 
    display: inline-block; width: 8px; height: 8px; 
    background-color: #ff7675; 
    border-radius: 50%; margin-right: 8px; 
    box-shadow: 0 0 0 0 rgba(255, 118, 117, 0.7); 
    animation: pulse-coral 2s infinite; 
}

@keyframes pulse-coral { 
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 118, 117, 0.7); } 
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 118, 117, 0); } 
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 118, 117, 0); } 
}

/* ================= 3. 右侧：功能网格 ================= */
.profile-content-col { padding-top: 50px; }

.sites-btn { border-radius: 8px; font-weight: 700; transition: all 0.3s ease; padding: 10px; border: none; }
.btn-dark.sites-btn:hover { background: #000; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

.sites-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 12px;
}

.site-card {
    background: #fff; border: 1px solid #f1f3f5; border-radius: 12px; height: 75px;
    display: flex; align-items: center; justify-content: center; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none !important; padding: 10px; cursor: pointer !important;
    position: relative; overflow: hidden;
}

.site-logo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    height: 30px; width: 80%; background-position: center; background-repeat: no-repeat; background-size: contain;
    opacity: 1; transition: all 0.3s ease; z-index: 1;
}

.site-name {
    position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(10px);
    font-size: 13px; color: #2d3436; font-weight: 800; text-align: center;
    opacity: 0; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.site-card:hover { border-color: #eee; background-color: #fff; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); }
.site-card:hover .site-logo { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
.site-card:hover .site-name { opacity: 1; transform: translateY(-50%); }

/* ================= 4. 移动端适配 (两列) ================= */
@media (max-width: 992px) { 
    .sites-grid { grid-template-columns: repeat(3, 1fr); } 
}

@media (max-width: 768px) {
    .container { padding-left: 4px !important; padding-right: 4px !important; }
    .user-main-body { margin-top: -60px; padding: 0 18px 30px 18px; }
    .avatar-heart { width: 85px; height: 85px; font-size: 26px; }
    .profile-content-col { padding-top: 15px; }
    
    .sites-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .site-card { height: 80px; }
}