/* ================= 1. 全局布局与封面 (薄荷青渐变) ================= */
.friendlink-wrapper { margin-top: 0px; padding-bottom: 5px; }
.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, #84fab0 0%, #8fd3f4 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) 20%, 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(0, 184, 148, 0.12); 
    background: #fff; display: flex; align-items: center; justify-content: center; 
    font-size: 30px; 
    color: #00b894; /* 图标青色 */
}

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

.badge-gold-solid { 
    background: #1a1a1a; 
    color: #84fab0; /* 标签文字青色 */
    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; }

/* 呼吸灯特效 (薄荷青) */
.friendlink-pulse-dot { 
    display: inline-block; width: 8px; height: 8px; 
    background-color: #00b894; 
    border-radius: 50%; margin-right: 8px; 
    box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.7); 
    animation: pulse-mint 2s infinite; 
}

@keyframes pulse-mint { 
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.7); } 
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 184, 148, 0); } 
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 184, 148, 0); } 
}

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

.sites-btn { border-radius: 8px; font-weight: 500; 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); }

/* 友链网格与卡片 */
.friendlink-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
}

.friendlink-card {
    background: #fff; border: 1px solid #f1f3f5; border-radius: 12px; height: 70px;
    display: flex; flex-direction: row; align-items: center; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none !important; padding: 12px 15px; cursor: pointer !important;
}

.friendlink-card:hover { border-color: #eee; background-color: #fff; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); }

.friendlink-logo {
    height: 32px; width: 32px; border-radius: 10px; background-position: center; background-repeat: no-repeat; background-size: cover;
    flex-shrink: 0; margin-right: 12px; background-color: #f9f9f9; box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.friendlink-info { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.friendlink-name { font-size: 14px; color: #2d3436; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-bottom: 2px; }
.friendlink-url { font-size: 11px; color: #adb5bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

.friendlink-arrow { flex-shrink: 0; margin-left: 10px; color: #ccc; display: flex; align-items: center; transition: transform 0.2s ease, color 0.2s ease; }
.friendlink-card:hover .friendlink-arrow { color: #00b894; transform: translateX(3px); }

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

@media (max-width: 768px) {
    .container { padding-left: 4px !important; padding-right: 4px !important; }
    .user-main-body { margin-top: -60px; padding: 0 15px 30px 15px; }
    .avatar-heart { width: 85px; height: 85px; font-size: 26px; }
    .profile-content-col { padding-top: 15px; }
    
    .friendlink-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .friendlink-card { height: 65px; padding: 8px 10px; }
    .friendlink-logo { width: 32px; height: 32px; margin-right: 8px; border-radius: 8px; }
    .friendlink-name { font-size: 12px; } 
    .friendlink-url { font-size: 10px; }
    .friendlink-arrow { margin-left: 4px; }
    .friendlink-arrow svg { width: 14px; height: 14px; }
}