.friends-page{max-width:880px;margin:0 auto;padding:5rem 2rem 4rem;animation:fadeIn .6s ease-out}.friends-header{text-align:center;margin-bottom:4.5rem}.friends-header .page-title{color:var(--text)}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;margin-bottom:6rem;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.friend-card{display:flex;align-items:center;gap:.95rem;padding:1.15rem 1.25rem;background:var(--bg);text-decoration:none;transition:var(--transition-colors);animation:friendIn .6s ease-out backwards;animation-delay:calc(min(var(--i,0),20) * 30ms)}@keyframes friendIn{from{opacity:0}to{opacity:1}}.friend-card:hover{background:var(--bg-s)}.friend-avatar{flex-shrink:0;width:46px;height:46px;border-radius:50%;background-image:var(--bg-image);background-size:cover;background-position:50%;background-repeat:no-repeat;background-color:var(--bg-s);outline:1px solid var(--border);outline-offset:2px;transition:var(--transition-colors)}.friend-card:hover .friend-avatar{outline-color:var(--border-h)}.friend-card-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.friend-name{font-family:var(--font-serif);font-weight:400;font-size:.95rem;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;display:inline-block;width:fit-content;max-width:100%;transition:var(--transition-colors)}.friend-card:hover .friend-name{border-bottom-color:var(--border-h)}.friend-desc{font-size:.76rem;color:var(--text-t);line-height:1.6;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.friend-archive{margin:-3rem 0 5.5rem}.friend-archive summary{display:flex;align-items:baseline;gap:1rem;padding:1rem .25rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);cursor:pointer;list-style:none;user-select:none;transition:var(--transition-colors)}.friend-archive summary::-webkit-details-marker{display:none}.friend-archive summary:hover{color:var(--text)}.friend-archive-title{font-family:var(--font-serif);font-weight:400;font-size:1.05rem;letter-spacing:.1em;color:var(--text-t);transition:var(--transition-colors)}.friend-archive summary:hover .friend-archive-title{color:var(--text)}.friend-archive-hint{font-size:.76rem;letter-spacing:.04em;color:var(--text-t);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-archive-toggle::after{content:'展开';font-size:.74rem;letter-spacing:.14em;color:var(--text-t);transition:var(--transition-colors)}.friend-archive[open] .friend-archive-toggle::after{content:'收起'}.friend-archive-grid{margin:1.25rem 0 0}.friend-card-archived .friend-avatar{filter:grayscale(1);opacity:.5}.friend-card-archived .friend-name{color:var(--text-s)}.friend-reason{white-space:normal;-webkit-line-clamp:2;line-clamp:2}.friend-exchange{padding:2.75rem 0 0;border-top:1px solid var(--border)}.friend-exchange h2{font-family:var(--font-serif);font-weight:400;font-size:1.45rem;letter-spacing:.06em;margin-bottom:2rem;color:var(--text)}.friend-exchange-info{display:flex;flex-direction:column}.friend-exchange-row{display:flex;align-items:center;gap:1.25rem;padding:1rem .25rem;border-bottom:1px solid var(--border);transition:var(--transition-colors)}.friend-exchange-row:hover{border-bottom-color:var(--border-h)}.friend-exchange-key{flex-shrink:0;width:3.75rem;font-size:.72rem;letter-spacing:.25em;color:var(--text-t)}.friend-exchange-val{flex:1;min-width:0;font-size:.88rem;color:var(--text-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-exchange-val-mono{font-family:var(--font-mono);font-size:.8rem}.friend-copy-btn{flex-shrink:0;display:inline-flex;align-items:center;padding:.3rem .9rem;font-size:.74rem;letter-spacing:.12em;color:var(--text-s);background:0 0;border:1px solid var(--border-h);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);white-space:nowrap}.friend-copy-btn:hover{color:var(--text);border-color:var(--text)}.friend-copy-btn:active{opacity:.7}.friend-copy-btn.copied{color:var(--bg);background:var(--ink);border-color:var(--ink)}.friend-exchange-note{margin-top:2rem;margin-bottom:1rem;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-s);font-size:.86rem;line-height:1.9}.friend-exchange-note strong{color:var(--text);font-weight:400;border-bottom:1px solid var(--border-h)}@media(max-width:768px){.friends-page{padding:3.25rem 1.35rem 3rem}.friends-grid{grid-template-columns:repeat(2,1fr);margin-bottom:4.5rem}.friend-card{padding:.95rem 1rem;gap:.7rem}.friend-avatar{width:40px;height:40px}.friend-name{font-size:.86rem}.friend-desc{font-size:.7rem}.friend-exchange-row{flex-wrap:wrap;gap:.6rem .75rem}.friend-exchange-val{white-space:normal;word-break:break-all}.friend-copy-btn{margin-left:auto}}@media(max-width:480px){.friends-grid{grid-template-columns:1fr}.friend-card{padding:.85rem 1rem}.friends-header{margin-bottom:3rem}}