.friends-page{max-width:1200px;margin:0 auto;padding:3rem 1.5rem}.friends-header{position:relative;text-align:center;margin-bottom:2.5rem}.friends-header .page-title{background:linear-gradient(120deg,var(--text) 25%,var(--primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:3rem}.friend-card{position:relative;display:flex;align-items:center;gap:.9rem;padding:.9rem;background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--sh-sm);text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;animation:friendIn .55s cubic-bezier(.22,1,.36,1)backwards;animation-delay:calc(min(var(--i,0),20) * 35ms);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),border-color .25s ease}@keyframes friendIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.friend-card::before{content:"";position:absolute;top:-40%;left:-12%;width:55%;height:180%;background:radial-gradient( ellipse at center,rgba(var(--primary-rgb),.16),transparent 65% );opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:0}.friend-card:hover{transform:translateY(-5px);border-color:rgba(var(--primary-rgb),.45);box-shadow:0 14px 32px rgba(var(--primary-rgb),.18),var(--sh-md)}.friend-card:hover::before{opacity:1}.friend-avatar{position:relative;z-index:1;flex-shrink:0;width:54px;height:54px;border-radius:50%;background-image:var(--bg-image);background-size:cover;background-position:50%;background-repeat:no-repeat;background-color:var(--bg-s);border:2px solid var(--card-bg);box-shadow:0 0 0 1px var(--border),var(--sh-sm);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}.friend-card:hover .friend-avatar{transform:scale(1.08)rotate(-4deg);box-shadow:0 0 0 2px var(--card-bg),0 0 0 4px var(--primary),0 8px 18px rgba(var(--primary-rgb),.35)}.friend-card-content{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.friend-name{font-size:.98rem;font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease}.friend-card:hover .friend-name{color:var(--primary)}.friend-desc{font-size:.8rem;color:var(--text-s);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.friend-exchange{background:var(--card-bg);padding:2rem;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--sh-sm)}.friend-exchange h2{position:relative;font-size:1.35rem;font-weight:600;margin-bottom:1.25rem;color:var(--text);padding-left:.85rem}.friend-exchange h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.05em;border-radius:999px;background:linear-gradient(var(--primary),var(--accent))}.friend-exchange-info{display:flex;flex-direction:column;gap:.625rem}.friend-exchange-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-s);border-radius:var(--radius-sm);border:1px solid var(--border);transition:border-color .25s ease,background-color .25s ease}.friend-exchange-row:hover{border-color:rgba(var(--primary-rgb),.3)}.friend-exchange-key{flex-shrink:0;width:3.5rem;font-size:.82rem;font-weight:600;color:var(--text-s)}.friend-exchange-val{flex:1;min-width:0;font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-exchange-val-mono{font-family:var(--font-mono);font-size:.84rem}.friend-copy-btn{flex-shrink:0;display:inline-flex;align-items:center;padding:.35rem .85rem;font-size:.78rem;font-weight:500;color:var(--primary);background:rgba(var(--primary-rgb),.08);border:1px solid rgba(var(--primary-rgb),.2);border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);white-space:nowrap}.friend-copy-btn:hover{background:rgba(var(--primary-rgb),.15);border-color:var(--primary);transform:translateY(-1px)}.friend-copy-btn:active{transform:translateY(0)}.friend-copy-btn.copied{color:#fff;background:var(--primary);border-color:var(--primary)}.friend-exchange-note{margin-top:1.25rem;margin-bottom:1rem;padding:.875rem 1rem;background:rgba(var(--secondary-rgb),.08);border-radius:var(--radius-sm);border:1px solid rgba(var(--secondary-rgb),.15);color:var(--text-s);font-size:.88rem;line-height:1.6}.friend-exchange-note strong{color:var(--secondary);font-weight:600}@media(max-width:768px){.friends-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.friend-card{padding:.65rem;gap:.6rem}.friend-avatar{width:42px;height:42px}.friend-name{font-size:.88rem}.friend-desc{font-size:.74rem}.friend-exchange{padding:1.5rem}.friend-exchange-row{flex-wrap:wrap;padding:.625rem .75rem}.friend-exchange-val{white-space:normal;word-break:break-all}.page-title{font-size:1.8rem}}@media(max-width:480px){.friends-page{padding:2rem 1rem}.friends-grid{gap:.625rem}.friend-card{flex-direction:column;text-align:center;padding:.85rem .5rem;gap:.5rem}.friend-avatar{width:48px;height:48px}.friend-card-content{align-items:center}.friend-name{font-size:.82rem}.friend-desc{display:none}.friend-exchange{padding:1.25rem}.page-title{font-size:1.5rem}.page-description{font-size:.95rem}}