.friends-page{gap:var(--space-6);flex-direction:column;display:flex}.friends-search{max-width:400px}.friends-list{gap:var(--space-3);flex-direction:column;display:flex}.friends-section-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-1)}.friend-row{align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface-glass);border:1px solid var(--surface-border);border-radius:var(--radius-lg);transition:all var(--transition-base);display:flex}.friend-row:hover{background:var(--surface-glass-hover);border-color:var(--surface-border-hover)}.friend-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.friend-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}.friend-handle{font-size:var(--text-xs);color:var(--text-tertiary)}.friend-genres{gap:var(--space-1);flex-wrap:wrap;display:flex}.friend-actions{gap:var(--space-2);flex-shrink:0;display:flex}.friends-add-section{gap:var(--space-4);padding:var(--space-6);background:var(--surface-glass);border:1px solid var(--surface-border);border-radius:var(--radius-lg);flex-direction:column;display:flex}.friends-add-title{font-size:var(--text-md);font-weight:var(--weight-semibold)}.friends-add-form{gap:var(--space-3);align-items:flex-end;display:flex}.friends-add-form .input-group{flex:1;max-width:300px}@media (max-width:768px){.friend-row{gap:var(--space-3);flex-wrap:wrap}.friend-genres{order:4;width:100%}.friend-actions{margin-left:auto}.friends-add-form{flex-direction:column;align-items:stretch}.friends-add-form .input-group{max-width:none}}