.friends-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:30px 0;padding:0}.friend-card{background:var(--card-bg,#fff);border-radius:12px;overflow:hidden;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.08);border:1px solid var(--border-color,#e1e4e8)}.friend-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.15)}.friend-card a{display:flex;align-items:center;padding:20px;text-decoration:none;color:inherit;gap:15px}.friend-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--border-color,#e1e4e8)}.friend-info{flex:1;min-width:0}.friend-name{margin:0 0 5px 0;font-size:1.1rem;font-weight:600;color:var(--text-color,#24292e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-desc{margin:0;font-size:.9rem;color:var(--text-secondary,#586069);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media (prefers-color-scheme:dark){.friend-card{--card-bg:#1c1c1e;--border-color:#38383a;--text-color:#f5f5f7;--text-secondary:#98989d}}body.dark-mode .friend-card,body[data-theme=dark] .friend-card{--card-bg:#1c1c1e;--border-color:#38383a;--text-color:#f5f5f7;--text-secondary:#98989d}@media (max-width:768px){.friends-container{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.friend-card a{padding:15px}.friend-avatar{width:50px;height:50px}.friend-name{font-size:1rem}.friend-desc{font-size:.85rem}}@media (max-width:480px){.friends-container{grid-template-columns:1fr}}