/* 全局覆盖与修复 */
body > .container, .container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body { font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Roboto, sans-serif; color: var(--text-main); overflow-x: hidden; padding-top: 10px; }

/* 页面主体 */
.friends-page-body { 
    background: #f4f7fa; 
    font-family: 'Outfit', sans-serif; 
    padding: 100px 0 80px; 
    min-height: 100vh; 
    position: relative; 
    overflow-x: hidden; 
    /* 确保背景噪声只在这个页面生效 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* === 核心性能优化：GPU 硬件加速 === */
.bg-decoration { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.blob { 
    position: absolute; width: 450px; height: 450px; border-radius: 50%; filter: blur(90px); opacity: 0.45; animation: move 25s infinite alternate; 
    will-change: transform, opacity; /* 硬件加速指令 */
    transform: translateZ(0);
}
.blob-1 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); top: -10%; left: 5%; }
.blob-2 { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); bottom: -10%; right: 5%; animation-delay: -7s; }
.blob-3 { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); top: 40%; right: 20%; animation-delay: -12s; }
@keyframes move { from { transform: translate(0,0) scale(1); } to { transform: translate(50px, 50px) scale(1.1); } }

/* 标题与画布 */
.title-area { position: relative; z-index: 10; text-align: center; margin-bottom: 40px; }
.title-area h1 { font-size: 3rem; font-weight: 800; color: #1a1a1b; letter-spacing: -2px; margin: 0; }
.title-area p { font-size: 1rem; color: #6e6e73; margin-top: 10px; font-weight: 400; }
.friends-canvas { position: relative; z-index: 10; width: 88%; max-width: 1100px; margin: 0 auto; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 45px; padding: 50px 0; box-shadow: 0 30px 70px -15px rgba(0,0,0,0.08); overflow: hidden; }

/* 走马灯滚动 (关键加速区) */
.scroll-track-container { display: flex; flex-direction: column; gap: 20px; }
.track { 
    display: flex; gap: 20px; width: max-content; 
    will-change: transform; /* 让显卡接管滚动运算 */
    transform: translateZ(0); 
    backface-visibility: hidden;
}
.animate-l { animation: ticker-l 60s linear infinite; }
.animate-r { animation: ticker-r 60s linear infinite; }
.track:hover { animation-play-state: paused; }
/* 优化动画帧，使用 3d 加速 */
@keyframes ticker-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes ticker-r { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* 友链卡片 */
.sq-card { width: 200px; height: 240px; background: rgba(255, 255, 255, 0.9); border-radius: 30px; padding: 25px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #1d1d1f; transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); border: 1px solid rgba(255,255,255,1); box-shadow: 0 4px 15px rgba(0,0,0,0.03); flex-shrink: 0; }
.sq-card:hover { transform: translateY(-8px) scale(1.03); background: #fff; box-shadow: 0 25px 50px rgba(0,0,0,0.1); border-color: #000; }
.sq-avatar { width: 75px; height: 75px; border-radius: 22px; object-fit: cover; margin-bottom: 18px; box-shadow: 0 5px 15px rgba(0,0,0,0.06); background: #f8f9fa; }
.sq-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-desc { font-size: 0.8rem; color: #86868b; line-height: 1.5; height: 3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: auto; }
.sq-time { font-size: 9px; font-weight: 600; color: #c1c1c6; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 10px; }

/* 交互按钮与弹窗 */
.action-bar { text-align: center; margin-top: 45px; position: relative; z-index: 10; display: flex; justify-content: center; }
.btn-apply { background: #1a1a1b; color: #fff; padding: 16px 50px; border-radius: 100px; font-size: 1rem; font-weight: 600; border: none; cursor: pointer; transition: 0.3s; box-shadow: 0 12px 25px rgba(0,0,0,0.15); }
.btn-apply:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(0,0,0,0.25); background: #000; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(15px); z-index: 2000; display: none; align-items: center; justify-content: center; opacity: 0; transform: scale(0.95); transition: opacity 0.3s, transform 0.3s; }
.modal.active { display: flex; opacity: 1; transform: scale(1); }
.modal-box { background: #fff; border-radius: 40px; padding: 40px; width: 400px; max-width: 92%; box-shadow: 0 30px 60px rgba(0,0,0,0.2); }
.f-input { width: 100%; padding: 15px; background: #f5f5f7; border: 1px solid transparent; border-radius: 15px; margin-bottom: 12px; outline: none; transition: 0.3s; font-family: inherit; box-sizing: border-box; }
.f-input:focus { border-color: #000; background: #fff; }

/* 响应式 */
@media (max-width: 768px) { 
    .friends-canvas { width: 92%; border-radius: 35px; } 
    .sq-card { width: 180px; height: 220px; } 
    .title-area h1 { font-size: 2.2rem; } 
}