.friends-page{background:var(--cream);min-height:100svh;color:var(--ink)}.friends-page>header{border-bottom:1px solid var(--edge,#d8cebc);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:20px clamp(16px,4vw,64px);display:flex}.friends-page nav{flex-wrap:wrap;gap:8px 20px;display:flex}.friends-page a:not(.ui-button){color:var(--ink);text-underline-offset:4px;align-items:center;min-height:44px;display:inline-flex}.friends-shell{max-width:960px;margin:auto;padding:clamp(24px,5vw,56px) 16px}.friends-shell>h1{margin:10px 0 20px;font:500 clamp(2.1rem,5vw,3.5rem)/1.1 Georgia,serif}.friends-intro,.friends-section>p,.friends-footnote{color:var(--muted);line-height:1.6}.friends-section{border:1px solid var(--edge,#d8cebc);background:var(--paper);border-radius:18px;margin-top:22px;padding:clamp(16px,3vw,28px)}.friends-section h2{margin:0 0 14px;font:500 1.6rem/1.2 Georgia,serif}.friends-section h2>span{color:var(--muted);margin-left:8px;font:500 1rem Arial,sans-serif}.friend-card{border-top:1px solid var(--edge,#d8cebc);flex-wrap:wrap;align-items:center;gap:14px;padding:18px 0;display:flex}.friend-avatar{background:var(--soft-surface);border:1px solid #ad9b76;border-bottom:5px solid #a18c64;border-radius:8px;flex:0 0 48px;place-items:center;height:60px;font:700 1.5rem Georgia,serif;display:grid}.friend-details{overflow-wrap:anywhere;flex:160px;min-width:0}.friend-details h3{margin:0;font:500 1.25rem/1.3 Georgia,serif}.friend-details p{margin:4px 0;font-size:.9rem}.friend-details small{color:var(--muted)}.friend-actions,.friend-dialog-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.friend-actions>span{color:var(--muted);font-size:.875rem}.friend-search{gap:12px;display:flex}.friend-search input{flex:1}.friend-search .ui-button{flex-shrink:0}.friend-search-result{margin-top:18px}.friend-status{color:var(--ink);line-height:1.5}.friend-dialog-actions{justify-content:flex-end;margin-top:24px}.friend-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:500px){.friend-search{flex-direction:column}.friend-actions{width:100%}.friends-page .brand{font-size:1.2rem}}