.friends-filters{margin-bottom:20px;position:relative}.friends-discovery-search-row{align-items:stretch;gap:10px;display:flex}.friends-discovery-search{flex:1;min-width:0}.friends-filters-trigger{min-width:126px;min-height:44px;color:var(--t2);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--type-caption);transition:var(--ease);justify-content:center;align-items:center;gap:7px;padding:9px 14px;font-weight:700;display:inline-flex}.friends-filters-trigger:hover,.friends-filters-trigger[aria-expanded=true]{color:var(--t1);border-color:var(--purple)}.friends-filters-count{border-radius:var(--r-surface);color:#fff;background:var(--purple);min-width:20px;height:20px;font-size:var(--type-caption);justify-content:center;align-items:center;padding:0 6px;font-weight:800;display:inline-flex}.friends-filters-backdrop{display:none}.friends-filters-popover{z-index:120;background:var(--bg-card);border:1px solid var(--border2);border-radius:var(--r-lg);flex-direction:column;gap:14px;width:min(360px,100%);padding:18px;display:flex;position:absolute;top:52px;right:0;box-shadow:0 16px 40px #0000006b}.friends-filters-heading{justify-content:space-between;align-items:center;font-size:17px;font-weight:800;display:flex}.friends-filters-close{width:44px;height:44px}.friends-filter-field{color:var(--t2);font-size:var(--type-caption);flex-direction:column;gap:6px;font-weight:700;display:flex}.friends-filter-online{min-height:44px;color:var(--t1);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--type-body-sm);cursor:pointer;align-items:center;gap:10px;padding:10px 12px;font-weight:700;display:flex}.friends-filter-online input{width:18px;height:18px;accent-color:var(--purple)}.friends-filters-reset,.friends-active-filters-reset{color:var(--t3);font-size:var(--type-caption);font-weight:700}.friends-filters-reset{border-top:1px solid var(--border);min-height:44px}.friends-active-filters{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.friends-filter-chip{min-height:44px;color:var(--t1);background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r-control);font-size:var(--type-caption);align-items:center;gap:6px;padding:6px 10px 6px 12px;font-weight:700;display:inline-flex}.friends-active-filters-reset{min-height:44px;margin-left:auto;padding:6px 0}.friend-recommendations-title{color:var(--t1);margin:0 0 12px;font-size:18px;font-weight:800;line-height:1.3}.friend-recommendations-grid{grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:16px;display:grid}.friends-people-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:12px;display:grid}.friends-people-grid>*{min-width:0;height:100%}.social-page .friends-people-grid .social-friend-row{grid-template-columns:48px minmax(0,1fr);align-content:start;height:100%;border:1px solid var(--border)!important;border-radius:var(--r-lg)!important;background:var(--bg-card)!important;padding:16px!important}.social-page .friends-people-grid .social-friend-actions{grid-column:1/-1;align-self:end}.friends-people-grid .social-friend-actions,.friends-people-grid .social-friend-actions .btn{width:100%}@media (max-width:1280px){.friends-people-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:900px){.friends-people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.friends-people-grid{grid-template-columns:minmax(0,1fr)}}.friend-recommendation-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);min-width:0;height:100%;transition:transform .25s var(--ease-fn), border-color .25s var(--ease-fn), box-shadow .25s var(--ease-fn);flex-direction:column;display:flex;overflow:visible}.friend-recommendation-card:hover{border-color:var(--baccent);box-shadow:0 12px 30px color-mix(in srgb, var(--purple) 18%, transparent);transform:translateY(-4px)}.friend-recommendation-avatar{aspect-ratio:1;border-radius:var(--r-lg) var(--r-lg) 14px 14px;position:relative;overflow:clip}.friend-recommendation-avatar>a{width:100%;height:100%;display:block}.friend-recommendation-avatar-image{color:#fff;background:var(--grad-btn);border-radius:inherit;justify-content:center;align-items:center;width:100%;height:100%;font-size:clamp(34px,5vw,64px);font-weight:900;display:flex;overflow:hidden}.friend-recommendation-avatar-image img{object-fit:cover;width:100%;height:100%}.friend-recommendation-dismiss{z-index:2;opacity:0;pointer-events:none;color:#fff;border-radius:var(--r-md);width:44px;height:44px;transition:opacity .18s var(--ease-fn), background-color .18s var(--ease-fn);background:#0a0a0fc7;border:1px solid #ffffff24;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:4px;right:4px}.friend-recommendation-avatar:hover .friend-recommendation-dismiss,.friend-recommendation-avatar:focus-within .friend-recommendation-dismiss{opacity:1;pointer-events:auto}.friend-recommendation-dismiss:hover{background:color-mix(in srgb, var(--danger) 90%, transparent)}.friend-recommendation-dismiss:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.friend-recommendation-dismiss:disabled{cursor:wait}.friend-recommendation-body{flex-direction:column;flex:1;min-width:0;padding:12px;display:flex}.friend-recommendation-identity{flex-direction:column;gap:4px;min-width:0;display:flex}.friend-recommendation-username,.friend-recommendation-city{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.friend-recommendation-name{width:100%;color:var(--t1);font-size:var(--type-body-sm);white-space:nowrap;text-overflow:clip;overflow-wrap:anywhere;font-weight:800;line-height:1.25}.friend-recommendation-name:hover{color:var(--purple-text)}.friend-recommendation-username{color:var(--t3);font-size:var(--type-caption);line-height:1.25}.friend-recommendation-details{min-width:0;height:46px;color:var(--t3);font-size:var(--type-caption);flex-direction:column;gap:4px;margin-top:10px;line-height:1.25;display:flex}.friend-mutual-tooltip-wrap{min-width:0;position:relative}.friend-mutual-trigger{max-width:100%;min-height:20px;color:var(--purple-text);font-size:var(--type-caption);text-overflow:ellipsis;white-space:nowrap;text-align:left;font-weight:700;position:relative;overflow:hidden}.friend-mutual-trigger:after{content:"";height:44px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.friend-mutual-trigger:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:var(--r-surface)}.friend-mutual-tooltip{z-index:20;visibility:hidden;opacity:0;pointer-events:none;width:min(260px,75vw);color:var(--t1);background:var(--bg-hi);border:1px solid var(--border2);border-radius:var(--r-md);transition:opacity .16s var(--ease-fn), transform .16s var(--ease-fn), visibility .16s var(--ease-fn);padding:12px;position:absolute;bottom:calc(100% + 7px);left:0;transform:translateY(4px);box-shadow:0 12px 30px #0006}.friend-mutual-tooltip-wrap.is-open .friend-mutual-tooltip{visibility:visible;opacity:1;transform:translateY(0)}.friend-mutual-tooltip strong{font-size:var(--type-caption);margin-bottom:8px;display:block}.friend-mutual-list{flex-direction:column;gap:7px;display:flex}.friend-mutual-person{min-width:0;font-size:var(--type-caption);align-items:center;gap:8px;font-weight:700;display:flex}.friend-mutual-person>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.friend-mutual-avatar{color:#fff;background:var(--grad-btn);border-radius:var(--r-sm);width:28px;height:28px;font-size:var(--type-caption);flex:0 0 28px;justify-content:center;align-items:center;font-weight:900;display:flex;overflow:hidden}.friend-mutual-avatar img{object-fit:cover;width:100%;height:100%}.friend-recommendation-action{margin-top:auto;padding-top:10px}.friend-recommendation-request{width:100%;min-height:44px;font-size:var(--type-caption);white-space:normal;padding:9px 8px;line-height:1.2}.friend-recommendations-more{margin:20px auto 0;display:flex}.friend-recommendations-error{color:var(--danger);font-size:var(--type-caption);margin-bottom:10px}.friend-recommendation-sent{min-height:44px;color:var(--success);background:color-mix(in srgb, var(--success) 10%, transparent);border:1px solid color-mix(in srgb, var(--success) 30%, transparent);border-radius:var(--r-md);font-size:var(--type-caption);justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding:8px 12px;font-weight:700;display:flex}.friend-recommendation-sent button{min-height:44px;color:var(--t2);font-size:var(--type-caption);padding-inline:8px;font-weight:700}.friend-recommendation-sent button:hover{color:var(--t1)}.friend-recommendation-sent button:disabled{opacity:.5;cursor:wait}.friend-recommendations-status,.friend-recommendations-empty{text-align:center;min-height:180px;color:var(--t3);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:28px 20px;display:flex}.friend-recommendations-empty strong{color:var(--t1);font-size:var(--type-body-sm)}.friend-recommendations-empty span{font-size:var(--type-caption)}@media (max-width:1280px){.friend-recommendations-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:1100px){.friend-recommendations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:820px){.friend-recommendations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.friends-discovery-search-row{gap:8px}.friends-filters-trigger{min-width:108px;padding-inline:10px}.friends-filters-backdrop{z-index:209;background:#000000a6;display:block;position:fixed;inset:0}.friends-filters-popover{z-index:210;top:auto;left:10px;right:10px;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0px) + 10px);width:auto;max-height:calc(100dvh - var(--mobile-nav-height) - 30px);border-radius:var(--r-lg);padding:18px;position:fixed;overflow-y:auto}.friends-filter-chip,.friends-active-filters-reset{min-height:44px}.friends-active-filters-reset{margin-left:0;padding-inline:8px}.friend-recommendations-grid{gap:10px}.friend-recommendation-body{padding:10px}.friend-recommendation-name,.friend-recommendation-request{font-size:var(--type-caption)}.friend-mutual-tooltip{z-index:220;left:12px;right:12px;bottom:calc(var(--mobile-nav-height) + 16px);width:auto;position:fixed}}