.friend-add{align-items:flex-end;gap:14px;margin:24px 0;display:flex}.friend-add label{flex:1;gap:8px;display:grid}.friend-add input,.friends-list>input{border:1px solid var(--line);background:var(--surface-soft);width:100%;color:var(--ink);border-radius:10px;padding:11px}.friends-list{gap:12px;margin-top:18px;display:grid}.friend-row{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:14px 0;animation:.2s friend-appear;display:flex}.friend-row>div:first-of-type{flex:1;min-width:0}.friend-row a{overflow-wrap:anywhere}.friend-row small{color:var(--muted);margin-top:5px;font-size:12px;display:block}.friend-avatar{background:var(--lavender);width:44px;height:44px;color:var(--purple);border-radius:50%;flex-shrink:0;place-items:center;display:grid;position:relative}.friend-avatar i{border:2px solid var(--surface);background:var(--muted);border-radius:50%;width:9px;height:9px;position:absolute;bottom:0;right:0}.friend-avatar i[data-status=online]{background:#4c9361}.friend-row-actions{flex-wrap:wrap;justify-content:flex-end;gap:5px;display:flex}.friends-modal{max-height:85dvh;overflow:auto}.friend-button{gap:4px;display:grid}.friend-button>small{color:var(--muted);font-size:11px}.friend-label{color:var(--purple);align-items:center;gap:5px;font-size:13px;display:flex}.profile-friend-stat{text-align:left;color:var(--ink)}.profile-stats .icon{width:17px;height:17px;color:var(--purple);margin-bottom:5px;display:block}.profile-stats .profile-library-link .icon{display:inline-block}.friends-page h1{align-items:center;gap:12px;display:flex}@keyframes friend-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (max-width:600px){.friend-add{flex-direction:column;align-items:stretch}.friend-row{gap:8px}.friend-row-actions{max-width:130px}.profile-stats{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){.friend-row{animation:none}}.friend-search-panel{border:1px solid var(--line);background:var(--surface);border-radius:18px;margin:24px 0;padding:20px}.friend-search-panel .friend-add{align-items:flex-start;margin:0}.friend-search-field{flex:1;min-width:0;position:relative}.friend-search-panel .friend-search-field>label{align-items:center;gap:8px;margin-bottom:10px;font-size:15px;font-weight:600;display:flex}.friend-search-field>label>.icon{color:var(--purple);width:18px;height:18px}.friend-search-field>small{color:var(--muted);margin-top:8px;font-size:13px;line-height:1.5;display:block}.friend-search-input,.friend-list-search{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;align-items:center;gap:10px;min-height:48px;padding:0 14px;transition:border-color .16s,box-shadow .16s;display:flex}.friend-search-input:focus-within,.friend-list-search:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 15%,transparent)}.friend-search-prefix{color:var(--purple);-webkit-user-select:none;user-select:none;flex:none;font-size:19px;font-weight:600}.friend-search-panel .friend-search-input>input,.friend-list-search>input{width:100%;min-width:0;min-height:46px;color:var(--ink);font:16px/1.4 var(--font-ui);box-shadow:none;background:0 0;border:0;border-radius:0;outline:none;padding:0}.friend-search-input>.icon,.friend-list-search>.icon{width:18px;height:18px;color:var(--muted);flex:none}.friend-search-panel .friend-add>.btn{flex:none;gap:8px;min-height:48px;margin-top:32px;font-size:14px}.friend-suggestions{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft);border-radius:14px;margin-top:10px;position:relative;overflow:hidden}.friend-suggestions>[role=listbox]{overscroll-behavior:contain;max-height:300px;overflow-y:auto}.friend-suggestion{text-align:left;width:100%;min-height:68px;color:var(--ink);border-bottom:1px solid var(--line);font:15px/1.4 var(--font-ui);align-items:center;gap:12px;padding:12px 14px;display:flex}.friend-suggestion>span:nth-child(2),.friend-selected>span:nth-child(2){overflow-wrap:anywhere;flex:1;min-width:0}.friend-suggestion b,.friend-selected b{font-size:15px;display:block}.friend-suggestion small,.friend-selected small{color:var(--muted);margin-top:3px;font-size:13px;display:block}.friend-suggestion>.icon{color:var(--purple);flex:none}.friend-suggestion:hover,.friend-suggestion[aria-selected=true],.friend-suggestion:focus-visible{background:var(--surface-soft);outline:2px solid var(--purple);outline-offset:-2px}.friend-suggestions>p,.friend-search-error{color:var(--muted);margin:0;padding:16px;font-size:14px;line-height:1.5}.friend-suggestions>p,.friend-search-message,.friend-empty{align-items:center;gap:10px;display:flex}.friend-search-count{color:var(--muted);padding:10px 14px;font-size:12px;line-height:1.5;display:block}.friend-search-message{overflow-wrap:anywhere;margin:14px 0 0;font-size:14px;line-height:1.5}.friend-search-message>.icon,.friend-empty>.icon{color:var(--purple);flex:none}.friend-selected{background:var(--surface-soft);border-radius:12px;align-items:center;gap:12px;margin-top:14px;padding:12px;display:flex}.friends-tabs{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px;padding-bottom:16px;display:flex}.friends-tabs>button{min-height:44px;font:14px/1.4 var(--font-ui);color:var(--muted);border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:10px 14px;display:flex}.friends-tabs>button>.icon{color:var(--purple);flex:none;width:18px;height:18px}.friends-tabs>button[data-state=active]{background:var(--lavender);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 35%,transparent)}.friends-tabs>button:focus-visible,.friend-search-panel button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}.friend-request-count{background:var(--purple);min-width:24px;min-height:24px;color:var(--surface);border-radius:8px;justify-content:center;align-items:center;gap:4px;padding:2px 6px;font-size:12px;font-weight:700;display:inline-flex}.friend-request-count>.icon{width:13px;height:13px}.friend-list-search .icon-btn{flex:none;min-width:40px;min-height:40px}.friend-empty{border:1px dashed var(--line);border-radius:12px;padding:20px 14px;font-size:14px;line-height:1.6}.friend-row-actions :is(.btn,.text-btn){align-items:center;gap:6px;min-height:40px;font-size:13px;display:inline-flex}@media (max-width:600px){.friend-search-panel{padding:14px}.friend-search-panel .friend-add>.btn{width:100%;margin-top:0}.friends-tabs{gap:6px}.friends-tabs>button{flex:auto;padding:10px;font-size:13px}.friend-suggestions>[role=listbox]{max-height:260px}}@media (prefers-reduced-motion:reduce){.friend-search-input,.friend-list-search{transition:none}}