.friends-section{max-width:860px}.friends-intro{font-size:14.5px;color:var(--text-soft);line-height:1.8}.friend-group-title{display:flex;align-items:center;gap:8px;margin:26px 0 0;padding-bottom:8px;font-size:15.5px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line)}.friend-group-count{font-size:12px;font-weight:600;line-height:1;padding:3px 8px;border-radius:999px;color:var(--accent);background:var(--accent-soft)}.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:12px}.friend-card{display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.friend-card:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.4);box-shadow:var(--shadow-hover)}.friend-avatar{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--bg-soft);box-shadow:0 0 0 2px var(--bg-card),0 0 0 4px var(--accent-soft);transition:transform .3s ease}.friend-card:hover .friend-avatar{transform:scale(1.08)}.friend-avatar-placeholder{display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-soft))}.friend-info{min-width:0;flex:1}.friend-name{font-size:14.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}.friend-card:hover .friend-name{color:var(--accent)}.friend-desc{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.friend-arrow{flex:none;margin-left:auto;font-size:12.5px;color:var(--text-mute);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease,color .2s}.friend-card:hover .friend-arrow{opacity:1;transform:translateX(0);color:var(--accent)}@media(max-width:640px){.friend-grid{grid-template-columns:1fr 1fr;gap:8px}.friend-card{padding:9px 11px;gap:10px}.friend-avatar{width:36px;height:36px}.friend-name{font-size:13.5px}.friend-desc{font-size:11.5px}.friend-arrow{display:none}}@media(max-width:420px){.friend-grid{grid-template-columns:1fr 1fr;gap:6px}.friend-card{padding:8px 9px;gap:8px}.friend-avatar{width:32px;height:32px}.friend-name{font-size:12.5px}.friend-desc{font-size:11px}}