.friends-page{max-width:1060px;margin:0 auto;padding:24px 16px 88px;color:var(--text-primary)}.friends-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}.friends-heading>span{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--btn-bg-secondary);font-size:32px}.friends-heading h1{margin:0;font-size:30px}.friends-heading p,.friends-explanation,.friend-card p{color:var(--text-secondary);line-height:1.6}.friends-tabs{display:flex;gap:8px;flex-wrap:wrap}.friends-page button{min-height:44px;padding:10px 16px;border:1px solid var(--border-color);border-radius:12px;background:var(--surface-raised);color:var(--text-primary);font:inherit;cursor:pointer}.friends-page button[aria-pressed=true],.friend-actions button:first-child{background:var(--btn-bg-primary);color:#fff;border-color:transparent}.friends-page button:disabled{opacity:.55;cursor:wait}.friends-page button:focus-visible,.friend-identity:focus-visible{outline:3px solid var(--btn-bg-primary);outline-offset:3px}.friends-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}.friends-toolbar h2{font-size:20px}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}.friend-card{min-width:0;padding:20px;background:var(--surface-raised);border:1px solid var(--border-color);border-radius:20px}.friend-identity{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary)}.friend-avatar{position:relative;display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border-radius:50%;overflow:hidden;color:#fff;font-size:24px;font-weight:700}.friend-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.friend-name{min-width:0}.friend-name strong,.friend-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-name small{color:var(--text-secondary);margin-top:4px}.friend-actions{display:flex;gap:8px;flex-wrap:wrap}.friends-page #friends-more{display:block;margin:24px auto}.friends-page [hidden]{display:none!important}#friends-status{min-height:24px;overflow-wrap:anywhere}@media(max-width:480px){.friends-page{padding:16px 10px 88px}.friends-tabs button{flex:1 1 130px}.friends-heading h1{font-size:26px}.friends-toolbar{align-items:flex-start}.friend-card{padding:16px}}