#friend-tabs,.friend-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}#friend-tabs button[aria-pressed=true]{font-weight:bold;text-decoration:underline}.friend-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid #8a98a744}.friend-row>a{font-size:18px;font-weight:600}.friend-actions span[role=status]{width:100%}
#friend-tabs button,.friend-actions button,#friends-more{padding:10px 14px;border:1px solid #9aabbe;border-radius:7px;background:transparent;color:inherit;cursor:pointer;font:inherit}#friend-tabs button[aria-pressed=true]{background:#315eab;color:white;border-color:#315eab;text-decoration:none}button:disabled{opacity:.6;cursor:wait}.friend-row>a{color:inherit}.friend-actions>span:first-child{font-size:13px;opacity:.8}#friends-list{margin:20px 0}

#friends-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.friend-row{padding:14px;border:1px solid #8a98a744;border-radius:3px;background:#fff}.friend-row>a{display:flex;align-items:center;gap:14px;min-width:0}.friend-avatar{flex:none;width:100px;height:100px;overflow:hidden;border-radius:50%;background:#dfe3e8}.friend-avatar canvas{width:100%;height:100%;display:block}.friend-info{display:flex;flex-direction:column;gap:8px;min-width:0}.friend-info strong{font-size:16px;overflow-wrap:anywhere}.friend-presence{font-size:13px;color:#687585}.friend-presence.online{color:#078d43}html[data-theme=dark] .friend-row{background:#292c32}html[data-theme=dark] .friend-presence{color:#bbc2cb}html[data-theme=dark] .friend-presence.online{color:#42d489}

#friends-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}.friend-row>a{max-width:100%;width:100%}.friend-info{flex:1}.friend-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#friend-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:#e9ebee;margin:22px 0}#friend-tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;padding:14px 8px}#friend-tabs button[aria-pressed=true]{background:transparent;color:inherit;border-bottom-color:currentColor}.friends-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.friends-heading h2{font-size:20px}.friends-heading input{padding:10px 14px;color:inherit;background:transparent;border:1px solid #8a98a777;border-radius:8px;width:min(100%,300px)}#friends-request-tabs{margin-top:10px}#friends-request-tabs button{padding:8px 14px;background:transparent;color:inherit;border:1px solid #8a98a777;border-radius:5px;margin-right:8px}@media(max-width:600px){#friend-tabs{display:flex;overflow-x:auto;flex-wrap:nowrap}#friend-tabs button{flex:1;white-space:nowrap}}

#friend-tabs button{color:#26313f}#friend-tabs button[aria-pressed=true]{color:#26313f}html[data-theme=dark] #friend-tabs{background:#292c32}html[data-theme=dark] #friend-tabs button,html[data-theme=dark] #friend-tabs button[aria-pressed=true]{color:#f5f5f7}